@fumadocs/base-ui 16.5.0 → 16.5.2

package/dist/layouts/flux/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/flux/index.tsx"],"mappings":";;;;;;;;;;;UAqBiB,eAAA,SAAwB,eAAA;EACvC,IAAA,EAAM,QAAA,CAAS,IAAA;EAEf,OAAA,GAAU,cAAA;EAHK;;;EAQf,cAAA,GAAiB,cAAA,CAAe,cAAA;EAEhC,qBAAA,IAAyB,KAAA,EAAO,oBAAA,KAAyB,SAAA;AAAA;AAAA,UAGjD,cAAA,SAEN,cAAA,WACA,IAAA,CAAK,cAAA,QAAsB,OAAA;EAC7B,OAAA;EACA,SAAA,GAAY,SAAA;EACZ,UAAA,GAAa,OAAA,CAAQ,yBAAA;EAnBiC;;;EAwBtD,IAAA,GAAO,mBAAA,KAAwB,qBAAA;EAE/B,MAAA,GAAS,SAAA;EACT,MAAA,GAAS,SAAA;AAAA;AAAA,iBAGK,UAAA,CAAA;EACd,IAAA;EACA,GAAA;EACA,OAAA;IACE,OAAA,EAAS,cAAA;IACT,IAAA,EAAM,WAAA;IACN,gBAAA;IACA,QAAA;IAAA,GACG;EAAA;EAEL,YAAA;EACA,WAAA;EACA,IAAA;EACA,QAAA;EACA,cAAA;EACA,qBAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAuID,oBAAA;EACf,IAAA,EAAM,SAAA;EACN,WAAA,EAAa,SAAA;EACb,IAAA,EAAM,SAAA;EACN,IAAA,EAAM,SAAA;AAAA;AAAA,iBAGQ,eAAA,CAAA;EACd,IAAA;EACA,WAAA;EACA,IAAA;EACA,IAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,GACD,IAAA,CAAK,cAAA,QAAsB,MAAA,CAAO,GAAA;EA5LgC;;AACnE;EA+LG,QAAA,IAAY,eAAA,EAAiB,SAAA,KAAc,SAAA;AAAA,IAC5C,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiCa,sBAAA,CAAA;EACd,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,MAAA,CAAO,GAAA;EAAS,OAAA;AAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/layouts/flux/index.js

@@ -0,0 +1,168 @@
+'use client';
+
+import { cn } from "../../utils/cn.js";
+import { buttonVariants } from "../../components/ui/button.js";
+import { TreeContextProvider } from "../../contexts/tree.js";
+import { SidebarViewport, useSidebar } from "../../components/sidebar/base.js";
+import { LinkItem } from "../../utils/link-item.js";
+import { SearchToggle } from "../shared/search-toggle.js";
+import { renderTitleNav, useLinkItems } from "../shared/index.js";
+import { LanguageToggle } from "../shared/language-toggle.js";
+import { ThemeToggle } from "../shared/theme-toggle.js";
+import { getSidebarTabs } from "../../components/sidebar/tabs/index.js";
+import { SidebarTabsDropdown } from "./tab-dropdown.js";
+import { Sidebar as Sidebar$1, SidebarContent, SidebarLinkItem, SidebarPageTree } from "./sidebar.js";
+import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Languages, SidebarIcon, XIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { RemoveScroll } from "react-remove-scroll";
+
+//#region src/layouts/flux/index.tsx
+function DocsLayout({ tree, nav = {}, sidebar: { enabled: sidebarEnabled = true, tabs: sidebarTabs, defaultOpenLevel, prefetch, ...sidebarProps } = {}, searchToggle = {}, themeSwitch = {}, i18n = false, children, containerProps, renderNavigationPanel = (props) => /* @__PURE__ */ jsx(NavigationPanel, { ...props }), ...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 { menuItems } = useLinkItems(props);
+	const iconLinks = menuItems.filter((item) => item.type === "icon");
+	function sidebar() {
+		const { footer, banner, component, components, ...rest } = sidebarProps;
+		if (component) return component;
+		return /* @__PURE__ */ jsxs(SidebarContent, {
+			...rest,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-3 p-4 pb-2 empty:hidden",
+					children: banner
+				}),
+				/* @__PURE__ */ jsxs(SidebarViewport, { children: [menuItems.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 })] }),
+				footer
+			]
+		});
+	}
+	return /* @__PURE__ */ jsx(TreeContextProvider, {
+		tree,
+		children: /* @__PURE__ */ jsxs(Sidebar$1, {
+			defaultOpenLevel,
+			prefetch,
+			children: [/* @__PURE__ */ jsxs("div", {
+				id: "nd-flux-layout",
+				...containerProps,
+				className: cn("flex flex-col items-center pb-24 overflow-x-clip", containerProps?.className),
+				children: [sidebarEnabled && sidebar(), children]
+			}), renderNavigationPanel({
+				head: renderTitleNav(nav, { className: "inline-flex items-center gap-2.5 text-sm font-semibold" }),
+				tabDropdown: tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, {
+					className: "flex-1",
+					options: tabs
+				}),
+				tool: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					i18n && /* @__PURE__ */ jsx(LanguageToggle, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5" }) }),
+					searchToggle.enabled !== false && (searchToggle.components?.sm ?? /* @__PURE__ */ jsx(SearchToggle, {
+						className: "rounded-lg",
+						hideIfDisabled: true
+					})),
+					/* @__PURE__ */ jsx(NavigationSidebarTrigger, {}),
+					themeSwitch.enabled !== false && (themeSwitch.component ?? /* @__PURE__ */ jsx(ThemeToggle, {
+						className: "px-1 py-0 h-full ms-1 rounded-xl bg-fd-muted *:rounded-lg",
+						mode: themeSwitch.mode
+					}))
+				] }),
+				link: iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
+					item,
+					className: cn(buttonVariants({
+						size: "icon-sm",
+						color: "ghost"
+					})),
+					"aria-label": item.label,
+					children: item.icon
+				}, i))
+			})]
+		})
+	});
+}
+function NavigationSidebarTrigger() {
+	const { open, setOpen } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		className: cn(buttonVariants({
+			variant: "ghost",
+			size: "icon-sm",
+			className: "overflow-hidden"
+		})),
+		onClick: () => setOpen((prev) => !prev),
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "wait",
+			children: /* @__PURE__ */ jsx(motion.span, {
+				transition: { duration: .2 },
+				initial: {
+					y: "100%",
+					opacity: 0
+				},
+				animate: {
+					y: 0,
+					opacity: 1
+				},
+				exit: {
+					y: "100%",
+					opacity: 0
+				},
+				children: open ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(SidebarIcon, {})
+			}, open ? "open" : "closed")
+		})
+	});
+}
+function NavigationPanel({ head, tabDropdown, tool, link, className, children = (v) => v, ...props }) {
+	return /* @__PURE__ */ jsx(motion.div, {
+		className: cn("fixed left-1/2 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))] translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)] bottom-0 z-40 bg-fd-popover text-fd-popover-foreground border-t shadow-lg sm:bottom-6 sm:rounded-2xl sm:border sm:max-w-[380px]", className),
+		...props,
+		children: children(/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-row items-center ps-2.5 p-1 gap-2 min-h-11",
+			children: [head, /* @__PURE__ */ jsx("div", {
+				id: "flux-layout-slot",
+				className: "flex-1"
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-row gap-1.5 overflow-x-auto overflow-y-hidden p-2 sm:p-1",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-row items-center gap-2 min-w-0 flex-1",
+					children: tabDropdown
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-row items-center text-fd-muted-foreground border-x px-0.5 empty:hidden",
+					children: link
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-row items-center text-fd-muted-foreground empty:hidden",
+					children: tool
+				})
+			]
+		})] }))
+	});
+}
+function NavigationPanelOverlay({ enabled = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(RemoveScroll, {
+		enabled,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			className: cn("fixed inset-0 z-30 pr-(--removed-body-scroll-bar-size,0) backdrop-blur-md bg-fd-background/60", !enabled && "pointer-events-none", className),
+			initial: "hide",
+			variants: {
+				show: { opacity: 1 },
+				hide: { opacity: 0 }
+			},
+			animate: enabled ? "show" : "hide",
+			exit: "hide",
+			...props
+		})
+	});
+}
+
+//#endregion
+export { DocsLayout, NavigationPanel, NavigationPanelOverlay };
+//# sourceMappingURL=index.js.map

