opin-ui 0.0.1

package/dist/layouts/docs/client.js

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { TreeContextProvider } from "../../contexts/tree.js";
+import { baseSlots } from "../shared/client.js";
+import { isLayoutTabActive, useLinkItems } from "../shared/index.js";
+import { useIsScrollTop } from "../../utils/use-is-scroll-top.js";
+import { Sidebar, SidebarProvider, SidebarTrigger, useSidebar } from "./slots/sidebar.js";
+import { Header } from "./slots/header.js";
+import { Container } from "./slots/container.js";
+import Link from "fumadocs-core/link";
+import { usePathname } from "fumadocs-core/framework";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useMemo } from "react";
+//#region src/layouts/docs/client.tsx
+const { useProvider } = baseSlots({ useProps() {
+	return useDocsLayout().props;
+} });
+const LayoutContext = createContext(null);
+function useIsDocsLayout() {
+	return use(LayoutContext) !== null;
+}
+function useDocsLayout() {
+	const context = use(LayoutContext);
+	if (!context) throw new Error("Please use <DocsPage /> (`opin-ui/layouts/docs/page`) under <DocsLayout /> (`opin-ui/layouts/docs`).");
+	return context;
+}
+function LayoutBody(props) {
+	const { nav: { enabled: navEnabled = true, transparentMode: navTransparentMode = "none" } = {}, sidebar: { enabled: sidebarEnabled = true, defaultOpenLevel, prefetch, ...sidebarProps } = {}, slots: defaultSlots, tabs, tabMode = "auto", tree, containerProps, children } = props;
+	const isTop = useIsScrollTop({ enabled: navTransparentMode === "top" }) ?? true;
+	const isNavTransparent = navTransparentMode === "top" ? isTop : navTransparentMode === "always";
+	const { baseSlots, baseProps } = useProvider(props);
+	const linkItems = useLinkItems(props);
+	const slots = {
+		...baseSlots,
+		header: defaultSlots?.header ?? Header,
+		container: defaultSlots?.container ?? Container,
+		sidebar: defaultSlots?.sidebar ?? {
+			provider: SidebarProvider,
+			root: Sidebar,
+			trigger: SidebarTrigger,
+			useSidebar
+		}
+	};
+	return /* @__PURE__ */ jsx(TreeContextProvider, {
+		tree,
+		children: /* @__PURE__ */ jsx(LayoutContext, {
+			value: {
+				props: {
+					tabMode,
+					tabs,
+					...baseProps
+				},
+				isNavTransparent,
+				slots,
+				...linkItems
+			},
+			children: /* @__PURE__ */ jsx(slots.sidebar.provider, {
+				defaultOpenLevel,
+				prefetch,
+				children: /* @__PURE__ */ jsxs(slots.container, {
+					...containerProps,
+					children: [
+						navEnabled && /* @__PURE__ */ jsx(slots.header, {}),
+						sidebarEnabled && /* @__PURE__ */ jsx(slots.sidebar.root, { ...sidebarProps }),
+						tabMode === "top" && tabs.length > 0 && /* @__PURE__ */ jsx(LayoutTabs, {
+							tabs,
+							className: "z-10 bg-fd-background border-b px-6 pt-3 xl:px-8 max-md:hidden"
+						}),
+						children
+					]
+				})
+			})
+		})
+	});
+}
+function LayoutTabs({ tabs, ...props }) {
+	const pathname = usePathname();
+	const selected = useMemo(() => {
+		return tabs.findLast((option) => isLayoutTabActive(option, pathname));
+	}, [tabs, pathname]);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex flex-row items-end gap-6 overflow-auto [grid-area:main]", props.className),
+		children: tabs.map((tab, i) => /* @__PURE__ */ jsx(Link, {
+			href: tab.url,
+			className: cn("inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground", tab.unlisted && selected !== tab && "hidden", selected === tab && "border-fd-primary text-fd-primary"),
+			children: tab.title
+		}, i))
+	});
+}
+//#endregion
+export { LayoutBody, useDocsLayout, useIsDocsLayout };

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

