@fumadocs/base-ui 16.8.12 → 16.9.0

package/dist/components/dialog/search.js

@@ -1,12 +1,12 @@
 "use client";
-import { I18nLabel, useI18n } from "../../contexts/i18n.js";
 import { cn } from "../../utils/cn.js";
 import { buttonVariants } from "../ui/button.js";
-import { Fragment, createContext, use, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { I18nLabel, useTranslations } from "../../contexts/i18n.js";
 import { useRouter } from "fumadocs-core/framework";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, Hash, SearchIcon } from "lucide-react";
 import { cva } from "class-variance-authority";
+import { Fragment as Fragment$1, createContext, use, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { useOnChange } from "fumadocs-core/utils/use-on-change";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { Dialog } from "@base-ui/react/dialog";
@@ -140,13 +140,13 @@ function SearchDialogHeader(props) {
 	});
 }
 function SearchDialogInput(props) {
-	const { text } = useI18n();
+	const t = useTranslations();
 	const { search, onSearchChange } = useSearch();
 	return /* @__PURE__ */ jsx("input", {
 		...props,
 		value: search,
 		onChange: (e) => onSearchChange(e.target.value),
-		placeholder: text.search,
+		placeholder: t.search,
 		className: "w-0 flex-1 bg-transparent text-lg placeholder:text-fd-muted-foreground focus-visible:outline-none"
 	});
 }
@@ -154,6 +154,7 @@ function SearchDialogClose({ children = "ESC", className, ...props }) {
 	const { onOpenChange } = useSearch();
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
+		"aria-label": useTranslations().searchClose,
 		onClick: () => onOpenChange(false),
 		className: cn(buttonVariants({
 			color: "outline",
@@ -177,7 +178,7 @@ function SearchDialogOverlay({ className, ...props }) {
 	});
 }
 function SearchDialogContent({ children, className, ...props }) {
-	const { text } = useI18n();
+	const t = useTranslations();
 	return /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
 		id: "fd-search-dialog-content",
 		"aria-describedby": void 0,
@@ -185,7 +186,7 @@ function SearchDialogContent({ children, className, ...props }) {
 		className: (s) => cn("fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-xl border bg-fd-popover text-fd-popover-foreground shadow-2xl overflow-hidden data-closed:animate-fd-dialog-out data-open:animate-fd-dialog-in focus-visible:outline-none", "*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0", typeof className === "function" ? className(s) : className),
 		children: [/* @__PURE__ */ jsx(Dialog.Title, {
 			className: "hidden",
-			children: text.search
+			children: t.search
 		}), children]
 	}) });
 }
@@ -243,7 +244,7 @@ function SearchDialogList({ items = null, Empty = () => /* @__PURE__ */ jsx("div
 					active,
 					setActive
 				}), [active]),