package/dist/layouts/flux/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Sidebar"],"sources":["../../../src/layouts/flux/index.tsx"],"sourcesContent":["'use client';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport type { BaseLayoutProps } from '@/layouts/shared';\nimport { TreeContextProvider } from '@/contexts/tree';\nimport { getSidebarTabs, type GetSidebarTabsOptions } from '@/components/sidebar/tabs';\nimport type { SidebarPageTreeComponents } from '@/components/sidebar/page-tree';\nimport { type ComponentProps, HTMLAttributes, type ReactNode, useMemo } from 'react';\nimport { cn } from '@/utils/cn';\nimport { SidebarViewport, useSidebar } from '@/components/sidebar/base';\nimport { SidebarTabsDropdown, type SidebarTabWithProps } from './tab-dropdown';\nimport { Sidebar, SidebarContent, SidebarLinkItem, SidebarPageTree } from './sidebar';\nimport { buttonVariants } from '@/components/ui/button';\nimport { Languages, SidebarIcon, XIcon } from 'lucide-react';\nimport { renderTitleNav, useLinkItems } from '../shared';\nimport { LanguageToggle } from '../shared/language-toggle';\nimport { SearchToggle } from '../shared/search-toggle';\nimport { ThemeToggle } from '../shared/theme-toggle';\nimport { LinkItem } from '@/utils/link-item';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nexport interface DocsLayoutProps extends BaseLayoutProps {\n  tree: PageTree.Root;\n\n  sidebar?: SidebarOptions;\n\n  /**\n   * Props for the `div` container\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n\n  renderNavigationPanel?: (props: NavigationPanelProps) => ReactNode;\n}\n\ninterface SidebarOptions\n  extends\n    ComponentProps<'aside'>,\n    Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {\n  enabled?: boolean;\n  component?: ReactNode;\n  components?: Partial<SidebarPageTreeComponents>;\n\n  /**\n   * Root Toggle options\n   */\n  tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;\n\n  banner?: ReactNode;\n  footer?: ReactNode;\n}\n\nexport function DocsLayout({\n  tree,\n  nav = {},\n  sidebar: {\n    enabled: sidebarEnabled = true,\n    tabs: sidebarTabs,\n    defaultOpenLevel,\n    prefetch,\n    ...sidebarProps\n  } = {},\n  searchToggle = {},\n  themeSwitch = {},\n  i18n = false,\n  children,\n  containerProps,\n  renderNavigationPanel = (props) => <NavigationPanel {...props} />,\n  ...props\n}: DocsLayoutProps) {\n  const tabs = useMemo(() => {\n    if (Array.isArray(sidebarTabs)) {\n      return sidebarTabs;\n    }\n    if (typeof sidebarTabs === 'object') {\n      return getSidebarTabs(tree, sidebarTabs);\n    }\n    if (sidebarTabs !== false) {\n      return getSidebarTabs(tree);\n    }\n    return [];\n  }, [tree, sidebarTabs]);\n  const { menuItems } = useLinkItems(props);\n  const iconLinks = menuItems.filter((item) => item.type === 'icon');\n\n  function sidebar() {\n    const { footer, banner, component, components, ...rest } = sidebarProps;\n    if (component) return component;\n\n    return (\n      <SidebarContent {...rest}>\n        <div className=\"flex flex-col gap-3 p-4 pb-2 empty:hidden\">{banner}</div>\n        <SidebarViewport>\n          {menuItems\n            .filter((v) => v.type !== 'icon')\n            .map((item, i, list) => (\n              <SidebarLinkItem\n                key={i}\n                item={item}\n                className={cn(i === list.length - 1 && 'mb-4')}\n              />\n            ))}\n          <SidebarPageTree {...components} />\n        </SidebarViewport>\n        {footer}\n      </SidebarContent>\n    );\n  }\n\n  return (\n    <TreeContextProvider tree={tree}>\n      <Sidebar defaultOpenLevel={defaultOpenLevel} prefetch={prefetch}>\n        <div\n          id=\"nd-flux-layout\"\n          {...containerProps}\n          className={cn(\n            'flex flex-col items-center pb-24 overflow-x-clip',\n            containerProps?.className,\n          )}\n        >\n          {sidebarEnabled && sidebar()}\n          {children}\n        </div>\n        {renderNavigationPanel({\n          head: renderTitleNav(nav, {\n            className: 'inline-flex items-center gap-2.5 text-sm font-semibold',\n          }),\n          tabDropdown: tabs.length > 0 && <SidebarTabsDropdown className=\"flex-1\" options={tabs} />,\n          tool: (\n            <>\n              {i18n && (\n                <LanguageToggle>\n                  <Languages className=\"size-4.5\" />\n                </LanguageToggle>\n              )}\n\n              {searchToggle.enabled !== false &&\n                (searchToggle.components?.sm ?? (\n                  <SearchToggle className=\"rounded-lg\" hideIfDisabled />\n                ))}\n\n              <NavigationSidebarTrigger />\n              {themeSwitch.enabled !== false &&\n                (themeSwitch.component ?? (\n                  <ThemeToggle\n                    className=\"px-1 py-0 h-full ms-1 rounded-xl bg-fd-muted *:rounded-lg\"\n                    mode={themeSwitch.mode}\n                  />\n                ))}\n            </>\n          ),\n          link: iconLinks.map((item, i) => (\n            <LinkItem\n              key={i}\n              item={item}\n              className={cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }))}\n              aria-label={item.label}\n            >\n              {item.icon}\n            </LinkItem>\n          )),\n        })}\n      </Sidebar>\n    </TreeContextProvider>\n  );\n}\n\nfunction NavigationSidebarTrigger() {\n  const { open, setOpen } = useSidebar();\n  return (\n    <button\n      className={cn(\n        buttonVariants({\n          variant: 'ghost',\n          size: 'icon-sm',\n          className: 'overflow-hidden',\n        }),\n      )}\n      onClick={() => setOpen((prev) => !prev)}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={open ? 'open' : 'closed'}\n          transition={{ duration: 0.2 }}\n          initial={{\n            y: '100%',\n            opacity: 0,\n          }}\n          animate={{\n            y: 0,\n            opacity: 1,\n          }}\n          exit={{\n            y: '100%',\n            opacity: 0,\n          }}\n        >\n          {open ? <XIcon /> : <SidebarIcon />}\n        </motion.span>\n      </AnimatePresence>\n    </button>\n  );\n}\n\nexport interface NavigationPanelProps {\n  head: ReactNode;\n  tabDropdown: ReactNode;\n  tool: ReactNode;\n  link: ReactNode;\n}\n\nexport function NavigationPanel({\n  head,\n  tabDropdown,\n  tool,\n  link,\n  className,\n  children = (v) => v,\n  ...props\n}: NavigationPanelProps &\n  Omit<ComponentProps<typeof motion.div>, 'children'> & {\n    /**\n     * replace default children\n     */\n    children?: (defaultChildren: ReactNode) => ReactNode;\n  }) {\n  return (\n    <motion.div\n      className={cn(\n        'fixed left-1/2 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))] translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)] bottom-0 z-40 bg-fd-popover text-fd-popover-foreground border-t shadow-lg sm:bottom-6 sm:rounded-2xl sm:border sm:max-w-[380px]',\n        className,\n      )}\n      {...props}\n    >\n      {children(\n        <>\n          <div className=\"flex flex-row items-center ps-2.5 p-1 gap-2 min-h-11\">\n            {head}\n            <div id=\"flux-layout-slot\" className=\"flex-1\" />\n          </div>\n\n          <div className=\"flex flex-row gap-1.5 overflow-x-auto overflow-y-hidden p-2 sm:p-1\">\n            <div className=\"flex flex-row items-center gap-2 min-w-0 flex-1\">{tabDropdown}</div>\n\n            <div className=\"flex flex-row items-center text-fd-muted-foreground border-x px-0.5 empty:hidden\">\n              {link}\n            </div>\n\n            <div className=\"flex flex-row items-center text-fd-muted-foreground empty:hidden\">\n              {tool}\n            </div>\n          </div>\n        </>,\n      )}\n    </motion.div>\n  );\n}\n\nexport function NavigationPanelOverlay({\n  enabled = false,\n  className,\n  ...props\n}: ComponentProps<typeof motion.div> & { enabled?: boolean }) {\n  return (\n    <RemoveScroll enabled={enabled}>\n      <motion.div\n        className={cn(\n          'fixed inset-0 z-30 pr-(--removed-body-scroll-bar-size,0) backdrop-blur-md bg-fd-background/60',\n          !enabled && 'pointer-events-none',\n          className,\n        )}\n        initial=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n        animate={enabled ? 'show' : 'hide'}\n        exit=\"hide\"\n        {...props}\n      />\n    </RemoveScroll>\n  );\n}\n"],"mappings":"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"}

package/dist/layouts/flux/page/client.d.ts

@@ -0,0 +1,45 @@
+import * as react from "react";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { BreadcrumbOptions } from "fumadocs-core/breadcrumb";
+import * as PageTree from "fumadocs-core/page-tree";
+
+//#region src/layouts/flux/page/client.d.ts
+declare function PageTOCPopover(props: ComponentProps<'div'>): react.ReactPortal | undefined;
+declare function PageTOCPopoverTrigger({
+  className,
+  ...props
+}: ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+declare function PageTOCPopoverContent(props: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+declare function PageLastUpdate({
+  date: value,
+  ...props
+}: Omit<ComponentProps<'p'>, 'children'> & {
+  date: Date;
+}): react_jsx_runtime0.JSX.Element;
+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 PageFooter({
+  items,
+  children,
+  className,
+  ...props
+}: FooterProps): react_jsx_runtime0.JSX.Element;
+type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
+declare function PageBreadcrumb({
+  includeRoot,
+  includeSeparator,
+  includePage,
+  ...props
+}: BreadcrumbProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { BreadcrumbProps, FooterProps, PageBreadcrumb, PageFooter, PageLastUpdate, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger };
+//# sourceMappingURL=client.d.ts.map

package/dist/layouts/flux/page/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","names":[],"sources":["../../../../src/layouts/flux/page/client.tsx"],"mappings":";;;;;;;iBAkCgB,cAAA,CAAe,KAAA,EAAO,cAAA,UAAc,KAAA,CAAO,WAAA;AAAA,iBA8D3C,qBAAA,CAAA;EAAwB,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAyHvE,qBAAA,CAAsB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAYlD,cAAA,CAAA;EACd,IAAA,EAAM,KAAA;EAAA,GACH;AAAA,GACF,IAAA,CAAK,cAAA;EAAqC,IAAA,EAAM,IAAA;AAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAgBpD,IAAA,GAAO,IAAA,CAAK,QAAA,CAAS,IAAA;AAAA,UACT,WAAA,SAAoB,cAAA;EAvNC;;;EA2NpC,KAAA;IACE,QAAA,GAAW,IAAA;IACX,IAAA,GAAO,IAAA;EAAA;AAAA;AAAA,iBAIK,UAAA,CAAA;EAAa,KAAA;EAAO,QAAA;EAAU,SAAA;EAAA,GAAc;AAAA,GAAS,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA6DpE,eAAA,GAAkB,iBAAA,GAAoB,cAAA;AAAA,iBAElC,cAAA,CAAA;EACd,WAAA;EACA,gBAAA;EACA,WAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/layouts/flux/page/client.js

@@ -0,0 +1,255 @@
+'use client';
+
+import { useI18n } from "../../../contexts/i18n.js";
+import { cn } from "../../../utils/cn.js";
+import { useTreeContext, useTreePath } from "../../../contexts/tree.js";
+import { isActive } from "../../../utils/urls.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.js";
+import { useTOCItems } from "../../../components/toc/index.js";
+import { useFooterItems } from "../../../utils/use-footer-items.js";
+import { Fragment, createContext, use, useEffect, useEffectEvent, useMemo, useRef, 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 { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+import { getBreadcrumbItemsFromPath } from "fumadocs-core/breadcrumb";
+import { useActiveAnchor } from "fumadocs-core/toc";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "motion/react";
+
+//#region src/layouts/flux/page/client.tsx
+const TocPopoverContext = createContext(null);
+function PageTOCPopover(props) {
+	const [container, setContainer] = useState(null);
+	useEffect(() => {
+		const element = document.getElementById("flux-layout-slot");
+		if (!element) return;
+		setContainer(element);
+	}, []);
+	if (!container) return;
+	return createPortal(/* @__PURE__ */ jsx(PageTOCPopoverPhysical, { ...props }), container);
+}
+function PageTOCPopoverPhysical({ className, children, ...rest }) {
+	const ref = useRef(null);
+	const [open, setOpen] = useState(false);
+	const onClick = useEffectEvent((e) => {
+		if (!open) return;
+		if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+	});
+	useEffect(() => {
+		window.addEventListener("click", onClick);
+		return () => {
+			window.removeEventListener("click", onClick);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(TocPopoverContext, {
+		value: useMemo(() => ({
+			open,
+			setOpen
+		}), [setOpen, open]),
+		children: /* @__PURE__ */ jsx(Collapsible, {
+			open,
+			onOpenChange: setOpen,
+			"data-toc-popover": "",
+			className: cn("relative h-9 animate-fd-fade-in", className),
+			...rest,
+			children: /* @__PURE__ */ jsx("header", {
+				ref,
+				className: cn("absolute w-full bottom-0 border rounded-xl transition-colors bg-fd-secondary text-fd-secondary-foreground backdrop-blur-sm", open && "shadow-lg bg-fd-popover/80 text-fd-popover-foreground"),
+				children
+			})
+		})
+	});
+}
+function PageTOCPopoverTrigger({ className, ...props }) {
+	const { text } = useI18n();
+	const { open } = use(TocPopoverContext);
+	const items = useTOCItems();
+	const active = useActiveAnchor();
+	const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
+	const path = useTreePath().at(-1);
+	const spanProps = {
+		transition: { duration: .1 },
+		initial: {
+			opacity: 0,
+			y: 10
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -10
+		},
+		className: cn(open && "text-fd-popover-foreground")
+	};
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		className: cn("flex w-full h-8.5 items-center text-sm text-fd-muted-foreground gap-2.5 px-2 text-start focus-visible:outline-none [&_svg]:size-4", className),
+		"data-toc-popover-trigger": "",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ProgressCircle, {
+				value: (selected + 1) / Math.max(1, items.length),
+				max: 1,
+				className: cn("shrink-0", open && "text-fd-primary")
+			}),
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "wait",
+				children: items[selected] && selected !== -1 && !open ? /* @__PURE__ */ jsx(motion.span, {
+					...spanProps,
+					children: items[selected].title
+				}, selected) : path ? /* @__PURE__ */ jsx(motion.span, {
+					...spanProps,
+					children: path.name
+				}, path.$id ?? ":pathId") : /* @__PURE__ */ jsx(motion.span, {
+					...spanProps,
+					children: text.toc
+				}, ":toc")
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, { className: cn("ms-auto shrink-0 transition-transform", open && "rotate-180") })
+		]
+	});
+}
+function clamp(input, min, max) {
+	if (input < min) return min;
+	if (input > max) return max;
+	return input;
+}
+function ProgressCircle({ value, strokeWidth = 2, size = 24, min = 0, max = 100, ...restSvgProps }) {
+	const normalizedValue = clamp(value, min, max);
+	const radius = (size - strokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const progress = normalizedValue / max * circumference;
+	const circleProps = {
+		cx: size / 2,
+		cy: size / 2,
+		r: radius,
+		fill: "none",
+		strokeWidth
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		role: "progressbar",
+		viewBox: `0 0 ${size} ${size}`,
+		"aria-valuenow": normalizedValue,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		...restSvgProps,
+		children: [/* @__PURE__ */ jsx("circle", {
+			...circleProps,
+			className: "stroke-current/25"
+		}), /* @__PURE__ */ jsx("circle", {
+			...circleProps,
+			stroke: "currentColor",
+			strokeDasharray: circumference,
+			strokeDashoffset: circumference - progress,
+			strokeLinecap: "round",
+			transform: `rotate(-90 ${size / 2} ${size / 2})`,
+			className: "transition-all"
+		})]
+	});
+}
+function PageTOCPopoverContent(props) {
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		"data-toc-popover-content": "",
+		...props,
+		className: cn("flex flex-col px-2 max-h-[50vh]", props.className),
+		children: props.children
+	});
+}
+function PageLastUpdate({ date: value, ...props }) {
+	const { text } = useI18n();
+	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: [
+			text.lastUpdate,
+			" ",
+			date
+		]
+	});
+}
+function PageFooter({ 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, false));
+		if (idx === -1) return {};
+		return {
+			previous: footerList[idx - 1],
+			next: footerList[idx + 1]
+		};
+	}, [
+		footerList,
+		items,
+		pathname
+	]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { 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 { text } = useI18n();
+	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 ? text.previousPage : text.nextPage)
+		})]
+	});
+}
+function PageBreadcrumb({ 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, { 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 { PageBreadcrumb, PageFooter, PageLastUpdate, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger };
+//# sourceMappingURL=client.js.map

package/dist/layouts/flux/page/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","names":[],"sources":["../../../../src/layouts/flux/page/client.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport Link from 'fumadocs-core/link';\nimport { cn } from '@/utils/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from 'fumadocs-core/breadcrumb';\nimport { isActive } from '@/utils/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from 'fumadocs-core/toc';\nimport { useFooterItems } from '@/utils/use-footer-items';\nimport { createPortal } from 'react-dom';\nimport { AnimatePresence, motion } from 'motion/react';\n\nconst TocPopoverContext = createContext<{\n  open: boolean;\n  setOpen: (open: boolean) => void;\n} | null>(null);\n\nexport function PageTOCPopover(props: ComponentProps<'div'>) {\n  const [container, setContainer] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    const element = document.getElementById('flux-layout-slot');\n    if (!element) return;\n    setContainer(element);\n  }, []);\n\n  if (!container) return;\n  return createPortal(<PageTOCPopoverPhysical {...props} />, container);\n}\n\nfunction PageTOCPopoverPhysical({ className, children, ...rest }: ComponentProps<'div'>) {\n  const ref = useRef<HTMLElement>(null);\n  const [open, setOpen] = useState(false);\n\n  const onClick = useEffectEvent((e: Event) => {\n    if (!open) return;\n\n    if (ref.current && !ref.current.contains(e.target as HTMLElement)) setOpen(false);\n  });\n\n  useEffect(() => {\n    window.addEventListener('click', onClick);\n\n    return () => {\n      window.removeEventListener('click', onClick);\n    };\n  }, []);\n\n  return (\n    <TocPopoverContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n        }),\n        [setOpen, open],\n      )}\n    >\n      <Collapsible\n        open={open}\n        onOpenChange={setOpen}\n        data-toc-popover=\"\"\n        className={cn('relative h-9 animate-fd-fade-in', className)}\n        {...rest}\n      >\n        <header\n          ref={ref}\n          className={cn(\n            'absolute w-full bottom-0 border rounded-xl transition-colors bg-fd-secondary text-fd-secondary-foreground backdrop-blur-sm',\n            open && 'shadow-lg bg-fd-popover/80 text-fd-popover-foreground',\n          )}\n        >\n          {children}\n        </header>\n      </Collapsible>\n    </TocPopoverContext>\n  );\n}\n\nexport function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>) {\n  const { text } = useI18n();\n  const { open } = use(TocPopoverContext)!;\n  const items = useTOCItems();\n  const active = useActiveAnchor();\n  const selected = useMemo(\n    () => items.findIndex((item) => active === item.url.slice(1)),\n    [items, active],\n  );\n  const path = useTreePath().at(-1);\n  const spanProps = {\n    transition: {\n      duration: 0.1,\n    },\n    initial: {\n      opacity: 0,\n      y: 10,\n    },\n    animate: {\n      opacity: 1,\n      y: 0,\n    },\n    exit: {\n      opacity: 0,\n      y: -10,\n    },\n    className: cn(open && 'text-fd-popover-foreground'),\n  };\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        'flex w-full h-8.5 items-center text-sm text-fd-muted-foreground gap-2.5 px-2 text-start focus-visible:outline-none [&_svg]:size-4',\n        className,\n      )}\n      data-toc-popover-trigger=\"\"\n      {...props}\n    >\n      <ProgressCircle\n        value={(selected + 1) / Math.max(1, items.length)}\n        max={1}\n        className={cn('shrink-0', open && 'text-fd-primary')}\n      />\n      <AnimatePresence mode=\"wait\">\n        {items[selected] && selected !== -1 && !open ? (\n          <motion.span key={selected} {...spanProps}>\n            {items[selected].title}\n          </motion.span>\n        ) : path ? (\n          <motion.span key={path.$id ?? ':pathId'} {...spanProps}>\n            {path.name}\n          </motion.span>\n        ) : (\n          <motion.span key=\":toc\" {...spanProps}>\n            {text.toc}\n          </motion.span>\n        )}\n      </AnimatePresence>\n\n      <ChevronDown className={cn('ms-auto shrink-0 transition-transform', open && 'rotate-180')} />\n    </CollapsibleTrigger>\n  );\n}\n\ninterface ProgressCircleProps extends Omit<React.ComponentProps<'svg'>, 'strokeWidth'> {\n  value: number;\n  strokeWidth?: number;\n  size?: number;\n  min?: number;\n  max?: number;\n}\n\nfunction clamp(input: number, min: number, max: number): number {\n  if (input < min) return min;\n  if (input > max) return max;\n  return input;\n}\n\nfunction ProgressCircle({\n  value,\n  strokeWidth = 2,\n  size = 24,\n  min = 0,\n  max = 100,\n  ...restSvgProps\n}: ProgressCircleProps) {\n  const normalizedValue = clamp(value, min, max);\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const progress = (normalizedValue / max) * circumference;\n  const circleProps = {\n    cx: size / 2,\n    cy: size / 2,\n    r: radius,\n    fill: 'none',\n    strokeWidth,\n  };\n\n  return (\n    <svg\n      role=\"progressbar\"\n      viewBox={`0 0 ${size} ${size}`}\n      aria-valuenow={normalizedValue}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      {...restSvgProps}\n    >\n      <circle {...circleProps} className=\"stroke-current/25\" />\n      <circle\n        {...circleProps}\n        stroke=\"currentColor\"\n        strokeDasharray={circumference}\n        strokeDashoffset={circumference - progress}\n        strokeLinecap=\"round\"\n        transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        className=\"transition-all\"\n      />\n    </svg>\n  );\n}\n\nexport function PageTOCPopoverContent(props: ComponentProps<'div'>) {\n  return (\n    <CollapsibleContent\n      data-toc-popover-content=\"\"\n      {...props}\n      className={cn('flex flex-col px-2 max-h-[50vh]', props.className)}\n    >\n      {props.children}\n    </CollapsibleContent>\n  );\n}\n\nexport function PageLastUpdate({\n  date: value,\n  ...props\n}: Omit<ComponentProps<'p'>, 'children'> & { date: Date }) {\n  const { text } = useI18n();\n  const [date, setDate] = useState('');\n\n  useEffect(() => {\n    // to the timezone of client\n    setDate(value.toLocaleDateString());\n  }, [value]);\n\n  return (\n    <p {...props} className={cn('text-sm text-fd-muted-foreground', props.className)}>\n      {text.lastUpdate} {date}\n    </p>\n  );\n}\n\ntype Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;\nexport interface FooterProps extends ComponentProps<'div'> {\n  /**\n   * Items including information for the next and previous page\n   */\n  items?: {\n    previous?: Item;\n    next?: Item;\n  };\n}\n\nexport function PageFooter({ items, children, className, ...props }: FooterProps) {\n  const footerList = useFooterItems();\n  const pathname = usePathname();\n  const { previous, next } = useMemo(() => {\n    if (items) return items;\n\n    const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));\n\n    if (idx === -1) return {};\n    return {\n      previous: footerList[idx - 1],\n      next: footerList[idx + 1],\n    };\n  }, [footerList, items, pathname]);\n\n  return (\n    <>\n      <div\n        className={cn(\n          '@container grid gap-4',\n          previous && next ? 'grid-cols-2' : 'grid-cols-1',\n          className,\n        )}\n        {...props}\n      >\n        {previous && <FooterItem item={previous} index={0} />}\n        {next && <FooterItem item={next} index={1} />}\n      </div>\n      {children}\n    </>\n  );\n}\n\nfunction FooterItem({ item, index }: { item: Item; index: 0 | 1 }) {\n  const { text } = useI18n();\n  const Icon = index === 0 ? ChevronLeft : ChevronRight;\n\n  return (\n    <Link\n      href={item.url}\n      className={cn(\n        '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',\n        index === 1 && 'text-end',\n      )}\n    >\n      <div\n        className={cn(\n          'inline-flex items-center gap-1.5 font-medium',\n          index === 1 && 'flex-row-reverse',\n        )}\n      >\n        <Icon className=\"-mx-1 size-4 shrink-0 rtl:rotate-180\" />\n        <p>{item.name}</p>\n      </div>\n      <p className=\"text-fd-muted-foreground truncate\">\n        {item.description ?? (index === 0 ? text.previousPage : text.nextPage)}\n      </p>\n    </Link>\n  );\n}\n\nexport type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;\n\nexport function PageBreadcrumb({\n  includeRoot,\n  includeSeparator,\n  includePage,\n  ...props\n}: BreadcrumbProps) {\n  const path = useTreePath();\n  const { root } = useTreeContext();\n  const items = useMemo(() => {\n    return getBreadcrumbItemsFromPath(root, path, {\n      includePage,\n      includeSeparator,\n      includeRoot,\n    });\n  }, [includePage, includeRoot, includeSeparator, path, root]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className)}\n    >\n      {items.map((item, i) => {\n        const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');\n\n        return (\n          <Fragment key={i}>\n            {i !== 0 && <ChevronRight className=\"size-3.5 shrink-0\" />}\n            {item.url ? (\n              <Link\n                href={item.url}\n                className={cn(className, 'transition-opacity hover:opacity-80')}\n              >\n                {item.name}\n              </Link>\n            ) : (\n              <span className={className}>{item.name}</span>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,oBAAoB,cAGhB,KAAK;AAEf,SAAgB,eAAe,OAA8B;CAC3D,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;AAEpE,iBAAgB;EACd,MAAM,UAAU,SAAS,eAAe,mBAAmB;AAC3D,MAAI,CAAC,QAAS;AACd,eAAa,QAAQ;IACpB,EAAE,CAAC;AAEN,KAAI,CAAC,UAAW;AAChB,QAAO,aAAa,oBAAC,0BAAuB,GAAI,QAAS,EAAE,UAAU;;AAGvE,SAAS,uBAAuB,EAAE,WAAW,UAAU,GAAG,QAA+B;CACvF,MAAM,MAAM,OAAoB,KAAK;CACrC,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CAEvC,MAAM,UAAU,gBAAgB,MAAa;AAC3C,MAAI,CAAC,KAAM;AAEX,MAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,EAAE,OAAsB,CAAE,SAAQ,MAAM;GACjF;AAEF,iBAAgB;AACd,SAAO,iBAAiB,SAAS,QAAQ;AAEzC,eAAa;AACX,UAAO,oBAAoB,SAAS,QAAQ;;IAE7C,EAAE,CAAC;AAEN,QACE,oBAAC;EACC,OAAO,eACE;GACL;GACA;GACD,GACD,CAAC,SAAS,KAAK,CAChB;YAED,oBAAC;GACO;GACN,cAAc;GACd,oBAAiB;GACjB,WAAW,GAAG,mCAAmC,UAAU;GAC3D,GAAI;aAEJ,oBAAC;IACM;IACL,WAAW,GACT,8HACA,QAAQ,wDACT;IAEA;KACM;IACG;GACI;;AAIxB,SAAgB,sBAAsB,EAAE,WAAW,GAAG,SAAmC;CACvF,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,EAAE,SAAS,IAAI,kBAAkB;CACvC,MAAM,QAAQ,aAAa;CAC3B,MAAM,SAAS,iBAAiB;CAChC,MAAM,WAAW,cACT,MAAM,WAAW,SAAS,WAAW,KAAK,IAAI,MAAM,EAAE,CAAC,EAC7D,CAAC,OAAO,OAAO,CAChB;CACD,MAAM,OAAO,aAAa,CAAC,GAAG,GAAG;CACjC,MAAM,YAAY;EAChB,YAAY,EACV,UAAU,IACX;EACD,SAAS;GACP,SAAS;GACT,GAAG;GACJ;EACD,SAAS;GACP,SAAS;GACT,GAAG;GACJ;EACD,MAAM;GACJ,SAAS;GACT,GAAG;GACJ;EACD,WAAW,GAAG,QAAQ,6BAA6B;EACpD;AAED,QACE,qBAAC;EACC,WAAW,GACT,qIACA,UACD;EACD,4BAAyB;EACzB,GAAI;;GAEJ,oBAAC;IACC,QAAQ,WAAW,KAAK,KAAK,IAAI,GAAG,MAAM,OAAO;IACjD,KAAK;IACL,WAAW,GAAG,YAAY,QAAQ,kBAAkB;KACpD;GACF,oBAAC;IAAgB,MAAK;cACnB,MAAM,aAAa,aAAa,MAAM,CAAC,OACtC,oBAAC,OAAO;KAAoB,GAAI;eAC7B,MAAM,UAAU;OADD,SAEJ,GACZ,OACF,oBAAC,OAAO;KAAiC,GAAI;eAC1C,KAAK;OADU,KAAK,OAAO,UAEhB,GAEd,oBAAC,OAAO;KAAgB,GAAI;eACzB,KAAK;OADS,OAEH;KAEA;GAElB,oBAAC,eAAY,WAAW,GAAG,yCAAyC,QAAQ,aAAa,GAAI;;GAC1E;;AAYzB,SAAS,MAAM,OAAe,KAAa,KAAqB;AAC9D,KAAI,QAAQ,IAAK,QAAO;AACxB,KAAI,QAAQ,IAAK,QAAO;AACxB,QAAO;;AAGT,SAAS,eAAe,EACtB,OACA,cAAc,GACd,OAAO,IACP,MAAM,GACN,MAAM,KACN,GAAG,gBACmB;CACtB,MAAM,kBAAkB,MAAM,OAAO,KAAK,IAAI;CAC9C,MAAM,UAAU,OAAO,eAAe;CACtC,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,WAAY,kBAAkB,MAAO;CAC3C,MAAM,cAAc;EAClB,IAAI,OAAO;EACX,IAAI,OAAO;EACX,GAAG;EACH,MAAM;EACN;EACD;AAED,QACE,qBAAC;EACC,MAAK;EACL,SAAS,OAAO,KAAK,GAAG;EACxB,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,GAAI;aAEJ,oBAAC;GAAO,GAAI;GAAa,WAAU;IAAsB,EACzD,oBAAC;GACC,GAAI;GACJ,QAAO;GACP,iBAAiB;GACjB,kBAAkB,gBAAgB;GAClC,eAAc;GACd,WAAW,cAAc,OAAO,EAAE,GAAG,OAAO,EAAE;GAC9C,WAAU;IACV;GACE;;AAIV,SAAgB,sBAAsB,OAA8B;AAClE,QACE,oBAAC;EACC,4BAAyB;EACzB,GAAI;EACJ,WAAW,GAAG,mCAAmC,MAAM,UAAU;YAEhE,MAAM;GACY;;AAIzB,SAAgB,eAAe,EAC7B,MAAM,OACN,GAAG,SACsD;CACzD,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,CAAC,MAAM,WAAW,SAAS,GAAG;AAEpC,iBAAgB;AAEd,UAAQ,MAAM,oBAAoB,CAAC;IAClC,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC;EAAE,GAAI;EAAO,WAAW,GAAG,oCAAoC,MAAM,UAAU;;GAC7E,KAAK;GAAW;GAAE;;GACjB;;AAeR,SAAgB,WAAW,EAAE,OAAO,UAAU,WAAW,GAAG,SAAsB;CAChF,MAAM,aAAa,gBAAgB;CACnC,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,UAAU,SAAS,cAAc;AACvC,MAAI,MAAO,QAAO;EAElB,MAAM,MAAM,WAAW,WAAW,SAAS,SAAS,KAAK,KAAK,UAAU,MAAM,CAAC;AAE/E,MAAI,QAAQ,GAAI,QAAO,EAAE;AACzB,SAAO;GACL,UAAU,WAAW,MAAM;GAC3B,MAAM,WAAW,MAAM;GACxB;IACA;EAAC;EAAY;EAAO;EAAS,CAAC;AAEjC,QACE,8CACE,qBAAC;EACC,WAAW,GACT,yBACA,YAAY,OAAO,gBAAgB,eACnC,UACD;EACD,GAAI;aAEH,YAAY,oBAAC;GAAW,MAAM;GAAU,OAAO;IAAK,EACpD,QAAQ,oBAAC;GAAW,MAAM;GAAM,OAAO;IAAK;GACzC,EACL,YACA;;AAIP,SAAS,WAAW,EAAE,MAAM,SAAuC;CACjE,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,OAAO,UAAU,IAAI,cAAc;AAEzC,QACE,qBAAC;EACC,MAAM,KAAK;EACX,WAAW,GACT,mJACA,UAAU,KAAK,WAChB;aAED,qBAAC;GACC,WAAW,GACT,gDACA,UAAU,KAAK,mBAChB;cAED,oBAAC,QAAK,WAAU,yCAAyC,EACzD,oBAAC,iBAAG,KAAK,OAAS;IACd,EACN,oBAAC;GAAE,WAAU;aACV,KAAK,gBAAgB,UAAU,IAAI,KAAK,eAAe,KAAK;IAC3D;GACC;;AAMX,SAAgB,eAAe,EAC7B,aACA,kBACA,aACA,GAAG,SACe;CAClB,MAAM,OAAO,aAAa;CAC1B,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,QAAQ,cAAc;AAC1B,SAAO,2BAA2B,MAAM,MAAM;GAC5C;GACA;GACA;GACD,CAAC;IACD;EAAC;EAAa;EAAa;EAAkB;EAAM;EAAK,CAAC;AAE5D,KAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,GAAG,8DAA8D,MAAM,UAAU;YAE3F,MAAM,KAAK,MAAM,MAAM;GACtB,MAAM,YAAY,GAAG,YAAY,MAAM,MAAM,SAAS,KAAK,8BAA8B;AAEzF,UACE,qBAAC,uBACE,MAAM,KAAK,oBAAC,gBAAa,WAAU,sBAAsB,EACzD,KAAK,MACJ,oBAAC;IACC,MAAM,KAAK;IACX,WAAW,GAAG,WAAW,sCAAsC;cAE9D,KAAK;KACD,GAEP,oBAAC;IAAgB;cAAY,KAAK;KAAY,KAVnC,EAYJ;IAEb;GACE"}

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