@@ -0,0 +1,44 @@
+import { BaseLayoutProps, GetLayoutTabsOptions, LayoutTab } from "../shared/index.js";
+import { SidebarProps, SidebarProviderProps } from "./slots/sidebar.js";
+import { DocsSlots, useDocsLayout } from "./client.js";
+import { HTMLAttributes, ReactNode } from "react";
+import * as PageTree from "fumadocs-core/page-tree";
+
+//#region src/layouts/docs/index.d.ts
+interface DocsLayoutProps extends BaseLayoutProps {
+  tree: PageTree.Root;
+  sidebar?: SidebarOptions;
+  tabMode?: 'top' | 'auto';
+  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
+  containerProps?: HTMLAttributes<HTMLDivElement>;
+  slots?: Partial<DocsSlots>;
+}
+interface SidebarOptions extends SidebarProps, SidebarProviderProps {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.sidebar` instead.
+   */
+  component?: ReactNode;
+  /**
+   * @deprecated use layout-level `tabMode` option instead.
+   */
+  tabMode?: 'auto' | 'top';
+  /**
+   * @deprecated use layout-level `tabs` option instead.
+   */
+  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
+}
+declare function DocsLayout({
+  tree,
+  sidebar: {
+    tabs: _tabs,
+    tabMode: _tabMode,
+    ...sidebarProps
+  },
+  tabs: layoutTabs,
+  tabMode,
+  children,
+  ...props
+}: DocsLayoutProps): import("react").JSX.Element;
+//#endregion
+export { DocsLayout, DocsLayoutProps, type DocsSlots, useDocsLayout };

package/dist/layouts/docs/index.js

@@ -0,0 +1,22 @@
+import { getLayoutTabs } from "../shared/index.js";
+import { LayoutBody, useDocsLayout } from "./client.js";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+//#region src/layouts/docs/index.tsx
+function DocsLayout({ tree, sidebar: { tabs: _tabs, tabMode: _tabMode, ...sidebarProps } = {}, tabs: layoutTabs = _tabs, tabMode = _tabMode, children, ...props }) {
+	return /* @__PURE__ */ jsx(LayoutBody, {
+		tree,
+		tabs: useMemo(() => {
+			if (Array.isArray(layoutTabs)) return layoutTabs;
+			if (typeof layoutTabs === "object") return getLayoutTabs(tree, layoutTabs);
+			if (layoutTabs !== false) return getLayoutTabs(tree);
+			return [];
+		}, [tree, layoutTabs]),
+		tabMode,
+		sidebar: sidebarProps,
+		...props,
+		children
+	});
+}
+//#endregion
+export { DocsLayout, useDocsLayout };

package/dist/layouts/docs/page/index.d.ts

@@ -0,0 +1,115 @@
+import { TOCPopoverProps, TOCProps, TOCProviderProps } from "./slots/toc.js";
+import { Footer, FooterProps } from "./slots/footer.js";
+import { Breadcrumb, BreadcrumbProps } from "./slots/breadcrumb.js";
+import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
+import { ComponentProps, FC, ReactNode } from "react";
+import { TOCItemType } from "fumadocs-core/toc";
+
+//#region src/layouts/docs/page/index.d.ts
+interface DocsPageProps extends ComponentProps<'article'> {
+  toc?: TOCItemType[];
+  /**
+   * Extend the page to fill all available space
+   *
+   * @defaultValue false
+   */
+  full?: boolean | undefined;
+  slots?: Partial<DocsPageSlots>;
+  footer?: FooterOptions;
+  breadcrumb?: BreadcrumbOptions;
+  tableOfContent?: TableOfContentOptions;
+  tableOfContentPopover?: TableOfContentPopoverOptions;
+}
+interface BreadcrumbOptions extends BreadcrumbProps {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.breadcrumb` instead.
+   */
+  component?: ReactNode;
+}
+interface FooterOptions extends FooterProps {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.footer` instead.
+   */
+  component?: ReactNode;
+}
+type TableOfContentOptions = Pick<TOCProviderProps, 'single'> & TOCProps & {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.toc` instead.
+   */
+  component?: ReactNode;
+};
+type TableOfContentPopoverOptions = TOCPopoverProps & {
+  enabled?: boolean;
+  /**
+   * @deprecated use `slots.tocPopover` instead.
+   */
+  component?: ReactNode;
+};
+interface DocsPageSlots {
+  toc: {
+    provider: FC<TOCProviderProps>;
+    main: FC<TOCProps>;
+    popover: FC<TOCPopoverProps>;
+  };
+  container: FC<ComponentProps<'article'>>;
+  footer: FC<FooterProps>;
+  breadcrumb: FC<BreadcrumbProps>;
+}
+declare function useDocsPage(): {
+  full: NonNullable<DocsPageProps["full"]>;
+  slots: DocsPageSlots;
+};
+declare function DocsPage({
+  full,
+  tableOfContent: {
+    enabled: tocEnabled,
+    single,
+    ...tocProps
+  },
+  tableOfContentPopover: {
+    enabled: tocPopoverEnabled,
+    ...tocPopoverProps
+  },
+  breadcrumb: {
+    enabled: breadcrumbEnabled,
+    ...breadcrumb
+  },
+  footer: {
+    enabled: footerEnabled,
+    ...footer
+  },
+  toc,
+  slots: defaultSlots,
+  children,
+  ...containerProps
+}: DocsPageProps): import("react").JSX.Element;
+declare function EditOnGitHub(props: ComponentProps<'a'>): import("react").JSX.Element;
+/**
+ * Add typography styles
+ */
+declare function DocsBody({
+  children,
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DocsDescription({
+  children,
+  className,
+  ...props
+}: ComponentProps<'p'>): import("react").JSX.Element | null;
+declare function DocsTitle({
+  children,
+  className,
+  ...props
+}: ComponentProps<'h1'>): import("react").JSX.Element;
+declare function PageLastUpdate({
+  date: value,
+  ...props
+}: Omit<ComponentProps<'p'>, 'children'> & {
+  date: Date;
+}): import("react").JSX.Element;
+//#endregion
+export { type BreadcrumbProps, DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, type FooterProps, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, useDocsPage };

package/dist/layouts/docs/page/index.js

@@ -0,0 +1,124 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { TOC, TOCPopover, TOCProvider } from "./slots/toc.js";
+import { Footer } from "./slots/footer.js";
+import { Breadcrumb } from "./slots/breadcrumb.js";
+import { Container } from "./slots/container.js";
+import { MarkdownCopyButton, ViewOptionsPopover } from "../../shared/page-actions.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Edit } from "lucide-react";
+import { createContext, use, useEffect, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/layouts/docs/page/index.tsx
+var page_exports = /* @__PURE__ */ __exportAll({
+	DocsBody: () => DocsBody,
+	DocsDescription: () => DocsDescription,
+	DocsPage: () => DocsPage,
+	DocsTitle: () => DocsTitle,
+	EditOnGitHub: () => EditOnGitHub,
+	MarkdownCopyButton: () => MarkdownCopyButton,
+	PageBreadcrumb: () => Breadcrumb,
+	PageFooter: () => Footer,
+	PageLastUpdate: () => PageLastUpdate,
+	ViewOptionsPopover: () => ViewOptionsPopover,
+	useDocsPage: () => useDocsPage
+});
+const PageContext = createContext(null);
+function useDocsPage() {
+	const context = use(PageContext);
+	if (!context) throw new Error("Please use page components under <DocsPage /> (`opin-ui/layouts/docs/page`).");
+	return context;
+}
+function DocsPage({ full = false, tableOfContent: { enabled: tocEnabled = !full, single, ...tocProps } = {}, tableOfContentPopover: { enabled: tocPopoverEnabled, ...tocPopoverProps } = {}, breadcrumb: { enabled: breadcrumbEnabled = true, ...breadcrumb } = {}, footer: { enabled: footerEnabled = true, ...footer } = {}, toc = [], slots: defaultSlots = {}, children, ...containerProps }) {
+	tocPopoverEnabled ??= Boolean(toc.length > 0 || tocPopoverProps.header || tocPopoverProps.footer);
+	const slots = {
+		breadcrumb: defaultSlots.breadcrumb ?? Breadcrumb,
+		footer: defaultSlots.footer ?? Footer,
+		toc: defaultSlots.toc ?? {
+			provider: TOCProvider,
+			main: TOC,
+			popover: TOCPopover
+		},
+		container: defaultSlots.container ?? Container
+	};
+	return /* @__PURE__ */ jsx(PageContext, {
+		value: {
+			full,
+			slots
+		},
+		children: /* @__PURE__ */ jsxs(slots.toc.provider, {
+			single,
+			toc: tocEnabled || tocPopoverEnabled ? toc : [],
+			children: [
+				tocPopoverEnabled && (tocPopoverProps.component ?? /* @__PURE__ */ jsx(slots.toc.popover, { ...tocPopoverProps })),
+				/* @__PURE__ */ jsxs(slots.container, {
+					...containerProps,
+					children: [
+						breadcrumbEnabled && (breadcrumb.component ?? /* @__PURE__ */ jsx(slots.breadcrumb, { ...breadcrumb })),
+						children,
+						footerEnabled && (footer.component ?? /* @__PURE__ */ jsx(slots.footer, { ...footer }))
+					]
+				}),
+				tocEnabled && (tocProps.component ?? /* @__PURE__ */ jsx(slots.toc.main, { ...tocProps }))
+			]
+		})
+	});
+}
+function EditOnGitHub(props) {
+	const t = useTranslations({ note: "edit page" });
+	return /* @__PURE__ */ jsx("a", {
+		target: "_blank",
+		rel: "noreferrer noopener",
+		...props,
+		className: cn(buttonVariants({
+			color: "secondary",
+			size: "sm"
+		}), "gap-1.5 not-prose", props.className),
+		children: props.children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Edit, { className: "size-3.5" }), t("Edit on GitHub")] })
+	});
+}
+/**
+* Add typography styles
+*/
+function DocsBody({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("prose flex-1", className),
+		children
+	});
+}
+function DocsDescription({ children, className, ...props }) {
+	if (children === void 0) return null;
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: cn("mb-8 text-lg text-fd-muted-foreground", className),
+		children
+	});
+}
+function DocsTitle({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("h1", {
+		...props,
+		className: cn("text-[1.75em] font-semibold", className),
+		children
+	});
+}
+function PageLastUpdate({ date: value, ...props }) {
+	const t = useTranslations({ note: "page footer" });
+	const [date, setDate] = useState("");
+	useEffect(() => {
+		setDate(value.toLocaleDateString());
+	}, [value]);
+	return /* @__PURE__ */ jsxs("p", {
+		...props,
+		className: cn("text-sm text-fd-muted-foreground", props.className),
+		children: [
+			t("Last updated on"),
+			" ",
+			date
+		]
+	});
+}
+//#endregion
+export { DocsBody, DocsDescription, DocsPage, DocsTitle, EditOnGitHub, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, page_exports, useDocsPage };

package/dist/layouts/docs/page/slots/breadcrumb.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps } from "react";
+import { BreadcrumbOptions } from "fumadocs-core/breadcrumb";
+
+//#region src/layouts/docs/page/slots/breadcrumb.d.ts
+type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
+declare function Breadcrumb({
+  includeRoot,
+  includeSeparator,
+  includePage,
+  ...props
+}: BreadcrumbProps): import("react").JSX.Element | null;
+//#endregion
+export { Breadcrumb, BreadcrumbProps };

