@hanzo/docs-base-ui 16.5.0 → 16.7.5

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

@@ -1,32 +1,33 @@
-import { SidebarTab } from "../../components/sidebar/tabs/index.js";
-import * as react_jsx_runtime93 from "react/jsx-runtime";
-import * as react19 from "react";
-import { ComponentProps, ReactNode } from "react";
-
+import { BaseSlots, BaseSlotsProps } from "../shared/client.js";
+import { LayoutTab, LinkItemType } from "../shared/index.js";
+import { SidebarProps, SidebarProviderProps } from "./slots/sidebar.js";
+import { DocsLayoutProps } from "./index.js";
+import { ComponentProps, FC } from "react";
 //#region src/layouts/docs/client.d.ts
-declare const LayoutContext: react19.Context<{
+interface DocsSlots extends BaseSlots {
+  container: FC<ComponentProps<'div'>>;
+  header: FC<ComponentProps<'header'>>;
+  sidebar: {
+    provider: FC<SidebarProviderProps>;
+    root: FC<SidebarProps>;
+    trigger: FC<ComponentProps<'button'>>;
+    useSidebar: () => {
+      collapsed: boolean;
+      open: boolean;
+      setOpen: (v: boolean) => void;
+    };
+  };
+}
+interface SlotsProps extends BaseSlotsProps<DocsLayoutProps> {
+  tabs: LayoutTab[];
+  tabMode: NonNullable<DocsLayoutProps['tabMode']>;
+}
+declare function useDocsLayout(): {
+  props: SlotsProps;
   isNavTransparent: boolean;
-} | null>;
-declare function LayoutContextProvider({
-  navTransparentMode,
-  children
-}: {
-  navTransparentMode?: 'always' | 'top' | 'none';
-  children: ReactNode;
-}): react_jsx_runtime93.JSX.Element;
-declare function LayoutHeader(props: ComponentProps<'header'>): react_jsx_runtime93.JSX.Element;
-declare function LayoutBody({
-  className,
-  style,
-  children,
-  ...props
-}: ComponentProps<'div'>): react_jsx_runtime93.JSX.Element;
-declare function LayoutTabs({
-  options,
-  ...props
-}: ComponentProps<'div'> & {
-  options: SidebarTab[];
-}): react_jsx_runtime93.JSX.Element;
+  navItems: LinkItemType[];
+  menuItems: LinkItemType[];
+  slots: DocsSlots;
+};
 //#endregion
-export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutTabs };
-//# sourceMappingURL=client.d.ts.map
+export { DocsSlots, useDocsLayout };

package/dist/layouts/docs/client.js

@@ -1,68 +1,92 @@
-'use client';
-
-import { useSidebar } from "../../components/sidebar/base.js";
-import { isTabActive } from "../../components/sidebar/tabs/dropdown.js";
-import Link from "@hanzo/docs-core/link";
-import { usePathname } from "@hanzo/docs-core/framework";
-import { cn } from "@hanzo/docs-ui/cn";
-import { jsx } from "react/jsx-runtime";
+"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 { createContext, use, useMemo } from "react";
-import { useIsScrollTop } from "@hanzo/docs-ui/hooks/use-is-scroll-top";
-
+import { usePathname } from "@hanzo/docs-core/framework";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "@hanzo/docs-core/link";
 //#region src/layouts/docs/client.tsx
+const { useProvider } = baseSlots({ useProps() {
+	return useDocsLayout().props;
+} });
 const LayoutContext = createContext(null);
