fumadocs-ui 15.0.3 → 15.0.5

package/dist/components/accordion.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { Check, ChevronRight, LinkIcon } from 'lucide-react';
 import { forwardRef, useState, useEffect, } from 'react';
-import { cn } from '../utils/cn';
-import { useCopyButton } from '../utils/use-copy-button';
-import { buttonVariants } from '../components/ui/button';
+import { cn } from '../utils/cn.js';
+import { useCopyButton } from '../utils/use-copy-button.js';
+import { buttonVariants } from '../components/ui/button.js';
 export const Accordions = forwardRef(({ type = 'single', className, defaultValue, ...props }, ref) => {
     const [value, setValue] = useState(type === 'single' ? (defaultValue ?? '') : (defaultValue ?? []));
     useEffect(() => {

package/dist/components/api.d.ts

@@ -1,4 +1,4 @@
-export * from '../utils/cn';
-export * from '../components/ui/button';
-export { useCopyButton } from '../utils/use-copy-button';
+export * from '../utils/cn.js';
+export * from '../components/ui/button.js';
+export { useCopyButton } from '../utils/use-copy-button.js';
 //# sourceMappingURL=api.d.ts.map

package/dist/components/api.js

@@ -1,3 +1,3 @@
-export * from '../utils/cn';
-export * from '../components/ui/button';
-export { useCopyButton } from '../utils/use-copy-button';
+export * from '../utils/cn.js';
+export * from '../components/ui/button.js';
+export { useCopyButton } from '../utils/use-copy-button.js';

package/dist/components/banner.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import { X } from 'lucide-react';
-import { cn } from '../utils/cn';
-import { buttonVariants } from '../components/ui/button';
+import { cn } from '../utils/cn.js';
+import { buttonVariants } from '../components/ui/button.js';
 export function Banner({ id, variant = 'normal', changeLayout = true, height = '3rem', ...props }) {
     const [open, setOpen] = useState(true);
     const globalKey = id ? `nd-banner-${id}` : null;

package/dist/components/callout.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangle, CircleX, Info } from 'lucide-react';
 import { forwardRef } from 'react';
-import { cn } from '../utils/cn';
+import { cn } from '../utils/cn.js';
 export const Callout = forwardRef(({ className, children, title, type = 'info', icon, ...props }, ref) => {
     return (_jsxs("div", { ref: ref, className: cn('my-6 flex flex-row gap-2 rounded-lg border bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md', className), ...props, children: [icon ??
                 {

package/dist/components/card.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'fumadocs-core/link';
-import { cn } from '../utils/cn';
+import { cn } from '../utils/cn.js';
 export function Cards(props) {
     return (_jsx("div", { ...props, className: cn('grid grid-cols-1 gap-4 sm:grid-cols-2', props.className), children: props.children }));
 }

package/dist/components/codeblock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,uBAAuB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAxCpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,uBAAuB;+CAmGxC,CAAC"}
+{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,uBAAuB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAxCpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,uBAAuB;+CAmGxC,CAAC"}

package/dist/components/codeblock.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Copy } from 'lucide-react';
 import { forwardRef, useCallback, useRef, } from 'react';
-import { cn } from '../utils/cn';
-import { ScrollArea, ScrollBar, ScrollViewport, } from '../components/ui/scroll-area';
-import { useCopyButton } from '../utils/use-copy-button';
-import { buttonVariants } from '../components/ui/button';
+import { cn } from '../utils/cn.js';
+import { ScrollArea, ScrollBar, ScrollViewport, } from '../components/ui/scroll-area.js';
+import { useCopyButton } from '../utils/use-copy-button.js';
+import { buttonVariants } from '../components/ui/button.js';
 export const Pre = forwardRef(({ className, ...props }, ref) => {
     return (_jsx("pre", { ref: ref, className: cn('p-4 focus-visible:outline-none', className), ...props, children: props.children }));
 });
@@ -34,5 +34,5 @@ function CopyButton({ className, onCopy, ...props }) {
     const [checked, onClick] = useCopyButton(onCopy);
     return (_jsxs("button", { type: "button", className: cn(buttonVariants({
             color: 'ghost',
-        }), 'transition-opacity group-hover:opacity-100', !checked && 'opacity-0', className), "aria-label": "Copy Text", onClick: onClick, ...props, children: [_jsx(Check, { className: cn('size-3.5 transition-transform', !checked && 'scale-0') }), _jsx(Copy, { className: cn('absolute size-3.5 transition-transform', checked && 'scale-0') })] }));
+        }), 'transition-opacity group-hover:opacity-100 [&_svg]:size-3.5', !checked && '[@media(hover:hover)]:opacity-0', className), "aria-label": checked ? 'Copied Text' : 'Copy Text', onClick: onClick, ...props, children: [_jsx(Check, { className: cn('transition-transform', !checked && 'scale-0') }), _jsx(Copy, { className: cn('absolute transition-transform', checked && 'scale-0') })] }));
 }

package/dist/components/dialog/search-algolia.d.ts

@@ -1,6 +1,6 @@
 import { type AlgoliaOptions } from 'fumadocs-core/search/client';
 import { type ReactNode } from 'react';
-import { type SharedProps, type TagItem } from './search';
+import { type SharedProps, type TagItem } from './search.js';
 export interface AlgoliaSearchDialogProps extends SharedProps {
     index: AlgoliaOptions['index'];
     searchOptions?: Omit<AlgoliaOptions, 'index'>;

package/dist/components/dialog/search-algolia.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useDocsSearch, } from 'fumadocs-core/search/client';
 import { useState } from 'react';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
-import { SearchDialog, TagsList, } from './search';
+import { SearchDialog, TagsList, } from './search.js';
 export default function AlgoliaSearchDialog({ index, searchOptions, tags, defaultTag, showAlgolia = false, allowClear = false, ...props }) {
     const [tag, setTag] = useState(defaultTag);
     const { search, setSearch, query } = useDocsSearch({

package/dist/components/dialog/search-default.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type SharedProps, type TagItem } from './search';
+import { type SharedProps, type TagItem } from './search.js';
 export interface DefaultSearchDialogProps extends SharedProps {
     /**
      * @defaultValue 'fetch'

package/dist/components/dialog/search-default.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useDocsSearch } from 'fumadocs-core/search/client';
 import { useState } from 'react';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
-import { useI18n } from '../../contexts/i18n';
-import { SearchDialog, TagsList, } from './search';
+import { useI18n } from '../../contexts/i18n.js';
+import { SearchDialog, TagsList, } from './search.js';
 export default function DefaultSearchDialog({ defaultTag, tags, api, delayMs, type = 'fetch', allowClear = false, ...props }) {
     const { locale } = useI18n();
     const [tag, setTag] = useState(defaultTag);

package/dist/components/dialog/search-orama.d.ts

@@ -1,6 +1,6 @@
 import { type OramaCloudOptions } from 'fumadocs-core/search/client';
 import { type ReactNode } from 'react';
-import { type SharedProps, type TagItem } from './search';
+import { type SharedProps, type TagItem } from './search.js';
 export interface OramaSearchDialogProps extends SharedProps {
     client: OramaCloudOptions['client'];
     searchOptions?: OramaCloudOptions['params'];

package/dist/components/dialog/search-orama.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useDocsSearch, } from 'fumadocs-core/search/client';
 import { useState } from 'react';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
-import { SearchDialog, TagsList, } from './search';
+import { SearchDialog, TagsList, } from './search.js';
 /**
  * Orama Cloud integration
  */

package/dist/components/dialog/search.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FileText, Hash, Loader2, SearchIcon, Text } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useMemo, useEffect, useState, useRef, useCallback, } from 'react';
-import { useI18n } from '../../contexts/i18n';
-import { cn } from '../../utils/cn';
-import { useSidebar } from '../../contexts/sidebar';
-import { buttonVariants } from '../../components/ui/button';
+import { useI18n } from '../../contexts/i18n.js';
+import { cn } from '../../utils/cn.js';
+import { useSidebar } from '../../contexts/sidebar.js';
+import { buttonVariants } from '../../components/ui/button.js';
 import { Dialog, DialogContent, DialogOverlay, DialogTitle, } from '@radix-ui/react-dialog';
 import { cva } from 'class-variance-authority';
 export function SearchDialog({ open, onOpenChange, footer, links = [], search, onSearchChange, isLoading, ...props }) {

package/dist/components/dynamic-codeblock.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CodeBlock, Pre } from '../components/codeblock';
+import { CodeBlock, Pre } from '../components/codeblock.js';
 import { PrerenderScript, useShiki } from 'fumadocs-core/utils/use-shiki';
 import { useId } from 'react';
-import { cn } from '../utils/cn';
+import { cn } from '../utils/cn.js';
 const components = {
     pre(props) {
         return (_jsx(CodeBlock, { ...props, className: cn('my-0', props.className), children: _jsx(Pre, { children: props.children }) }));

package/dist/components/files.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
 import { FileIcon, FolderIcon, FolderOpen } from 'lucide-react';
 import { useState } from 'react';
-import { cn } from '../utils/cn';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from './ui/collapsible';
+import { cn } from '../utils/cn.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from './ui/collapsible.js';
 const itemVariants = cva('flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4');
 export function Files({ className, ...props }) {
     return (_jsx("div", { className: cn('not-prose rounded-md border bg-fd-card p-2', className), ...props, children: props.children }));

package/dist/components/heading.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link } from 'lucide-react';
-import { cn } from '../utils/cn';
+import { cn } from '../utils/cn.js';
 export function Heading({ as, className, ...props }) {
     const As = as ?? 'h1';
     if (!props.id)

package/dist/components/inline-toc.d.ts

@@ -1,5 +1,5 @@
 import type { TOCItemType } from 'fumadocs-core/server';
-import { Collapsible } from './ui/collapsible';
+import { Collapsible } from './ui/collapsible.js';
 import { ComponentProps } from 'react';
 export interface InlineTocProps extends ComponentProps<typeof Collapsible> {
     items: TOCItemType[];

package/dist/components/inline-toc.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown } from 'lucide-react';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from './ui/collapsible';
-import { cn } from '../utils/cn';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from './ui/collapsible.js';
+import { cn } from '../utils/cn.js';
 export function InlineTOC({ items, ...props }) {
     return (_jsxs(Collapsible, { ...props, className: cn('not-prose rounded-lg border bg-fd-card text-fd-card-foreground', props.className), children: [_jsxs(CollapsibleTrigger, { className: "group inline-flex w-full items-center justify-between px-4 py-2.5 font-medium", children: [props.children ?? 'Table of Contents', _jsx(ChevronDown, { className: "size-4 transition-transform duration-200 group-data-[state=open]:rotate-180" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col p-4 pt-0 text-sm text-fd-muted-foreground", children: items.map((item) => (_jsx("a", { href: item.url, className: "border-s py-1.5 hover:text-fd-accent-foreground", style: {
                             paddingInlineStart: 12 * Math.max(item.depth - 1, 0),

package/dist/components/layout/language-toggle.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useI18n } from '../../contexts/i18n';
-import { Popover, PopoverContent, PopoverTrigger, } from '../../components/ui/popover';
-import { cn } from '../../utils/cn';
-import { buttonVariants } from '../../components/ui/button';
+import { useI18n } from '../../contexts/i18n.js';
+import { Popover, PopoverContent, PopoverTrigger, } from '../../components/ui/popover.js';
+import { cn } from '../../utils/cn.js';
+import { buttonVariants } from '../../components/ui/button.js';
 export function LanguageToggle(props) {
     const context = useI18n();
     if (!context.locales)

package/dist/components/layout/nav.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Link from 'fumadocs-core/link';
 import { createContext, useContext, useEffect, useState, } from 'react';
-import { cn } from '../../utils/cn';
-import { useI18n } from '../../contexts/i18n';
+import { cn } from '../../utils/cn.js';
+import { useI18n } from '../../contexts/i18n.js';
 const NavContext = createContext({
     isTransparent: false,
 });

package/dist/components/layout/root-toggle.js

@@ -4,10 +4,10 @@ import { ChevronDown } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { cn } from '../../utils/cn';
-import { isActive } from '../../utils/is-active';
-import { useSidebar } from '../../contexts/sidebar';
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { cn } from '../../utils/cn.js';
+import { isActive } from '../../utils/is-active.js';
+import { useSidebar } from '../../contexts/sidebar.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
 export function RootToggle({ options, placeholder, ...props }) {
     const [open, setOpen] = useState(false);
     const { closeOnRedirect } = useSidebar();

package/dist/components/layout/search-toggle.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SearchIcon } from 'lucide-react';
-import { useSearchContext } from '../../contexts/search';
-import { useI18n } from '../../contexts/i18n';
-import { cn } from '../../utils/cn';
-import { buttonVariants } from '../../components/ui/button';
+import { useSearchContext } from '../../contexts/search.js';
+import { useI18n } from '../../contexts/i18n.js';
+import { cn } from '../../utils/cn.js';
+import { buttonVariants } from '../../components/ui/button.js';
 export function SearchToggle({ hideIfDisabled, ...props }) {
     const { setOpenSearch, enabled } = useSearchContext();
     if (hideIfDisabled && !enabled)

package/dist/components/layout/theme-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/layout/theme-toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAA6B,MAAM,OAAO,CAAC;AAYvE,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,IAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,YAAY,GAAG,mBAAmB,CAAC;CAC3C,2CAiDA"}
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/layout/theme-toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAA6B,MAAM,OAAO,CAAC;AAkBvE,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,IAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,YAAY,GAAG,mBAAmB,CAAC;CAC3C,2CAsDA"}

package/dist/components/layout/theme-toggle.js

@@ -1,10 +1,10 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
 import { Moon, Sun, Airplay } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { useLayoutEffect, useState } from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 const itemVariants = cva('size-7 rounded-full p-1.5 text-fd-muted-foreground', {
     variants: {
         active: {
@@ -13,6 +13,11 @@ const itemVariants = cva('size-7 rounded-full p-1.5 text-fd-muted-foreground', {
         },
     },
 });
+const full = [
+    ['light', Sun],
+    ['dark', Moon],
+    ['system', Airplay],
+];
 export function ThemeToggle({ className, mode = 'light-dark', ...props }) {
     const { setTheme, theme, resolvedTheme } = useTheme();
     const [mounted, setMounted] = useState(false);
@@ -22,12 +27,12 @@ export function ThemeToggle({ className, mode = 'light-dark', ...props }) {
     const container = cn('inline-flex items-center rounded-full border p-[3px]', className);
     if (mode === 'light-dark') {
         const value = mounted ? resolvedTheme : null;
-        return (_jsxs("button", { className: container, onClick: () => setTheme(value === 'light' ? 'dark' : 'light'), "data-theme-toggle": "", ...props, children: [_jsx(Sun, { className: cn(itemVariants({ active: value === 'light' })) }), _jsx(Moon, { className: cn(itemVariants({ active: value === 'dark' })) })] }));
+        return (_jsx("button", { className: container, "aria-label": `Toggle Theme`, onClick: () => setTheme(value === 'light' ? 'dark' : 'light'), "data-theme-toggle": "", ...props, children: full.map(([key, Icon]) => {
+                if (key === 'system')
+                    return;
+                return (_jsx(Icon, { className: cn(itemVariants({ active: value === key })) }, key));
+            }) }));
     }
     const value = mounted ? theme : null;
-    return (_jsx("div", { className: container, "data-theme-toggle": "", ...props, children: [
-            ['light', Sun],
-            ['dark', Moon],
-            ['system', Airplay],
-        ].map(([key, Icon]) => (_jsx("button", { "aria-label": key, className: cn(itemVariants({ active: value === key })), onClick: () => setTheme(key), children: _jsx(Icon, { className: "size-full" }) }, key))) }));
+    return (_jsx("div", { className: container, "data-theme-toggle": "", ...props, children: full.map(([key, Icon]) => (_jsx("button", { "aria-label": key, className: cn(itemVariants({ active: value === key })), onClick: () => setTheme(key), children: _jsx(Icon, { className: "size-full" }) }, key))) }));
 }

package/dist/components/layout/toc-clerk.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Primitive from 'fumadocs-core/toc';
 import { useEffect, useRef, useState } from 'react';
-import { cn } from '../../utils/cn';
-import { TocThumb } from '../../components/layout/toc-thumb';
-import { ScrollArea, ScrollViewport } from '../ui/scroll-area';
-import { TocItemsEmpty } from '../../components/layout/toc';
+import { cn } from '../../utils/cn.js';
+import { TocThumb } from '../../components/layout/toc-thumb.js';
+import { ScrollArea, ScrollViewport } from '../ui/scroll-area.js';
+import { TocItemsEmpty } from '../../components/layout/toc.js';
 export default function ClerkTOCItems({ items, isMenu = false, }) {
     const viewRef = useRef(null);
     const containerRef = useRef(null);

package/dist/components/layout/toc.js

@@ -2,13 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as Primitive from 'fumadocs-core/toc';
 import { useMemo, useRef } from 'react';
-import { cn } from '../../utils/cn';
-import { useI18n } from '../../contexts/i18n';
-import { TocThumb } from '../../components/layout/toc-thumb';
-import { ScrollArea, ScrollViewport } from '../ui/scroll-area';
-import { Popover, PopoverContent, PopoverTrigger, } from '../../components/ui/popover';
+import { cn } from '../../utils/cn.js';
+import { useI18n } from '../../contexts/i18n.js';
+import { TocThumb } from '../../components/layout/toc-thumb.js';
+import { ScrollArea, ScrollViewport } from '../ui/scroll-area.js';
+import { Popover, PopoverContent, PopoverTrigger, } from '../../components/ui/popover.js';
 import { ChevronRight, Text } from 'lucide-react';
-import { usePageStyles } from '../../contexts/layout';
+import { usePageStyles } from '../../contexts/layout.js';
 export function Toc(props) {
     const { toc } = usePageStyles();
     return (_jsx("div", { id: "nd-toc", ...props, className: cn('sticky top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] h-[var(--fd-toc-height)] pb-2 pt-12', toc, props.className), style: {

package/dist/components/tabs.d.ts

@@ -1,5 +1,5 @@
 import type { TabsContentProps, TabsProps as BaseProps } from '@radix-ui/react-tabs';
-import * as Primitive from './ui/tabs';
+import * as Primitive from './ui/tabs.js';
 export { Primitive };
 export interface TabsProps extends BaseProps {
     /**

package/dist/components/tabs.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState, createContext, useContext, useRef, useLayoutEffect, useId, useEffect, } from 'react';
-import { cn } from '../utils/cn';
-import * as Primitive from './ui/tabs';
+import { cn } from '../utils/cn.js';
+import * as Primitive from './ui/tabs.js';
 export { Primitive };
 const listeners = new Map();
 function addChangeListener(id, listener) {

package/dist/components/type-table.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InfoIcon } from 'lucide-react';
 import Link from 'next/link';
 import { cva } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover';
+import { cn } from '../utils/cn.js';
+import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover.js';
 export function Info({ children }) {
     return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: _jsx(InfoIcon, { className: "size-4" }) }), _jsx(PopoverContent, { className: "prose max-h-[400px] min-w-[220px] max-w-[400px] overflow-auto text-sm prose-no-margin", children: children })] }));
 }

package/dist/components/ui/collapsible.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { forwardRef } from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 const Collapsible = CollapsiblePrimitive.Root;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 const CollapsibleContent = forwardRef(({ children, ...props }, ref) => {

package/dist/components/ui/navigation-menu.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import * as Primitive from '@radix-ui/react-navigation-menu';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 const NavigationMenu = Primitive.Root;
 const NavigationMenuList = Primitive.List;
 const NavigationMenuItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(Primitive.NavigationMenuItem, { ref: ref, className: cn('list-none', className), ...props, children: children })));

package/dist/components/ui/popover.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as React from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, side: "bottom", className: cn('z-50 min-w-[220px] max-w-[98vw] rounded-lg border bg-fd-popover p-2 text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in', className), ...props }) })));

package/dist/components/ui/scroll-area.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as React from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn('overflow-hidden', className), ...props, children: [children, _jsx(ScrollAreaPrimitive.Corner, {}), _jsx(ScrollBar, { orientation: "vertical" })] })));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 const ScrollViewport = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(ScrollAreaPrimitive.Viewport, { ref: ref, className: cn('size-full rounded-[inherit]', className), ...props, children: children })));

package/dist/components/ui/tabs.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as React from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/cn.js';
 const Tabs = React.forwardRef((props, ref) => {
     return (_jsx(TabsPrimitive.Root, { ref: ref, ...props, className: cn('flex flex-col overflow-hidden rounded-xl border bg-fd-card', props.className) }));
 });

package/dist/contexts/search.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type ReactNode } from 'react';
-import type { SearchLink, SharedProps } from '../components/dialog/search';
+import type { SearchLink, SharedProps } from '../components/dialog/search.js';
 interface HotKey {
     display: ReactNode;
     /**

package/dist/i18n.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type Translations, defaultTranslations, type LocaleItem } from './contexts/i18n';
+import { type Translations, defaultTranslations, type LocaleItem } from './contexts/i18n.js';
 interface I18nProviderProps {
     /**
      * Current locale

package/dist/i18n.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useRef } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
-import { useI18n, I18nContext, defaultTranslations, } from './contexts/i18n';
+import { useI18n, I18nContext, defaultTranslations, } from './contexts/i18n.js';
 export function I18nProvider({ locales = [], locale, ...props }) {
     const context = useI18n();
     const router = useRouter();

package/dist/layouts/docs/shared.d.ts

@@ -1,8 +1,8 @@
-import { type LinkItemType } from '../../layouts/links';
-import { type SidebarProps } from '../../layouts/docs/sidebar';
+import { type LinkItemType } from '../../layouts/links.js';
+import { type SidebarProps } from '../../layouts/docs/sidebar.js';
 import type { PageTree } from 'fumadocs-core/server';
 import type { FC, ReactNode } from 'react';
-import type { Option } from '../../components/layout/root-toggle';
+import type { Option } from '../../components/layout/root-toggle.js';
 export declare const layoutVariables: {
     '--fd-layout-offset': string;
 };

package/dist/layouts/docs/shared.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { BaseLinkItem } from '../../layouts/links';
-import { SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, } from '../../layouts/docs/sidebar';
-import { cn } from '../../utils/cn';
-import { buttonVariants } from '../../components/ui/button';
+import { BaseLinkItem } from '../../layouts/links.js';
+import { SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, } from '../../layouts/docs/sidebar.js';
+import { cn } from '../../utils/cn.js';
+import { buttonVariants } from '../../components/ui/button.js';
 import { notFound } from 'next/navigation';
 export const layoutVariables = {
     '--fd-layout-offset': 'max(calc(50vw - var(--fd-layout-width) / 2), 0px)',

package/dist/layouts/docs/sidebar.d.ts

@@ -2,7 +2,7 @@ import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from '
 import { type LinkProps } from 'fumadocs-core/link';
 import { type ScrollAreaProps } from '@radix-ui/react-scroll-area';
 import type { CollapsibleContentProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
-import type { SidebarComponents } from '../../layouts/docs/shared';
+import type { SidebarComponents } from '../../layouts/docs/shared.js';
 export interface SidebarProps extends HTMLAttributes<HTMLElement> {
     /**
      * Open folders by default if their level is lower or equal to a specific level

package/dist/layouts/docs/sidebar.js

@@ -6,14 +6,14 @@ import { usePathname } from 'next/navigation';
 import { createContext, useCallback, useContext, useMemo, useRef, useState, } from 'react';
 import Link from 'fumadocs-core/link';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
-import { cn } from '../../utils/cn';
-import { ScrollArea, ScrollViewport } from '../../components/ui/scroll-area';
-import { isActive } from '../../utils/is-active';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../components/ui/collapsible';
-import { useSidebar } from '../../contexts/sidebar';
-import { buttonVariants } from '../../components/ui/button';
+import { cn } from '../../utils/cn.js';
+import { ScrollArea, ScrollViewport } from '../../components/ui/scroll-area.js';
+import { isActive } from '../../utils/is-active.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../components/ui/collapsible.js';
+import { useSidebar } from '../../contexts/sidebar.js';
+import { buttonVariants } from '../../components/ui/button.js';
 import { cva } from 'class-variance-authority';
-import { useTreeContext, useTreePath } from '../../contexts/tree';
+import { useTreeContext, useTreePath } from '../../contexts/tree.js';
 const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         active: {

package/dist/layouts/docs.client.d.ts

@@ -1,5 +1,5 @@
 import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
-import { type LinkItemType } from '../layouts/links';
+import { type LinkItemType } from '../layouts/links.js';
 interface LinksMenuProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     items: LinkItemType[];
 }

package/dist/layouts/docs.client.js

@@ -4,14 +4,14 @@ import { ChevronDown, Menu, X } from 'lucide-react';
 import { useState, } from 'react';
 import { usePathname } from 'next/navigation';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
-import { cn } from '../utils/cn';
-import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover';
-import { BaseLinkItem } from '../layouts/links';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../components/ui/collapsible';
+import { cn } from '../utils/cn.js';
+import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover.js';
+import { BaseLinkItem } from '../layouts/links.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../components/ui/collapsible.js';
 import { cva } from 'class-variance-authority';
-import { buttonVariants } from '../components/ui/button';
-import { useSidebar } from '../contexts/sidebar';
-import { useNav } from '../components/layout/nav';
+import { buttonVariants } from '../components/ui/button.js';
+import { useSidebar } from '../contexts/sidebar.js';
+import { useNav } from '../components/layout/nav.js';
 import { SidebarTrigger } from 'fumadocs-core/sidebar';
 const itemVariants = cva('flex flex-row items-center gap-2 rounded-md px-3 py-2.5 text-fd-muted-foreground transition-colors duration-100 [overflow-wrap:anywhere] hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none md:px-2 md:py-1.5 [&_svg]:size-4');
 export function LinksMenu({ items, ...props }) {

package/dist/layouts/docs.d.ts

@@ -1,14 +1,14 @@
 import type { PageTree } from 'fumadocs-core/server';
 import { type ReactNode, type HTMLAttributes } from 'react';
-import { type LinkItemType } from '../layouts/links';
-import { type BaseLayoutProps } from './shared';
-import { type SidebarOptions } from '../layouts/docs/shared';
+import { type LinkItemType } from '../layouts/links.js';
+import { type BaseLayoutProps } from './shared.js';
+import { type SidebarOptions } from '../layouts/docs/shared.js';
 export interface DocsLayoutProps extends BaseLayoutProps {
     tree: PageTree.Root;
     sidebar?: Partial<SidebarOptions>;
     containerProps?: HTMLAttributes<HTMLDivElement>;
 }
 export declare function DocsLayout({ nav: { enabled: navEnabled, component: navReplace, transparentMode, ...nav }, sidebar: { enabled: sidebarEnabled, collapsible, component: sidebarReplace, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, hideSearch: sidebarHideSearch, ...sidebar }, i18n, ...props }: DocsLayoutProps): ReactNode;
-export { getSidebarTabsFromOptions, type TabOptions } from './docs/shared';
+export { getSidebarTabsFromOptions, type TabOptions } from './docs/shared.js';
 export { type LinkItemType };
 //# sourceMappingURL=docs.d.ts.map