package/dist/layouts/docs/page/slots/breadcrumb.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { useTreeContext, useTreePath } from "../../../../contexts/tree.js";
+import Link from "fumadocs-core/link";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { Fragment as Fragment$1, useMemo } from "react";
+import { getBreadcrumbItemsFromPath } from "fumadocs-core/breadcrumb";
+//#region src/layouts/docs/page/slots/breadcrumb.tsx
+function Breadcrumb({ includeRoot, includeSeparator, includePage, ...props }) {
+	const path = useTreePath();
+	const { root } = useTreeContext();
+	const items = useMemo(() => {
+		return getBreadcrumbItemsFromPath(root, path, {
+			includePage,
+			includeSeparator,
+			includeRoot
+		});
+	}, [
+		includePage,
+		includeRoot,
+		includeSeparator,
+		path,
+		root
+	]);
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex items-center gap-1.5 text-sm text-fd-muted-foreground", props.className),
+		children: items.map((item, i) => {
+			const className = cn("truncate", i === items.length - 1 && "text-fd-primary font-medium");
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [i !== 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0" }), item.url ? /* @__PURE__ */ jsx(Link, {
+				href: item.url,
+				className: cn(className, "transition-opacity hover:opacity-80"),
+				children: item.name
+			}) : /* @__PURE__ */ jsx("span", {
+				className,
+				children: item.name
+			})] }, i);
+		})
+	});
+}
+//#endregion
+export { Breadcrumb };