-function LayoutContextProvider({ navTransparentMode = "none", children }) {
-	const isTop = useIsScrollTop({ enabled: navTransparentMode === "top" }) ?? true;
-	const isNavTransparent = navTransparentMode === "top" ? isTop : navTransparentMode === "always";
-	return /* @__PURE__ */ jsx(LayoutContext, {
-		value: useMemo(() => ({ isNavTransparent }), [isNavTransparent]),
-		children
-	});
+function useIsDocsLayout() {
+	return use(LayoutContext) !== null;
 }
-function LayoutHeader(props) {
-	const { isNavTransparent } = use(LayoutContext);
-	return /* @__PURE__ */ jsx("header", {
-		"data-transparent": isNavTransparent,
-		...props,
-		children: props.children
-	});
+function useDocsLayout() {
+	const context = use(LayoutContext);
+	if (!context) throw new Error("Please use <DocsPage /> (`@hanzo/docs-ui/layouts/docs/page`) under <DocsLayout /> (`@hanzo/docs-ui/layouts/docs`).");
+	return context;
 }
-function LayoutBody({ className, style, children, ...props }) {
-	const { collapsed } = useSidebar();
-	return /* @__PURE__ */ jsx("div", {
-		id: "nd-docs-layout",
-		className: cn("grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]", className),
-		"data-sidebar-collapsed": collapsed,
-		style: {
-			gridTemplate: `"sidebar header toc"
-        "sidebar toc-popover toc"
-        "sidebar main toc" 1fr / minmax(var(--fd-sidebar-col), 1fr) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) minmax(min-content, 1fr)`,
-			"--fd-docs-row-1": "var(--fd-banner-height, 0px)",
-			"--fd-docs-row-2": "calc(var(--fd-docs-row-1) + var(--fd-header-height))",
-			"--fd-docs-row-3": "calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))",
-			"--fd-sidebar-col": collapsed ? "0px" : "var(--fd-sidebar-width)",
-			...style
-		},
-		...props,
-		children
+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({ options, ...props }) {
+function LayoutTabs({ tabs, ...props }) {
 	const pathname = usePathname();
 	const selected = useMemo(() => {
-		return options.findLast((option) => isTabActive(option, pathname));
-	}, [options, pathname]);
+		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: options.map((option, i) => /* @__PURE__ */ jsx(Link, {
-			href: option.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", option.unlisted && selected !== option && "hidden", selected === option && "border-fd-primary text-fd-primary"),
-			children: option.title
+		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, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutTabs };
-//# sourceMappingURL=client.js.map
+export { LayoutBody, useDocsLayout, useIsDocsLayout };

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

@@ -1,10 +1,8 @@
-import { SidebarPageTreeComponents } from "../../components/sidebar/page-tree.js";
-import { GetSidebarTabsOptions } from "../../components/sidebar/tabs/index.js";
-import { SidebarTabWithProps } from "../../components/sidebar/tabs/dropdown.js";
-import { Sidebar } from "./sidebar.js";
-import { BaseLayoutProps } from "../shared/index.js";
-import * as react_jsx_runtime141 from "react/jsx-runtime";
-import { ComponentProps, HTMLAttributes, ReactNode } from "react";
+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 react_jsx_runtime0 from "react/jsx-runtime";
 import * as PageTree from "@hanzo/docs-core/page-tree";
 
 //#region src/layouts/docs/index.d.ts
@@ -12,48 +10,36 @@ interface DocsLayoutProps extends BaseLayoutProps {
   tree: PageTree.Root;
   sidebar?: SidebarOptions;
   tabMode?: 'top' | 'auto';
-  /**
-   * Props for the `div` container
-   */
+  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
   containerProps?: HTMLAttributes<HTMLDivElement>;
+  slots?: Partial<DocsSlots>;
 }
-interface SidebarOptions extends ComponentProps<'aside'>, Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {
+interface SidebarOptions extends SidebarProps, SidebarProviderProps {
   enabled?: boolean;
+  /**
+   * @deprecated use `slots.sidebar` instead.
+   */
   component?: ReactNode;
-  components?: Partial<SidebarPageTreeComponents>;
   /**
-   * Root Toggle options
+   * @deprecated use layout-level `tabMode` option instead.
    */
-  tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;
-  banner?: ReactNode;
-  footer?: ReactNode;
+  tabMode?: 'auto' | 'top';
   /**
-   * Support collapsing the sidebar on desktop mode
-   *
-   * @defaultValue true
+   * @deprecated use layout-level `tabs` option instead.
    */
-  collapsible?: boolean;
+  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
 }
 declare function DocsLayout({
-  nav: {
-    transparentMode,
-    ...nav
-  },
+  tree,
   sidebar: {
-    tabs: sidebarTabs,
-    enabled: sidebarEnabled,
-    defaultOpenLevel,
-    prefetch,
+    tabs: _tabs,
+    tabMode: _tabMode,
     ...sidebarProps
   },
-  searchToggle,
-  themeSwitch,
+  tabs: layoutTabs,
   tabMode,
-  i18n,
   children,
-  tree,
   ...props
-}: DocsLayoutProps): react_jsx_runtime141.JSX.Element;
+}: DocsLayoutProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { DocsLayout, DocsLayoutProps };
-//# sourceMappingURL=index.d.ts.map
+export { DocsLayout, DocsLayoutProps, type DocsSlots, useDocsLayout };

package/dist/layouts/docs/index.js

@@ -1,178 +1,22 @@
-import { buttonVariants } from "../../components/ui/button.js";
-import { tree_exports } from "../../contexts/tree.js";
-import { SidebarTabsDropdown } from "../../components/sidebar/tabs/dropdown.js";
-import { LayoutBody, LayoutContextProvider, LayoutHeader, LayoutTabs } from "./client.js";
-import { renderTitleNav, resolveLinkItems } from "../shared/index.js";
-import { LargeSearchToggle, SearchToggle } from "../shared/search-toggle.js";
-import { ThemeToggle } from "../shared/theme-toggle.js";
-import { LanguageToggle, LanguageToggleText } from "../shared/language-toggle.js";
-import { getSidebarTabs } from "../../components/sidebar/tabs/index.js";
-import { Sidebar as Sidebar$1, SidebarCollapseTrigger, SidebarContent, SidebarDrawer, SidebarLinkItem, SidebarPageTree, SidebarTrigger, SidebarViewport } from "./sidebar.js";
-import { cn } from "@hanzo/docs-ui/cn";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Languages, Sidebar } from "lucide-react";
+import { getLayoutTabs } from "../shared/index.js";
+import { LayoutBody, useDocsLayout } from "./client.js";
 import { useMemo } from "react";
-import { LinkItem } from "@hanzo/docs-ui/link-item";
-
+import { jsx } from "react/jsx-runtime";
 //#region src/layouts/docs/index.tsx
-function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled = true, defaultOpenLevel, prefetch, ...sidebarProps } = {}, searchToggle = {}, themeSwitch = {}, tabMode = "auto", i18n = false, children, tree, ...props }) {
-	const tabs = useMemo(() => {
-		if (Array.isArray(sidebarTabs)) return sidebarTabs;
-		if (typeof sidebarTabs === "object") return getSidebarTabs(tree, sidebarTabs);
-		if (sidebarTabs !== false) return getSidebarTabs(tree);
-		return [];
-	}, [tree, sidebarTabs]);
-	const links = resolveLinkItems(props);
-	function sidebar() {
-		const { footer, banner, collapsible = true, component, components, ...rest } = sidebarProps;
-		if (component) return component;
-		const iconLinks = links.filter((item) => item.type === "icon");
-		const viewport = /* @__PURE__ */ jsxs(SidebarViewport, { children: [links.filter((v) => v.type !== "icon").map((item, i, list) => /* @__PURE__ */ jsx(SidebarLinkItem, {
-			item,
-			className: cn(i === list.length - 1 && "mb-4")
-		}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })] });
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
-			...rest,
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-3 p-4 pb-2",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex",
-							children: [
-								renderTitleNav(nav, { className: "inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto" }),
-								nav.children,
-								collapsible && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
-									className: cn(buttonVariants({
-										color: "ghost",
-										size: "icon-sm",
-										className: "mb-auto text-fd-muted-foreground"
-									})),
-									children: /* @__PURE__ */ jsx(Sidebar, {})
-								})
-							]
-						}),
-						searchToggle.enabled !== false && (searchToggle.components?.lg ?? /* @__PURE__ */ jsx(LargeSearchToggle, { hideIfDisabled: true })),
-						tabs.length > 0 && tabMode === "auto" && /* @__PURE__ */ jsx(SidebarTabsDropdown, { options: tabs }),
-						banner
-					]
-				}),
-				viewport,
-				(i18n || iconLinks.length > 0 || themeSwitch?.enabled !== false || footer) && /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col border-t p-4 pt-2 empty:hidden",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex text-fd-muted-foreground items-center empty:hidden",
-						children: [
-							i18n && /* @__PURE__ */ jsx(LanguageToggle, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5" }) }),
-							iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
-								item,
-								className: cn(buttonVariants({
-									size: "icon-sm",
-									color: "ghost"
-								})),
-								"aria-label": item.label,
-								children: item.icon
-							}, i)),
-							themeSwitch.enabled !== false && (themeSwitch.component ?? /* @__PURE__ */ jsx(ThemeToggle, {
-								className: "ms-auto p-0",
-								mode: themeSwitch.mode
-							}))
-						]
-					}), footer]
-				})
-			]
-		}), /* @__PURE__ */ jsxs(SidebarDrawer, { children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-3 p-4 pb-2",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex text-fd-muted-foreground items-center gap-1.5",
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								className: "flex flex-1",
-								children: iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
-									item,
-									className: cn(buttonVariants({
-										size: "icon-sm",
-										color: "ghost",
-										className: "p-2"
-									})),
-									"aria-label": item.label,
-									children: item.icon
-								}, i))
-							}),
-							i18n && /* @__PURE__ */ jsxs(LanguageToggle, { children: [/* @__PURE__ */ jsx(Languages, { className: "size-4.5" }), /* @__PURE__ */ jsx(LanguageToggleText, {})] }),
-							themeSwitch.enabled !== false && (themeSwitch.component ?? /* @__PURE__ */ jsx(ThemeToggle, {
-								className: "p-0",
-								mode: themeSwitch.mode
-							})),
-							/* @__PURE__ */ jsx(SidebarTrigger, {
-								className: cn(buttonVariants({
-									color: "ghost",
-									size: "icon-sm",
-									className: "p-2"
-								})),
-								children: /* @__PURE__ */ jsx(Sidebar, {})
-							})
-						]
-					}),
-					tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, { options: tabs }),
-					banner
-				]
-			}),
-			viewport,
-			/* @__PURE__ */ jsx("div", {
-				className: "flex flex-col border-t p-4 pt-2 empty:hidden",
-				children: footer
-			})
-		] })] });
-	}
-	return /* @__PURE__ */ jsx(tree_exports.TreeContextProvider, {
+function DocsLayout({ tree, sidebar: { tabs: _tabs, tabMode: _tabMode, ...sidebarProps } = {}, tabs: layoutTabs = _tabs, tabMode = _tabMode, children, ...props }) {
+	return /* @__PURE__ */ jsx(LayoutBody, {
 		tree,
-		children: /* @__PURE__ */ jsx(LayoutContextProvider, {
-			navTransparentMode: transparentMode,
-			children: /* @__PURE__ */ jsx(Sidebar$1, {
-				defaultOpenLevel,
-				prefetch,
-				children: /* @__PURE__ */ jsxs(LayoutBody, {
-					...props.containerProps,
-					children: [
-						nav.enabled !== false && (nav.component ?? /* @__PURE__ */ jsxs(LayoutHeader, {
-							id: "nd-subnav",
-							className: "[grid-area:header] sticky top-(--fd-docs-row-1) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm h-(--fd-header-height) md:hidden max-md:layout:[--fd-header-height:--spacing(14)] data-[transparent=false]:bg-fd-background/80",
-							children: [
-								renderTitleNav(nav, { className: "inline-flex items-center gap-2.5 font-semibold" }),
-								/* @__PURE__ */ jsx("div", {
-									className: "flex-1",
-									children: nav.children
-								}),
-								searchToggle.enabled !== false && (searchToggle.components?.sm ?? /* @__PURE__ */ jsx(SearchToggle, {
-									className: "p-2",
-									hideIfDisabled: true
-								})),
-								sidebarEnabled && /* @__PURE__ */ jsx(SidebarTrigger, {
-									className: cn(buttonVariants({
-										color: "ghost",
-										size: "icon-sm",
-										className: "p-2"
-									})),
-									children: /* @__PURE__ */ jsx(Sidebar, {})
-								})
-							]
-						})),
-						sidebarEnabled && sidebar(),
-						tabMode === "top" && tabs.length > 0 && /* @__PURE__ */ jsx(LayoutTabs, {
-							options: tabs,
-							className: "z-10 bg-fd-background border-b px-6 pt-3 xl:px-8 max-md:hidden"
-						}),
-						children
-					]
-				})
-			})
-		})
+		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 };
-//# sourceMappingURL=index.js.map
+export { DocsLayout, useDocsLayout };

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

@@ -1,76 +1,94 @@
-import { BreadcrumbProps, FooterProps, PageBreadcrumb, PageLastUpdate } from "./client.js";
-import * as react_jsx_runtime44 from "react/jsx-runtime";
-import { ComponentProps, ReactNode } from "react";
-import { AnchorProviderProps, TOCItemType } from "@hanzo/docs-core/toc";
+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 * as react_jsx_runtime0 from "react/jsx-runtime";
+import { TOCItemType } from "@hanzo/docs-core/toc";
 
 //#region src/layouts/docs/page/index.d.ts
-interface BreadcrumbOptions extends BreadcrumbProps {
-  enabled: boolean;
-  component: ReactNode;
-}
-interface FooterOptions extends FooterProps {
-  enabled: boolean;
-  component: ReactNode;
-}
-interface DocsPageProps {
+interface DocsPageProps extends ComponentProps<'article'> {
   toc?: TOCItemType[];
-  tableOfContent?: Partial<TableOfContentOptions>;
-  tableOfContentPopover?: Partial<TableOfContentPopoverOptions>;
   /**
    * Extend the page to fill all available space
    *
    * @defaultValue false
    */
   full?: boolean;
+  slots?: Partial<DocsPageSlots>;
+  footer?: FooterOptions;
+  breadcrumb?: BreadcrumbOptions;
+  tableOfContent?: TableOfContentOptions;
+  tableOfContentPopover?: TableOfContentPopoverOptions;
+}
+interface BreadcrumbOptions extends BreadcrumbProps {
+  enabled?: boolean;
   /**
-   * Replace or disable breadcrumb
-   */
-  breadcrumb?: Partial<BreadcrumbOptions>;
-  /**
-   * Footer navigation, you can disable it by passing `false`
+   * @deprecated use `slots.breadcrumb` instead.
    */
-  footer?: Partial<FooterOptions>;
-  children?: ReactNode;
+  component?: ReactNode;
 }
-type TableOfContentOptions = Pick<AnchorProviderProps, 'single'> & {
+interface FooterOptions extends FooterProps {
+  enabled?: boolean;
   /**
-   * Custom content in TOC container, before the main TOC
+   * @deprecated use `slots.footer` instead.
    */
-  header?: ReactNode;
+  component?: ReactNode;
+}
+interface TableOfContentOptions extends Pick<TOCProviderProps, 'single'>, TOCProps {
+  enabled?: boolean;
   /**
-   * Custom content in TOC container, after the main TOC
+   * @deprecated use `slots.toc` instead.
    */
-  footer?: ReactNode;
-  enabled: boolean;
-  component: ReactNode;
+  component?: ReactNode;
+}
+interface TableOfContentPopoverOptions extends TOCPopoverProps {
+  enabled?: boolean;
   /**
-   * @defaultValue 'normal'
+   * @deprecated use `slots.tocPopover` instead.
    */
-  style?: 'normal' | 'clerk';
+  component?: ReactNode;
+}
+interface DocsPageSlots {
+  toc: {
+    provider: FC<TOCProviderProps>;
+    main: FC<TOCProps>;
+    popover: FC<TOCPopoverProps>;
+  };
+  container: FC<ComponentProps<'article'>>;
+  footer: FC<FooterProps>;
+  breadcrumb: FC<BreadcrumbProps>;
+}
+type PageSlotsProps = Pick<DocsPageProps, 'full'>;
+declare function useDocsPage(): {
+  props: PageSlotsProps;
+  slots: DocsPageSlots;
 };
-type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
 declare function DocsPage({
-  breadcrumb: {
-    enabled: breadcrumbEnabled,
-    component: breadcrumb,
-    ...breadcrumbProps
+  tableOfContent: {
+    enabled: tocEnabled,
+    single,
+    ...tocProps
   },
-  footer,
-  full,
   tableOfContentPopover: {
     enabled: tocPopoverEnabled,
-    component: tocPopover,
-    ...tocPopoverOptions
+    ...tocPopoverProps
   },
-  tableOfContent: {
-    enabled: tocEnabled,
-    component: tocReplace,
-    ...tocOptions
+  breadcrumb: {
+    enabled: breadcrumbEnabled,
+    ...breadcrumb
+  },
+  footer: {
+    enabled: footerEnabled,
+    ...footer
   },
+  full,
   toc,
-  children
-}: DocsPageProps): ReactNode;
-declare function EditOnGitHub(props: ComponentProps<'a'>): react_jsx_runtime44.JSX.Element;
+  slots: defaultSlots,
+  children,
+  ...containerProps
+}: DocsPageProps): react_jsx_runtime0.JSX.Element;
+declare function EditOnGitHub(props: ComponentProps<'a'>): react_jsx_runtime0.JSX.Element;
 /**
  * Add typography styles
  */
@@ -78,17 +96,22 @@ declare function DocsBody({
   children,
   className,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime44.JSX.Element;
+}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 declare function DocsDescription({
   children,
   className,
   ...props
-}: ComponentProps<'p'>): react_jsx_runtime44.JSX.Element | null;
+}: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element | null;
 declare function DocsTitle({
   children,
   className,
   ...props
-}: ComponentProps<'h1'>): react_jsx_runtime44.JSX.Element;
+}: ComponentProps<'h1'>): react_jsx_runtime0.JSX.Element;
+declare function PageLastUpdate({
+  date: value,
+  ...props
+}: Omit<ComponentProps<'p'>, 'children'> & {
+  date: Date;
+}): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, PageBreadcrumb, PageLastUpdate };
-//# sourceMappingURL=index.d.ts.map
+export { type BreadcrumbProps, DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, type FooterProps, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, useDocsPage };