-				children: [items?.length === 0 && Empty(), items?.map((item) => /* @__PURE__ */ jsx(Fragment, { children: Item({
+				children: [items?.length === 0 && Empty(), items?.map((item) => /* @__PURE__ */ jsx(Fragment$1, { children: Item({
 					item,
 					onClick: () => onSelect(item)
 				}) }, item.id))]
@@ -258,16 +259,16 @@ function SearchDialogListItem({ item, className, children, renderMarkdown = (s)
 	const { active: activeId, setActive } = useSearchList();
 	const active = item.id === activeId;
 	if (item.type === "action") children ??= item.node;
-	else children ??= /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	else children ??= /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "inline-flex items-center text-fd-muted-foreground text-xs empty:hidden",
-			children: item.breadcrumbs?.map((item, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:rotate-180" }), item] }, i))
+			children: item.breadcrumbs?.map((item, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:rotate-180" }), item] }, i))
 		}),
 		item.type !== "page" && /* @__PURE__ */ jsx("div", {
 			role: "none",
-			className: "absolute start-3 inset-y-0 w-px bg-fd-border"
+			className: "absolute inset-s-3 inset-y-0 w-px bg-fd-border"
 		}),
-		item.type === "heading" && /* @__PURE__ */ jsx(Hash, { className: "absolute start-6 top-2.5 size-4 text-fd-muted-foreground" }),
+		item.type === "heading" && /* @__PURE__ */ jsx(Hash, { className: "absolute inset-s-6 top-2.5 size-4 text-fd-muted-foreground" }),
 		/* @__PURE__ */ jsx("div", {
 			className: cn("min-w-0", item.type === "text" && "ps-4", item.type === "heading" && "ps-8", item.type === "page" || item.type === "heading" ? "font-medium" : "text-fd-popover-foreground/80"),
 			children: typeof item.content === "string" ? renderMarkdown(item.content) : item.content

package/dist/components/dynamic-codeblock.core.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { CodeBlock, Pre } from "./codeblock.js";
-import { createContext, use, useId } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createContext, use, useId } from "react";
 import { useShikiDynamic } from "fumadocs-core/highlight/shiki/react";
 //#region src/components/dynamic-codeblock.core.tsx
 const PropsContext = createContext(void 0);

package/dist/components/files.js

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
-import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FileIcon, FolderIcon, FolderOpen } from "lucide-react";
 import { cva } from "class-variance-authority";
+import { useState } from "react";
 //#region src/components/files.tsx
 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");
 function Files({ className, ...props }) {

package/dist/components/github-info.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 
 //#region src/components/github-info.d.ts
 interface FetchRepositoryInfoOptions {
@@ -13,6 +13,9 @@ interface RepositoryInfo {
   stars: number;
   forks: number;
 }
+interface GithubInfoProps extends ComponentProps<'a'>, FetchRepositoryInfoOptions {
+  locale?: Intl.LocalesArgument;
+}
 declare function fetchRepositoryInfo({
   owner,
   repo,
@@ -26,7 +29,8 @@ declare function GithubInfo({
   token,
   baseUrl,
   fetchOptions,
+  locale,
   ...props
-}: ComponentProps<'a'> & FetchRepositoryInfoOptions): _$react_jsx_runtime0.JSX.Element;
+}: GithubInfoProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { FetchRepositoryInfoOptions, GithubInfo, RepositoryInfo, fetchRepositoryInfo };
+export { FetchRepositoryInfoOptions, GithubInfo, GithubInfoProps, RepositoryInfo, fetchRepositoryInfo };

package/dist/components/github-info.js

@@ -1,7 +1,7 @@
 import { cn } from "../utils/cn.js";
-import { use } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { GitFork, Star } from "lucide-react";
+import { use } from "react";
 //#region src/components/github-info.tsx
 async function fetchRepositoryInfo({ owner, repo, token, baseUrl = "https://api.github.com", fetchOptions = { next: { revalidate: 60 } } }) {
 	const endpoint = `${baseUrl}/repos/${owner}/${repo}`;
@@ -25,12 +25,13 @@ async function fetchRepositoryInfo({ owner, repo, token, baseUrl = "https://api.
 /**
 * Uses compact notation (e.g., 1.5K, 2.3M).
 */
-const defaultFormatter = new Intl.NumberFormat("en", {
+const formatterOptions = {
 	notation: "compact",
 	maximumFractionDigits: 1
-});
+};
+const defaultFormatter = new Intl.NumberFormat(void 0, formatterOptions);
 const promises = {};
-function GithubInfo({ repo, owner, token, baseUrl, fetchOptions, ...props }) {
+function GithubInfo({ repo, owner, token, baseUrl, fetchOptions, locale, ...props }) {
 	const options = {
 		repo,
 		owner,
@@ -39,6 +40,7 @@ function GithubInfo({ repo, owner, token, baseUrl, fetchOptions, ...props }) {
 		fetchOptions
 	};
 	const { stars, forks } = use(promises[JSON.stringify(options)] ??= fetchRepositoryInfo(options));
+	const formatter = locale ? new Intl.NumberFormat(locale, formatterOptions) : defaultFormatter;
 	return /* @__PURE__ */ jsxs("a", {
 		href: `https://github.com/${owner}/${repo}`,
 		rel: "noreferrer noopener",
@@ -62,9 +64,9 @@ function GithubInfo({ repo, owner, token, baseUrl, fetchOptions, ...props }) {
 			className: "flex text-xs items-center gap-1 text-fd-muted-foreground",
 			children: [
 				/* @__PURE__ */ jsx(Star, { className: "size-3" }),
-				/* @__PURE__ */ jsx("span", { children: defaultFormatter.format(stars) }),
+				/* @__PURE__ */ jsx("span", { children: formatter.format(stars) }),
 				/* @__PURE__ */ jsx(GitFork, { className: "size-3 ms-2" }),
-				/* @__PURE__ */ jsx("span", { children: defaultFormatter.format(forks) })
+				/* @__PURE__ */ jsx("span", { children: formatter.format(forks) })
 			]
 		})]
 	});

package/dist/components/heading.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef } from "react";
 
 //#region src/components/heading.d.ts
 type Types = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/components/heading.js

@@ -2,11 +2,13 @@
 import { cn } from "../utils/cn.js";
 import { buttonVariants } from "./ui/button.js";
 import { useCopyButton } from "../utils/use-copy-button.js";
+import { useTranslations } from "../contexts/i18n.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CopyCheckIcon, LinkIcon } from "lucide-react";
 //#region src/components/heading.tsx
 function Heading({ as, ...props }) {
 	const As = as ?? "h1";
+	const t = useTranslations();
 	const [isChecked, onCopy] = useCopyButton(() => {
 		if (!props.id) return;
 		const url = new URL(window.location.href);
@@ -22,7 +24,7 @@ function Heading({ as, ...props }) {
 			href: `#${props.id}`,
 			children: props.children
 		}), /* @__PURE__ */ jsx("button", {
-			"aria-label": "Copy Anchor Link",
+			"aria-label": t.headingCopyAnchor,
 			className: cn(buttonVariants({
 				variant: "ghost",
 				size: "icon-xs"

package/dist/components/image-zoom.d.ts

@@ -1,7 +1,7 @@
 import { UncontrolledProps } from "../node_modules/.pnpm/react-medium-image-zoom@5.4.5_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/react-medium-image-zoom/dist/uncontrolled.js";
-import { ComponentProps } from "react";
 import { ImageProps } from "fumadocs-core/framework";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 
 //#region src/components/image-zoom.d.ts
 type ImageZoomProps = ImageProps & {

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

@@ -1,6 +1,6 @@
 import { Collapsible } from "./ui/collapsible.js";
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 import { TOCItemType } from "fumadocs-core/toc";
 
 //#region src/components/inline-toc.d.ts

package/dist/components/inline-toc.js

@@ -1,16 +1,18 @@
 "use client";
 import { cn } from "../utils/cn.js";
+import { useTranslations } from "../contexts/i18n.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
 //#region src/components/inline-toc.tsx
 function InlineTOC({ items, className, ...props }) {
+	const t = useTranslations();
 	return /* @__PURE__ */ jsxs(Collapsible, {
 		...props,
 		className: (s) => cn("not-prose rounded-lg border bg-fd-card text-fd-card-foreground", typeof className === "function" ? className(s) : className),
 		children: [/* @__PURE__ */ 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", /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 transition-transform duration-200 group-data-[open]:rotate-180" })]
+			children: [props.children ?? t.tocInline, /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 transition-transform duration-200 group-data-open:rotate-180" })]
 		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col p-4 pt-0 text-sm text-fd-muted-foreground",
 			children: items.map((item) => /* @__PURE__ */ jsx("a", {

package/dist/components/sidebar/base.d.ts

@@ -1,9 +1,9 @@
 import { CollapsibleContentProps, CollapsibleTriggerProps } from "../ui/collapsible.js";
 import { ScrollAreaProps } from "../ui/scroll-area.js";
+import { LinkProps } from "fumadocs-core/link";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
 import { ComponentProps, PointerEvent, ReactNode, RefObject } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { LinkProps } from "fumadocs-core/link";
 
 //#region src/components/sidebar/base.d.ts
 declare namespace base_d_exports {

package/dist/components/sidebar/base.js

@@ -1,13 +1,14 @@
 "use client";
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { cn } from "../../utils/cn.js";
+import { useTranslations } from "../../contexts/i18n.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { ScrollArea, ScrollViewport } from "../ui/scroll-area.js";
-import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
+import Link from "fumadocs-core/link";
 import { usePathname } from "fumadocs-core/framework";
 import { jsx, jsxs } from "react/jsx-runtime";
-import Link from "fumadocs-core/link";
 import { ChevronDown, ExternalLink } from "lucide-react";
+import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
 import { useOnChange } from "fumadocs-core/utils/use-on-change";
 import { useMediaQuery } from "fumadocs-core/utils/use-media-query";
 import scrollIntoView from "scroll-into-view-if-needed";
@@ -239,7 +240,7 @@ function SidebarFolderContent(props) {
 function SidebarTrigger({ children, ...props }) {
 	const { setOpen } = useSidebar();
 	return /* @__PURE__ */ jsx("button", {
-		"aria-label": "Open Sidebar",
+		"aria-label": useTranslations().sidebarOpen,
 		onClick: () => setOpen((prev) => !prev),
 		...props,
 		children
@@ -249,7 +250,7 @@ function SidebarCollapseTrigger(props) {
 	const { collapsed, setCollapsed } = useSidebar();
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		"aria-label": "Collapse Sidebar",
+		"aria-label": useTranslations().sidebarCollapse,
 		"data-collapsed": collapsed,
 		onClick: () => {
 			setCollapsed((prev) => !prev);

package/dist/components/sidebar/link-item.d.ts

@@ -1,7 +1,7 @@
 import { base_d_exports } from "./base.js";
 import { LinkItemType } from "../../layouts/shared/index.js";
-import { HTMLAttributes } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { HTMLAttributes } from "react";
 
 //#region src/components/sidebar/link-item.d.ts
 type InternalComponents = Pick<typeof base_d_exports, 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;

package/dist/components/sidebar/page-tree.d.ts

@@ -1,6 +1,6 @@
 import { base_d_exports } from "./base.js";
-import { FC, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { FC, ReactNode } from "react";
 import * as PageTree from "fumadocs-core/page-tree";
 
 //#region src/components/sidebar/page-tree.d.ts

package/dist/components/sidebar/page-tree.js

@@ -1,8 +1,8 @@
 import { useTreeContext, useTreePath } from "../../contexts/tree.js";
 import { isActive } from "../../utils/urls.js";
-import { Fragment, createContext, use, useMemo } from "react";
 import { usePathname } from "fumadocs-core/framework";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, createContext, use, useMemo } from "react";
 //#region src/components/sidebar/page-tree.tsx
 const RendererContext = createContext(null);
 function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem }) {
@@ -61,7 +61,7 @@ function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 				Separator,
 				pathname
 			]),
-			children: /* @__PURE__ */ jsx(Fragment, { children: renderList(root.children) }, root.$id)
+			children: /* @__PURE__ */ jsx(Fragment$1, { children: renderList(root.children) }, root.$id)
 		});
 	};
 }

package/dist/components/sidebar/tabs/dropdown.d.ts

@@ -1,6 +1,6 @@
 import { LayoutTab, isLayoutTabActive } from "../../../layouts/shared/index.js";
-import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps, ReactNode } from "react";
 
 //#region src/components/sidebar/tabs/dropdown.d.ts
 type SidebarTabWithProps = LayoutTab;

package/dist/components/sidebar/tabs/dropdown.js

@@ -3,11 +3,11 @@ import { cn } from "../../../utils/cn.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
 import { isLayoutTabActive } from "../../../layouts/shared/index.js";
 import { useSidebar } from "../base.js";
-import { useMemo, useState } from "react";
-import { usePathname } from "fumadocs-core/framework";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
+import { usePathname } from "fumadocs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronsUpDown } from "lucide-react";
+import { useMemo, useState } from "react";
 //#region src/components/sidebar/tabs/dropdown.tsx
 function SidebarTabsDropdown({ options, placeholder, ...props }) {
 	const [open, setOpen] = useState(false);
@@ -20,7 +20,7 @@ function SidebarTabsDropdown({ options, placeholder, ...props }) {
 		closeOnRedirect.current = false;
 		setOpen(false);
 	};
-	const item = selected ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+	const item = selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		className: "size-9 shrink-0 empty:hidden md:size-5",
 		children: selected.icon
 	}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {

package/dist/components/steps.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 
 //#region src/components/steps.d.ts
 declare function Steps({

package/dist/components/tabs.d.ts

@@ -1,7 +1,7 @@
 import { Tabs as Tabs$1, TabsContent as TabsContent$1, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1 } from "./ui/tabs.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React$1 from "react";
 import { ComponentProps, ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/tabs.d.ts
 interface TabsProps extends Omit<ComponentProps<typeof Tabs$1>, 'value' | 'onValueChange'> {

package/dist/components/tabs.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { Tabs as Tabs$1, TabsContent as TabsContent$1, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1 } from "./ui/tabs.js";
-import { createContext, useContext, useEffect, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useMemo, useState } from "react";
 //#region src/components/tabs.tsx
 const TabsContext = createContext(null);
 function useTabContext() {

package/dist/components/toc/clerk.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 import * as Primitive from "fumadocs-core/toc";
 
 //#region src/components/toc/clerk.d.ts

package/dist/components/toc/clerk.js

@@ -1,11 +1,11 @@
 "use client";
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { useI18n } from "../../contexts/i18n.js";
 import { cn } from "../../utils/cn.js";
+import { useTranslations } from "../../contexts/i18n.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
 import { useTOCItems } from "./index.js";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import * as Primitive from "fumadocs-core/toc";
 //#region src/components/toc/clerk.tsx
 var clerk_exports = /* @__PURE__ */ __exportAll({
@@ -119,10 +119,9 @@ function TOCItems({ ref, className, thumbBox = true, children, ...props }) {
 	});
 }
 function TOCEmpty() {
-	const { text } = useI18n();
 	return /* @__PURE__ */ jsx("div", {
 		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
-		children: text.tocNoHeadings
+		children: useTranslations().tocNoHeadings
 	});
 }
 function ThumbTrack({ computed, thumbBox }) {

package/dist/components/toc/default.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 import * as Primitive from "fumadocs-core/toc";
 
 //#region src/components/toc/default.d.ts

package/dist/components/toc/default.js

@@ -1,11 +1,11 @@
 "use client";
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { useI18n } from "../../contexts/i18n.js";
 import { cn } from "../../utils/cn.js";
+import { useTranslations } from "../../contexts/i18n.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
 import { useTOCItems } from "./index.js";
-import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 import * as Primitive from "fumadocs-core/toc";
 //#region src/components/toc/default.tsx
 var default_exports = /* @__PURE__ */ __exportAll({
@@ -79,10 +79,9 @@ function TocThumb({ computed }) {
 	});
 }
 function TOCEmpty() {
-	const { text } = useI18n();
 	return /* @__PURE__ */ jsx("div", {
 		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
-		children: text.tocNoHeadings
+		children: useTranslations().tocNoHeadings
 	});
 }
 function TOCItem({ item, ...props }) {

package/dist/components/toc/index.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 import * as Primitive from "fumadocs-core/toc";
 
 //#region src/components/toc/index.d.ts

package/dist/components/toc/index.js

@@ -2,8 +2,8 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
-import { createContext, use, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createContext, use, useRef } from "react";
 import * as Primitive from "fumadocs-core/toc";
 //#region src/components/toc/index.tsx
 var toc_exports = /* @__PURE__ */ __exportAll({

package/dist/components/type-table.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps, ReactNode } from "react";
 
 //#region src/components/type-table.d.ts
 interface ParameterNode {

package/dist/components/type-table.js

@@ -1,14 +1,16 @@
 "use client";
 import { cn } from "../utils/cn.js";
+import { useTranslations } from "../contexts/i18n.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
-import { useEffect, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
 import { cva } from "class-variance-authority";
+import { useEffect, useState } from "react";
 //#region src/components/type-table.tsx
 const fieldVariants = cva("text-fd-muted-foreground not-prose pe-2");
 function TypeTable({ id, type, className, ...props }) {
+	const t = useTranslations();
 	return /* @__PURE__ */ jsxs("div", {
 		id,
 		className: cn("@container flex flex-col p-1 bg-fd-card text-fd-card-foreground rounded-2xl border my-6 text-sm overflow-hidden", className),
@@ -17,10 +19,10 @@ function TypeTable({ id, type, className, ...props }) {
 			className: "flex font-medium items-center px-3 py-1 not-prose text-fd-muted-foreground",
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "w-1/4",
-				children: "Prop"
+				children: t.typeTableProp
 			}), /* @__PURE__ */ jsx("p", {
 				className: "@max-xl:hidden",
-				children: "Type"
+				children: t.typeTableType
 			})]
 		}), Object.entries(type).map(([key, value]) => /* @__PURE__ */ jsx(Item, {
 			parentId: id,
@@ -30,6 +32,7 @@ function TypeTable({ id, type, className, ...props }) {
 	});
 }
 function Item({ parentId, name, item: { parameters = [], description, required = false, deprecated, typeDescription, default: defaultValue, type, typeDescriptionLink, returns } }) {
+	const t = useTranslations();
 	const [open, setOpen] = useState(false);
 	const id = parentId ? `${parentId}-${name}` : void 0;
 	useEffect(() => {
@@ -60,7 +63,7 @@ function Item({ parentId, name, item: { parameters = [], description, required =
 					className: "@max-xl:hidden",
 					children: type
 				}),
-				/* @__PURE__ */ jsx(ChevronDown, { className: "absolute end-2 size-4 text-fd-muted-foreground transition-transform group-data-[open]:rotate-180" })
+				/* @__PURE__ */ jsx(ChevronDown, { className: "absolute inset-e-2 size-4 text-fd-muted-foreground transition-transform group-data-[open]:rotate-180" })
 			]
 		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxs("div", {
 			className: "grid grid-cols-[1fr_3fr] gap-y-4 text-sm p-3 overflow-auto fd-scroll-container border-t",
@@ -69,23 +72,23 @@ function Item({ parentId, name, item: { parameters = [], description, required =
 					className: "text-sm prose col-span-full prose-no-margin empty:hidden",
 					children: description
 				}),
-				typeDescription && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+				typeDescription && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
 					className: cn(fieldVariants()),
-					children: "Type"
+					children: t.typeTableType
 				}), /* @__PURE__ */ jsx("p", {
 					className: "my-auto not-prose",
 					children: typeDescription
 				})] }),
-				defaultValue && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+				defaultValue && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
 					className: cn(fieldVariants()),
-					children: "Default"
+					children: t.typeTableDefault
 				}), /* @__PURE__ */ jsx("p", {
 					className: "my-auto not-prose",
 					children: defaultValue
 				})] }),
-				parameters.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+				parameters.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
 					className: cn(fieldVariants()),
-					children: "Parameters"
+					children: t.typeTableParameters
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex flex-col gap-2",
 					children: parameters.map((param) => /* @__PURE__ */ jsxs("div", {
@@ -99,9 +102,9 @@ function Item({ parentId, name, item: { parameters = [], description, required =
 						})]
 					}, param.name))
 				})] }),
-				returns && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+				returns && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
 					className: cn(fieldVariants()),
-					children: "Returns"
+					children: t.typeTableReturns
 				}), /* @__PURE__ */ jsx("div", {
 					className: "my-auto text-sm prose prose-no-margin",
 					children: returns

package/dist/components/ui/accordion.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 
 //#region src/components/ui/accordion.d.ts

package/dist/components/ui/collapsible.d.ts

@@ -1,6 +1,6 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
 import { ComponentProps } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 import * as _$_base_ui_react0 from "@base-ui/react";
 

package/dist/components/ui/navigation-menu.d.ts

@@ -1,5 +1,5 @@
-import * as React$1 from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 import * as _$_base_ui_react0 from "@base-ui/react";
 

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

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../utils/cn.js";
-import "react";
 import { jsx } from "react/jsx-runtime";
+import "react";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 //#region src/components/ui/navigation-menu.tsx
 const NavigationMenu = NavigationMenu$1.Root;