package/dist/layouts/docs/page/slots/container.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+
+//#region src/layouts/docs/page/slots/container.d.ts
+declare function Container(props: ComponentProps<'article'>): import("react").JSX.Element;
+//#endregion
+export { Container };

package/dist/layouts/docs/page/slots/container.js

@@ -0,0 +1,17 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { useDocsPage } from "../index.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/layouts/docs/page/slots/container.tsx
+function Container(props) {
+	const { full } = useDocsPage();
+	return /* @__PURE__ */ jsx("article", {
+		id: "nd-page",
+		"data-full": full,
+		...props,
+		className: cn("flex flex-col w-full max-w-[900px] mx-auto [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14", full && "max-w-[1168px]", props.className),
+		children: props.children
+	});
+}
+//#endregion
+export { Container };

package/dist/layouts/docs/page/slots/footer.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from "react";
+import * as PageTree from "fumadocs-core/page-tree";
+
+//#region src/layouts/docs/page/slots/footer.d.ts
+type Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;
+interface FooterProps extends ComponentProps<'div'> {
+  /**
+   * Items including information for the next and previous page
+   */
+  items?: {
+    previous?: Item;
+    next?: Item;
+  };
+}
+declare function Footer({
+  items,
+  children,
+  className,
+  ...props
+}: FooterProps): import("react").JSX.Element;
+//#endregion
+export { Footer, FooterProps };