@@ -0,0 +1,98 @@
+import { BreadcrumbProps, FooterProps, PageBreadcrumb, PageLastUpdate } from "./client.js";
+import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { AnchorProviderProps, TOCItemType } from "fumadocs-core/toc";
+
+//#region src/layouts/flux/page/index.d.ts
+interface BreadcrumbOptions extends BreadcrumbProps {
+  enabled: boolean;
+  component: ReactNode;
+}
+interface FooterOptions extends FooterProps {
+  enabled: boolean;
+  component: ReactNode;
+}
+interface DocsPageProps {
+  toc?: TOCItemType[];
+  tableOfContent?: Partial<TableOfContentOptions>;
+  /**
+   * Extend the page to fill all available space
+   *
+   * @defaultValue false
+   */
+  full?: boolean;
+  /**
+   * Replace or disable breadcrumb
+   */
+  breadcrumb?: Partial<BreadcrumbOptions>;
+  /**
+   * Footer navigation, located under the page body.
+   *
+   * You can specify `footer.children` to add extra components under the footer.
+   */
+  footer?: Partial<FooterOptions>;
+  children?: ReactNode;
+  /**
+   * Apply class names to the `#nd-page` container.
+   */
+  className?: string;
+}
+interface TableOfContentOptions extends Pick<AnchorProviderProps, 'single'> {
+  /**
+   * Custom content in TOC container, before the main TOC
+   */
+  header?: ReactNode;
+  /**
+   * Custom content in TOC container, after the main TOC
+   */
+  footer?: ReactNode;
+  enabled: boolean;
+  component: ReactNode;
+  /**
+   * @defaultValue 'normal'
+   */
+  style?: 'normal' | 'clerk';
+}
+declare function DocsPage({
+  breadcrumb: {
+    enabled: breadcrumbEnabled,
+    component: breadcrumb,
+    ...breadcrumbProps
+  },
+  footer: {
+    enabled: footerEnabled,
+    component: footerReplace,
+    ...footerProps
+  },
+  full,
+  tableOfContent: {
+    enabled: tocPopoverEnabled,
+    component: tocPopover,
+    ...tocOptions
+  },
+  toc,
+  children,
+  className
+}: DocsPageProps): ReactNode;
+declare function EditOnGitHub(props: ComponentProps<'a'>): react_jsx_runtime0.JSX.Element;
+/**
+ * Add typography styles
+ */
+declare function DocsBody({
+  children,
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+declare function DocsDescription({
+  children,
+  className,
+  ...props
+}: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element | null;
+declare function DocsTitle({
+  children,
+  className,
+  ...props
+}: ComponentProps<'h1'>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, PageBreadcrumb, PageLastUpdate };
+//# sourceMappingURL=index.d.ts.map

package/dist/layouts/flux/page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/layouts/flux/page/index.tsx"],"mappings":";;;;;;UAmBU,iBAAA,SAA0B,eAAA;EAClC,OAAA;EACA,SAAA,EAAW,SAAA;AAAA;AAAA,UAGH,aAAA,SAAsB,WAAA;EAC9B,OAAA;EACA,SAAA,EAAW,SAAA;AAAA;AAAA,UAGI,aAAA;EACf,GAAA,GAAM,WAAA;EACN,cAAA,GAAiB,OAAA,CAAQ,qBAAA;EAVL;;AAAA;;;EAiBpB,IAAA;EAd8B;;;EAmB9B,UAAA,GAAa,OAAA,CAAQ,iBAAA;EAjBD;;AAGtB;;;EAqBE,MAAA,GAAS,OAAA,CAAQ,aAAA;EAEjB,QAAA,GAAW,SAAA;EArBM;;;EA0BjB,SAAA;AAAA;AAAA,UAGQ,qBAAA,SAA8B,IAAA,CAAK,mBAAA;EARvB;;;EAYpB,MAAA,GAAS,SAAA;EAjCT;;;EAsCA,MAAA,GAAS,SAAA;EAET,OAAA;EACA,SAAA,EAAW,SAAA;EA7BU;;;EAkCrB,KAAA;AAAA;AAAA,iBAGc,QAAA,CAAA;EACd,UAAA;IAAc,OAAA,EAAS,iBAAA;IAA0B,SAAA,EAAW,UAAA;IAAA,GAAe;EAAA;EAC3E,MAAA;IAAU,OAAA,EAAS,aAAA;IAAe,SAAA,EAAW,aAAA;IAAA,GAAkB;EAAA;EAC/D,IAAA;EACA,cAAA;IAAkB,OAAA,EAAS,iBAAA;IAAmB,SAAA,EAAW,UAAA;IAAA,GAAe;EAAA;EACxE,GAAA;EACA,QAAA;EACA;AAAA,GACC,aAAA,GAAa,SAAA;AAAA,iBA8CA,YAAA,CAAa,KAAA,EAAO,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;AA5EtD;iBAwGe,QAAA,CAAA;EAAW,QAAA;EAAU,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAQjE,eAAA,CAAA;EAAkB,QAAA;EAAU,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAWtE,SAAA,CAAA;EAAY,QAAA;EAAU,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,SAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}