package/dist/layouts/docs/page/slots/footer.js

@@ -0,0 +1,56 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { isActive } from "../../../../utils/urls.js";
+import { useFooterItems } from "../../../../utils/use-footer-items.js";
+import Link from "fumadocs-core/link";
+import { usePathname } from "fumadocs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useMemo } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/layouts/docs/page/slots/footer.tsx
+function Footer({ items, children, className, ...props }) {
+	const footerList = useFooterItems();
+	const pathname = usePathname();
+	const { previous, next } = useMemo(() => {
+		if (items) return items;
+		const idx = footerList.findIndex((item) => isActive(item.url, pathname));
+		if (idx === -1) return {};
+		return {
+			previous: footerList[idx - 1],
+			next: footerList[idx + 1]
+		};
+	}, [
+		footerList,
+		items,
+		pathname
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: cn("@container grid gap-4", previous && next ? "grid-cols-2" : "grid-cols-1", className),
+		...props,
+		children: [previous && /* @__PURE__ */ jsx(FooterItem, {
+			item: previous,
+			index: 0
+		}), next && /* @__PURE__ */ jsx(FooterItem, {
+			item: next,
+			index: 1
+		})]
+	}), children] });
+}
+function FooterItem({ item, index }) {
+	const t = useTranslations({ note: "pagination" });
+	const Icon = index === 0 ? ChevronLeft : ChevronRight;
+	return /* @__PURE__ */ jsxs(Link, {
+		href: item.url,
+		className: cn("flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground @max-lg:col-span-full", index === 1 && "text-end"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("inline-flex items-center gap-1.5 font-medium", index === 1 && "flex-row-reverse"),
+			children: [/* @__PURE__ */ jsx(Icon, { className: "-mx-1 size-4 shrink-0 rtl:rotate-180" }), /* @__PURE__ */ jsx("p", { children: item.name })]
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-fd-muted-foreground truncate",
+			children: item.description ?? (index === 0 ? t("Previous Page") : t("Next Page"))
+		})]
+	});
+}
+//#endregion
+export { Footer };

package/dist/layouts/docs/page/slots/toc.d.ts

@@ -0,0 +1,62 @@
+import { TOCItemsProps } from "../../../../components/toc/clerk.js";
+import { TOCItemsProps as TOCItemsProps$1 } from "../../../../components/toc/default.js";
+import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/layouts/docs/page/slots/toc.d.ts
+type TOCProviderProps = TOCProviderProps$1;
+declare function TOCProvider(props: TOCProviderProps): import("react").JSX.Element;
+type TOCProps = {
+  container?: ComponentProps<'div'>;
+  /**
+   * Custom content in TOC container, before the main TOC
+   */
+  header?: ReactNode;
+  /**
+   * Custom content in TOC container, after the main TOC
+   */
+  footer?: ReactNode;
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
+declare function TOC({
+  container,
+  header,
+  footer,
+  style,
+  list
+}: TOCProps): import("react").JSX.Element;
+type TOCPopoverProps = {
+  container?: ComponentProps<'div'>;
+  trigger?: ComponentProps<'button'>;
+  content?: ComponentProps<'div'>;
+  /**
+   * Custom content in TOC container, before the main TOC
+   */
+  header?: ReactNode;
+  /**
+   * Custom content in TOC container, after the main TOC
+   */
+  footer?: ReactNode;
+} & ({
+  style?: 'normal';
+  list?: TOCItemsProps$1;
+} | {
+  style: 'clerk';
+  list?: TOCItemsProps;
+});
+declare function TOCPopover({
+  container,
+  trigger,
+  content,
+  header,
+  footer,
+  style,
+  list
+}: TOCPopoverProps): import("react").JSX.Element;
+//#endregion
+export { TOC, TOCPopover, TOCPopoverProps, TOCProps, TOCProvider, TOCProviderProps };