fumadocs-ui 16.0.15 → 16.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/css/black.css +1 -1
  2. package/css/catppuccin.css +1 -1
  3. package/css/colors/index.css +51 -0
  4. package/css/dusk.css +1 -1
  5. package/css/layouts/docs.css +1 -0
  6. package/css/layouts/home.css +1 -0
  7. package/css/layouts/notebook.css +1 -0
  8. package/css/neutral.css +1 -40
  9. package/css/ocean.css +1 -1
  10. package/css/preset.css +21 -28
  11. package/css/purple.css +1 -1
  12. package/css/shadcn.css +0 -2
  13. package/css/shiki.css +1 -3
  14. package/css/solar.css +49 -18
  15. package/css/vitepress.css +1 -1
  16. package/dist/components/image-zoom.d.ts +3 -3
  17. package/dist/components/image-zoom.d.ts.map +1 -1
  18. package/dist/components/image-zoom.js +1 -1
  19. package/dist/components/sidebar/base.d.ts +62 -0
  20. package/dist/components/sidebar/base.d.ts.map +1 -0
  21. package/dist/components/sidebar/base.js +174 -0
  22. package/dist/components/sidebar/link-item.d.ts +11 -0
  23. package/dist/components/sidebar/link-item.d.ts.map +1 -0
  24. package/dist/components/sidebar/link-item.js +13 -0
  25. package/dist/components/sidebar/page-tree.d.ts +19 -0
  26. package/dist/components/sidebar/page-tree.d.ts.map +1 -0
  27. package/dist/components/sidebar/page-tree.js +34 -0
  28. package/dist/components/{layout/root-toggle.d.ts → sidebar/tabs.d.ts} +4 -4
  29. package/dist/components/sidebar/tabs.d.ts.map +1 -0
  30. package/dist/components/{layout/root-toggle.js → sidebar/tabs.js} +3 -3
  31. package/dist/components/tabs.unstyled.d.ts +0 -3
  32. package/dist/components/tabs.unstyled.d.ts.map +1 -1
  33. package/dist/components/tabs.unstyled.js +23 -32
  34. package/dist/components/toc/clerk.d.ts +3 -0
  35. package/dist/components/toc/clerk.d.ts.map +1 -0
  36. package/dist/components/{layout/toc-clerk.js → toc/clerk.js} +5 -6
  37. package/dist/components/toc/default.d.ts +3 -0
  38. package/dist/components/toc/default.d.ts.map +1 -0
  39. package/dist/components/{layout/toc.js → toc/default.js} +5 -16
  40. package/dist/components/{layout/toc.d.ts → toc/index.d.ts} +7 -3
  41. package/dist/components/toc/index.d.ts.map +1 -0
  42. package/dist/components/{layout/toc-thumb.js → toc/index.js} +17 -3
  43. package/dist/contexts/search.js +1 -1
  44. package/dist/contexts/tree.d.ts +1 -1
  45. package/dist/contexts/tree.d.ts.map +1 -1
  46. package/dist/contexts/tree.js +3 -3
  47. package/dist/layouts/docs/client.d.ts +12 -5
  48. package/dist/layouts/docs/client.d.ts.map +1 -1
  49. package/dist/layouts/docs/client.js +31 -22
  50. package/dist/layouts/docs/index.d.ts +9 -9
  51. package/dist/layouts/docs/index.d.ts.map +1 -1
  52. package/dist/layouts/docs/index.js +37 -48
  53. package/dist/layouts/docs/{page-client.d.ts → page/client.d.ts} +3 -4
  54. package/dist/layouts/docs/page/client.d.ts.map +1 -0
  55. package/dist/layouts/docs/{page-client.js → page/client.js} +39 -76
  56. package/dist/layouts/docs/page/index.d.ts +58 -0
  57. package/dist/layouts/docs/page/index.d.ts.map +1 -0
  58. package/dist/layouts/docs/page/index.js +51 -0
  59. package/dist/layouts/docs/sidebar.d.ts +17 -0
  60. package/dist/layouts/docs/sidebar.d.ts.map +1 -0
  61. package/dist/layouts/docs/sidebar.js +82 -0
  62. package/dist/layouts/home/client.d.ts +2 -20
  63. package/dist/layouts/home/client.d.ts.map +1 -1
  64. package/dist/layouts/home/client.js +54 -17
  65. package/dist/layouts/home/index.d.ts +2 -3
  66. package/dist/layouts/home/index.d.ts.map +1 -1
  67. package/dist/layouts/home/index.js +3 -35
  68. package/dist/layouts/notebook/client.d.ts +20 -8
  69. package/dist/layouts/notebook/client.d.ts.map +1 -1
  70. package/dist/layouts/notebook/client.js +59 -33
  71. package/dist/layouts/notebook/index.d.ts +9 -9
  72. package/dist/layouts/notebook/index.d.ts.map +1 -1
  73. package/dist/layouts/notebook/index.js +47 -70
  74. package/dist/layouts/notebook/page/client.d.ts +24 -0
  75. package/dist/layouts/notebook/page/client.d.ts.map +1 -0
  76. package/dist/layouts/notebook/page/client.js +119 -0
  77. package/dist/layouts/notebook/page/index.d.ts +58 -0
  78. package/dist/layouts/notebook/page/index.d.ts.map +1 -0
  79. package/dist/layouts/notebook/page/index.js +51 -0
  80. package/dist/layouts/notebook/sidebar.d.ts +17 -0
  81. package/dist/layouts/notebook/sidebar.d.ts.map +1 -0
  82. package/dist/layouts/notebook/sidebar.js +87 -0
  83. package/dist/layouts/shared/index.d.ts +12 -78
  84. package/dist/layouts/shared/index.d.ts.map +1 -1
  85. package/dist/layouts/shared/index.js +11 -15
  86. package/dist/layouts/shared/language-toggle.d.ts +5 -0
  87. package/dist/layouts/shared/language-toggle.d.ts.map +1 -0
  88. package/dist/layouts/shared/link-item.d.ts +78 -0
  89. package/dist/layouts/shared/link-item.d.ts.map +1 -0
  90. package/dist/layouts/shared/{client.js → link-item.js} +1 -1
  91. package/dist/layouts/shared/search-toggle.d.ts.map +1 -0
  92. package/dist/{components/layout → layouts/shared}/theme-toggle.d.ts +2 -2
  93. package/dist/layouts/shared/theme-toggle.d.ts.map +1 -0
  94. package/dist/{components/layout → layouts/shared}/theme-toggle.js +3 -3
  95. package/dist/page.d.ts +6 -59
  96. package/dist/page.d.ts.map +1 -1
  97. package/dist/page.js +16 -50
  98. package/dist/provider/base.d.ts.map +1 -1
  99. package/dist/provider/base.js +2 -3
  100. package/dist/style.css +187 -160
  101. package/dist/utils/use-footer-items.d.ts +6 -0
  102. package/dist/utils/use-footer-items.d.ts.map +1 -0
  103. package/dist/utils/use-footer-items.js +27 -0
  104. package/dist/utils/use-is-scroll-top.d.ts +4 -0
  105. package/dist/utils/use-is-scroll-top.d.ts.map +1 -0
  106. package/dist/utils/use-is-scroll-top.js +17 -0
  107. package/package.json +9 -22
  108. package/css/default.css +0 -34
  109. package/dist/components/layout/language-toggle.d.ts +0 -5
  110. package/dist/components/layout/language-toggle.d.ts.map +0 -1
  111. package/dist/components/layout/root-toggle.d.ts.map +0 -1
  112. package/dist/components/layout/search-toggle.d.ts.map +0 -1
  113. package/dist/components/layout/sidebar.d.ts +0 -66
  114. package/dist/components/layout/sidebar.d.ts.map +0 -1
  115. package/dist/components/layout/sidebar.js +0 -200
  116. package/dist/components/layout/theme-toggle.d.ts.map +0 -1
  117. package/dist/components/layout/toc-clerk.d.ts +0 -3
  118. package/dist/components/layout/toc-clerk.d.ts.map +0 -1
  119. package/dist/components/layout/toc-thumb.d.ts +0 -7
  120. package/dist/components/layout/toc-thumb.d.ts.map +0 -1
  121. package/dist/components/layout/toc.d.ts.map +0 -1
  122. package/dist/contexts/layout.d.ts +0 -28
  123. package/dist/contexts/layout.d.ts.map +0 -1
  124. package/dist/contexts/layout.js +0 -38
  125. package/dist/contexts/sidebar.d.ts +0 -18
  126. package/dist/contexts/sidebar.d.ts.map +0 -1
  127. package/dist/contexts/sidebar.js +0 -31
  128. package/dist/layouts/docs/page-client.d.ts.map +0 -1
  129. package/dist/layouts/docs/page.d.ts +0 -17
  130. package/dist/layouts/docs/page.d.ts.map +0 -1
  131. package/dist/layouts/docs/page.js +0 -26
  132. package/dist/layouts/shared/client.d.ts +0 -6
  133. package/dist/layouts/shared/client.d.ts.map +0 -1
  134. package/dist/provider/index.d.ts +0 -11
  135. package/dist/provider/index.d.ts.map +0 -1
  136. package/dist/provider/index.js +0 -12
  137. /package/dist/{components/layout → layouts/shared}/language-toggle.js +0 -0
  138. /package/dist/{components/layout → layouts/shared}/search-toggle.d.ts +0 -0
  139. /package/dist/{components/layout → layouts/shared}/search-toggle.js +0 -0
@@ -0,0 +1,19 @@
1
+ import { type FC, type ReactNode } from 'react';
2
+ import type * as PageTree from 'fumadocs-core/page-tree';
3
+ import type * as Base from './base.js';
4
+ export interface SidebarPageTreeComponents {
5
+ Item: FC<{
6
+ item: PageTree.Item;
7
+ }>;
8
+ Folder: FC<{
9
+ item: PageTree.Folder;
10
+ children: ReactNode;
11
+ }>;
12
+ Separator: FC<{
13
+ item: PageTree.Separator;
14
+ }>;
15
+ }
16
+ type InternalComponents = Pick<typeof Base, 'SidebarSeparator' | 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;
17
+ export declare function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem, }: InternalComponents): (components: Partial<SidebarPageTreeComponents>) => import("react/jsx-runtime").JSX.Element;
18
+ export {};
19
+ //# sourceMappingURL=page-tree.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"page-tree.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/page-tree.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,KAAK,IAAI,MAAM,QAAQ,CAAC;AAEpC,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC3D,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED,KAAK,kBAAkB,GAAG,IAAI,CAC5B,OAAO,IAAI,EACT,kBAAkB,GAClB,eAAe,GACf,mBAAmB,GACnB,sBAAsB,GACtB,sBAAsB,GACtB,aAAa,CAChB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,WAAW,GACZ,EAAE,kBAAkB,IAuCjB,YAAY,OAAO,CAAC,yBAAyB,CAAC,6CA6CjD"}
@@ -0,0 +1,34 @@
1
+ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
+ import { useTreeContext, useTreePath } from '../../contexts/tree.js';
3
+ import { useMemo, Fragment } from 'react';
4
+ export function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem, }) {
5
+ function PageTreeFolder({ item, children, }) {
6
+ const path = useTreePath();
7
+ return (_jsxs(SidebarFolder, { defaultOpen: (value) => (item.defaultOpen ?? value) || path.includes(item), children: [item.index ? (_jsxs(SidebarFolderLink, { href: item.index.url, external: item.index.external, children: [item.icon, item.name] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.name] })), _jsx(SidebarFolderContent, { children: children })] }));
8
+ }
9
+ /**
10
+ * Render sidebar items from page tree
11
+ */
12
+ return function SidebarPageTree(components) {
13
+ const { root } = useTreeContext();
14
+ const { Separator, Item, Folder = PageTreeFolder } = components;
15
+ return useMemo(() => {
16
+ function renderSidebarList(items) {
17
+ return items.map((item, i) => {
18
+ if (item.type === 'separator') {
19
+ if (Separator)
20
+ return _jsx(Separator, { item: item }, i);
21
+ return (_jsxs(SidebarSeparator, { children: [item.icon, item.name] }, i));
22
+ }
23
+ if (item.type === 'folder') {
24
+ return (_jsx(Folder, { item: item, children: renderSidebarList(item.children) }, i));
25
+ }
26
+ if (Item)
27
+ return _jsx(Item, { item: item }, item.url);
28
+ return (_jsx(SidebarItem, { href: item.url, external: item.external, icon: item.icon, children: item.name }, item.url));
29
+ });
30
+ }
31
+ return (_jsx(Fragment, { children: renderSidebarList(root.children) }, root.$id));
32
+ }, [Folder, Item, Separator, root]);
33
+ };
34
+ }
@@ -1,10 +1,10 @@
1
1
  import { type ComponentProps, type ReactNode } from 'react';
2
2
  import type { SidebarTab } from '../../utils/get-sidebar-tabs.js';
3
- export interface Option extends SidebarTab {
3
+ export interface SidebarTabWithProps extends SidebarTab {
4
4
  props?: ComponentProps<'a'>;
5
5
  }
6
- export declare function RootToggle({ options, placeholder, ...props }: {
6
+ export declare function SidebarTabTrigger({ options, placeholder, ...props }: {
7
7
  placeholder?: ReactNode;
8
- options: Option[];
8
+ options: SidebarTabWithProps[];
9
9
  } & ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
10
- //# sourceMappingURL=root-toggle.d.ts.map
10
+ //# sourceMappingURL=tabs.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAW/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,KAAK,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,WAAW,EACX,GAAG,KAAK,EACT,EAAE;IACD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,EAAE,mBAAmB,EAAE,CAAC;CAChC,GAAG,cAAc,CAAC,QAAQ,CAAC,2CAkF3B"}
@@ -6,9 +6,9 @@ import Link from 'fumadocs-core/link';
6
6
  import { usePathname } from 'fumadocs-core/framework';
7
7
  import { cn } from '../../utils/cn.js';
8
8
  import { isTabActive } from '../../utils/is-active.js';
9
- import { useSidebar } from '../../contexts/sidebar.js';
10
- import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
11
- export function RootToggle({ options, placeholder, ...props }) {
9
+ import { useSidebar } from '../../components/sidebar/base.js';
10
+ import { Popover, PopoverContent, PopoverTrigger, } from '../../components/ui/popover.js';
11
+ export function SidebarTabTrigger({ options, placeholder, ...props }) {
12
12
  const [open, setOpen] = useState(false);
13
13
  const { closeOnRedirect } = useSidebar();
14
14
  const pathname = usePathname();
@@ -16,9 +16,6 @@ export interface TabsProps extends ComponentProps<typeof Primitive.Tabs> {
16
16
  }
17
17
  export declare const TabsList: import("react").ForwardRefExoticComponent<Primitive.TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
18
18
  export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Primitive.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
19
- /**
20
- * @internal You better not use it
21
- */
22
19
  export declare function Tabs({ ref, groupId, persist, updateAnchor, defaultValue, value: _value, onValueChange: _onValueChange, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
23
20
  export declare function TabsContent({ value, ...props }: ComponentProps<typeof Primitive.TabsContent>): import("react/jsx-runtime").JSX.Element;
24
21
  //# sourceMappingURL=tabs.unstyled.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.unstyled.d.ts","sourceRoot":"","sources":["../../src/components/tabs.unstyled.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAQpB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,SAAS,MAAM,sBAAsB,CAAC;AAoBlD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC;IACtE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,QAAQ,oHAAqB,CAAC;AAE3C,eAAO,MAAM,WAAW,0HAAwB,CAAC;AAEjD;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,GAAG,EACH,OAAO,EACP,OAAe,EACf,YAAoB,EACpB,YAAY,EACZ,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,cAAc,EAC7B,GAAG,KAAK,EACT,EAAE,SAAS,2CAsEX;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,2CAY9C"}
1
+ {"version":3,"file":"tabs.unstyled.d.ts","sourceRoot":"","sources":["../../src/components/tabs.unstyled.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAQpB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,SAAS,MAAM,sBAAsB,CAAC;AAMlD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC;IACtE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,QAAQ,oHAAqB,CAAC;AAE3C,eAAO,MAAM,WAAW,0HAAwB,CAAC;AAEjD,wBAAgB,IAAI,CAAC,EACnB,GAAG,EACH,OAAO,EACP,OAAe,EACf,YAAoB,EACpB,YAAY,EACZ,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,cAAc,EAC7B,GAAG,KAAK,EACT,EAAE,SAAS,2CAqEX;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,2CAY9C"}
@@ -1,63 +1,53 @@
1
1
  'use client';
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
- import { createContext, useContext, useEffectEvent, useLayoutEffect, useMemo, useRef, useState, } from 'react';
3
+ import { createContext, use, useEffectEvent, useLayoutEffect, useMemo, useRef, useState, } from 'react';
4
4
  import * as Primitive from '@radix-ui/react-tabs';
5
5
  import { mergeRefs } from '../utils/merge-refs.js';
6
6
  const listeners = new Map();
7
- function addChangeListener(id, listener) {
8
- const list = listeners.get(id) ?? [];
9
- list.push(listener);
10
- listeners.set(id, list);
11
- }
12
- function removeChangeListener(id, listener) {
13
- const list = listeners.get(id) ?? [];
14
- listeners.set(id, list.filter((item) => item !== listener));
15
- }
16
7
  const TabsContext = createContext(null);
17
8
  function useTabContext() {
18
- const ctx = useContext(TabsContext);
9
+ const ctx = use(TabsContext);
19
10
  if (!ctx)
20
11
  throw new Error('You must wrap your component in <Tabs>');
21
12
  return ctx;
22
13
  }
23
14
  export const TabsList = Primitive.TabsList;
24
15
  export const TabsTrigger = Primitive.TabsTrigger;
25
- /**
26
- * @internal You better not use it
27
- */
28
16
  export function Tabs({ ref, groupId, persist = false, updateAnchor = false, defaultValue, value: _value, onValueChange: _onValueChange, ...props }) {
29
17
  const tabsRef = useRef(null);
18
+ const valueToIdMap = useMemo(() => new Map(), []);
30
19
  const [value, setValue] = _value === undefined
31
20
  ? // eslint-disable-next-line react-hooks/rules-of-hooks -- not supposed to change controlled/uncontrolled
32
21
  useState(defaultValue)
33
- : [_value, _onValueChange ?? (() => undefined)];
34
- const onChange = useEffectEvent((v) => setValue(v));
35
- const valueToIdMap = useMemo(() => new Map(), []);
22
+ : // eslint-disable-next-line react-hooks/rules-of-hooks -- not supposed to change controlled/uncontrolled
23
+ [_value, useEffectEvent((v) => _onValueChange?.(v))];
36
24
  useLayoutEffect(() => {
37
25
  if (!groupId)
38
26
  return;
39
- const previous = persist
40
- ? localStorage.getItem(groupId)
41
- : sessionStorage.getItem(groupId);
27
+ let previous = sessionStorage.getItem(groupId);
28
+ if (persist)
29
+ previous ?? (previous = localStorage.getItem(groupId));
42
30
  if (previous)
43
- onChange(previous);
44
- addChangeListener(groupId, onChange);
31
+ setValue(previous);
32
+ const groupListeners = listeners.get(groupId) ?? new Set();
33
+ groupListeners.add(setValue);
34
+ listeners.set(groupId, groupListeners);
45
35
  return () => {
46
- removeChangeListener(groupId, onChange);
36
+ groupListeners.delete(setValue);
47
37
  };
48
- }, [groupId, persist]);
38
+ }, [groupId, persist, setValue]);
49
39
  useLayoutEffect(() => {
50
40
  const hash = window.location.hash.slice(1);
51
41
  if (!hash)
52
42
  return;
53
43
  for (const [value, id] of valueToIdMap.entries()) {
54
44
  if (id === hash) {
55
- onChange(value);
45
+ setValue(value);
56
46
  tabsRef.current?.scrollIntoView();
57
47
  break;
58
48
  }
59
49
  }
60
- }, [valueToIdMap]);
50
+ }, [setValue, valueToIdMap]);
61
51
  return (_jsx(Primitive.Tabs, { ref: mergeRefs(ref, tabsRef), value: value, onValueChange: (v) => {
62
52
  if (updateAnchor) {
63
53
  const id = valueToIdMap.get(v);
@@ -66,18 +56,19 @@ export function Tabs({ ref, groupId, persist = false, updateAnchor = false, defa
66
56
  }
67
57
  }
68
58
  if (groupId) {
69
- listeners.get(groupId)?.forEach((item) => {
70
- item(v);
71
- });
59
+ const groupListeners = listeners.get(groupId);
60
+ if (groupListeners) {
61
+ for (const listener of groupListeners)
62
+ listener(v);
63
+ }
64
+ sessionStorage.setItem(groupId, v);
72
65
  if (persist)
73
66
  localStorage.setItem(groupId, v);
74
- else
75
- sessionStorage.setItem(groupId, v);
76
67
  }
77
68
  else {
78
69
  setValue(v);
79
70
  }
80
- }, ...props, children: _jsx(TabsContext.Provider, { value: useMemo(() => ({ valueToIdMap }), [valueToIdMap]), children: props.children }) }));
71
+ }, ...props, children: _jsx(TabsContext, { value: useMemo(() => ({ valueToIdMap }), [valueToIdMap]), children: props.children }) }));
81
72
  }
82
73
  export function TabsContent({ value, ...props }) {
83
74
  const { valueToIdMap } = useTabContext();
@@ -0,0 +1,3 @@
1
+ import { type ComponentProps } from 'react';
2
+ export declare function TOCItems({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=clerk.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"clerk.d.ts","sourceRoot":"","sources":["../../../src/components/toc/clerk.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AAMzE,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAsG3E"}
@@ -3,11 +3,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
3
3
  import * as Primitive from 'fumadocs-core/toc';
4
4
  import { useEffect, useRef, useState } from 'react';
5
5
  import { cn } from '../../utils/cn.js';
6
- import { TocThumb } from '../../components/layout/toc-thumb.js';
7
- import { useTOCItems } from '../../components/layout/toc.js';
6
+ import { useTOCItems, TocThumb } from './index.js';
8
7
  import { mergeRefs } from '../../utils/merge-refs.js';
9
8
  import { useI18n } from '../../contexts/i18n.js';
10
- export default function ClerkTOCItems({ ref, className, ...props }) {
9
+ export function TOCItems({ ref, className, ...props }) {
11
10
  const containerRef = useRef(null);
12
11
  const items = useTOCItems();
13
12
  const { text } = useI18n();
@@ -49,13 +48,13 @@ export default function ClerkTOCItems({ ref, className, ...props }) {
49
48
  }, [items]);
50
49
  if (items.length === 0)
51
50
  return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
52
- return (_jsxs(_Fragment, { children: [svg ? (_jsx("div", { className: "absolute start-0 top-0 rtl:-scale-x-100", style: {
51
+ return (_jsxs(_Fragment, { children: [svg && (_jsx("div", { className: "absolute start-0 top-0 rtl:-scale-x-100", style: {
53
52
  width: svg.width,
54
53
  height: svg.height,
55
54
  maskImage: `url("data:image/svg+xml,${
56
55
  // Inline SVG
57
56
  encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`)}")`,
58
- }, children: _jsx(TocThumb, { containerRef: containerRef, className: "mt-(--fd-top) h-(--fd-height) bg-fd-primary transition-all" }) })) : null, _jsx("div", { ref: mergeRefs(containerRef, ref), className: cn('flex flex-col', className), ...props, children: items.map((item, i) => (_jsx(TOCItem, { item: item, upper: items[i - 1]?.depth, lower: items[i + 1]?.depth }, item.url))) })] }));
57
+ }, children: _jsx(TocThumb, { containerRef: containerRef, className: "mt-(--fd-top) h-(--fd-height) bg-fd-primary transition-all" }) })), _jsx("div", { ref: mergeRefs(containerRef, ref), className: cn('flex flex-col', className), ...props, children: items.map((item, i) => (_jsx(TOCItem, { item: item, upper: items[i - 1]?.depth, lower: items[i + 1]?.depth }, item.url))) })] }));
59
58
  }
60
59
  function getItemOffset(depth) {
61
60
  if (depth <= 2)
@@ -71,7 +70,7 @@ function TOCItem({ item, upper = item.depth, lower = item.depth, }) {
71
70
  const offset = getLineOffset(item.depth), upperOffset = getLineOffset(upper), lowerOffset = getLineOffset(lower);
72
71
  return (_jsxs(Primitive.TOCItem, { href: item.url, style: {
73
72
  paddingInlineStart: getItemOffset(item.depth),
74
- }, className: "prose relative py-1.5 text-sm text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", children: [offset !== upperOffset ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", className: "absolute -top-1.5 start-0 size-4 rtl:-scale-x-100", children: _jsx("line", { x1: upperOffset, y1: "0", x2: offset, y2: "12", className: "stroke-fd-foreground/10", strokeWidth: "1" }) })) : null, _jsx("div", { className: cn('absolute inset-y-0 w-px bg-fd-foreground/10', offset !== upperOffset && 'top-1.5', offset !== lowerOffset && 'bottom-1.5'), style: {
73
+ }, className: "prose relative py-1.5 text-sm text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", children: [offset !== upperOffset && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", className: "absolute -top-1.5 start-0 size-4 rtl:-scale-x-100", children: _jsx("line", { x1: upperOffset, y1: "0", x2: offset, y2: "12", className: "stroke-fd-foreground/10", strokeWidth: "1" }) })), _jsx("div", { className: cn('absolute inset-y-0 w-px bg-fd-foreground/10', offset !== upperOffset && 'top-1.5', offset !== lowerOffset && 'bottom-1.5'), style: {
75
74
  insetInlineStart: offset,
76
75
  } }), item.title] }));
77
76
  }
@@ -0,0 +1,3 @@
1
+ import { type ComponentProps } from 'react';
2
+ export declare function TOCItems({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=default.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../src/components/toc/default.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAU,MAAM,OAAO,CAAC;AAIpD,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAgC3E"}
@@ -1,22 +1,11 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
- import * as Primitive from 'fumadocs-core/toc';
4
- import { createContext, useContext, useRef } from 'react';
5
- import { cn } from '../../utils/cn.js';
6
3
  import { useI18n } from '../../contexts/i18n.js';
7
- import { TocThumb } from '../../components/layout/toc-thumb.js';
4
+ import { cn } from '../../utils/cn.js';
8
5
  import { mergeRefs } from '../../utils/merge-refs.js';
9
- const TOCContext = createContext([]);
10
- export function useTOCItems() {
11
- return useContext(TOCContext);
12
- }
13
- export function TOCProvider({ toc, children, ...props }) {
14
- return (_jsx(TOCContext, { value: toc, children: _jsx(Primitive.AnchorProvider, { toc: toc, ...props, children: children }) }));
15
- }
16
- export function TOCScrollArea({ ref, className, ...props }) {
17
- const viewRef = useRef(null);
18
- return (_jsx("div", { ref: mergeRefs(viewRef, ref), className: cn('relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] [mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3', className), ...props, children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: props.children }) }));
19
- }
6
+ import { useRef } from 'react';
7
+ import { useTOCItems, TocThumb } from './index.js';
8
+ import * as Primitive from 'fumadocs-core/toc';
20
9
  export function TOCItems({ ref, className, ...props }) {
21
10
  const containerRef = useRef(null);
22
11
  const items = useTOCItems();
@@ -26,5 +15,5 @@ export function TOCItems({ ref, className, ...props }) {
26
15
  return (_jsxs(_Fragment, { children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute top-(--fd-top) h-(--fd-height) w-px bg-fd-primary transition-all" }), _jsx("div", { ref: mergeRefs(ref, containerRef), className: cn('flex flex-col border-s border-fd-foreground/10', className), ...props, children: items.map((item) => (_jsx(TOCItem, { item: item }, item.url))) })] }));
27
16
  }
28
17
  function TOCItem({ item }) {
29
- return (_jsx(Primitive.TOCItem, { href: item.url, className: cn('prose py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary', item.depth <= 2 && 'ps-3', item.depth === 3 && 'ps-6', item.depth >= 4 && 'ps-8'), children: item.title }));
18
+ return (_jsx(Primitive.TOCItem, { href: item.url, className: cn('prose py-1.5 text-sm text-fd-muted-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary', item.depth <= 2 && 'ps-3', item.depth === 3 && 'ps-6', item.depth >= 4 && 'ps-8'), children: item.title }));
30
19
  }
@@ -1,7 +1,11 @@
1
1
  import * as Primitive from 'fumadocs-core/toc';
2
- import { type ComponentProps } from 'react';
2
+ import { type ComponentProps, type RefObject } from 'react';
3
3
  export declare function useTOCItems(): Primitive.TOCItemType[];
4
4
  export declare function TOCProvider({ toc, children, ...props }: ComponentProps<typeof Primitive.AnchorProvider>): import("react/jsx-runtime").JSX.Element;
5
5
  export declare function TOCScrollArea({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
6
- export declare function TOCItems({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
7
- //# sourceMappingURL=toc.d.ts.map
6
+ interface RefProps {
7
+ containerRef: RefObject<HTMLElement | null>;
8
+ }
9
+ export declare function TocThumb({ containerRef, ...props }: ComponentProps<'div'> & RefProps): import("react/jsx-runtime").JSX.Element;
10
+ export {};
11
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toc/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,SAAS,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAMf,wBAAgB,WAAW,IAAI,SAAS,CAAC,WAAW,EAAE,CAErD;AAED,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,cAAc,CAAC,2CAQjD;AAED,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAiBvB;AAID,UAAU,QAAQ;IAChB,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC7C;AAED,wBAAgB,QAAQ,CAAC,EACvB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,QAAQ,2CASlC"}
@@ -1,12 +1,26 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useEffect, useEffectEvent, useRef, } from 'react';
3
- import { useActiveAnchors } from 'fumadocs-core/toc';
3
+ import * as Primitive from 'fumadocs-core/toc';
4
+ import { createContext, use, useEffect, useEffectEvent, useRef, } from 'react';
5
+ import { cn } from '../../utils/cn.js';
6
+ import { mergeRefs } from '../../utils/merge-refs.js';
7
+ const TOCContext = createContext([]);
8
+ export function useTOCItems() {
9
+ return use(TOCContext);
10
+ }
11
+ export function TOCProvider({ toc, children, ...props }) {
12
+ return (_jsx(TOCContext, { value: toc, children: _jsx(Primitive.AnchorProvider, { toc: toc, ...props, children: children }) }));
13
+ }
14
+ export function TOCScrollArea({ ref, className, ...props }) {
15
+ const viewRef = useRef(null);
16
+ return (_jsx("div", { ref: mergeRefs(viewRef, ref), className: cn('relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3', className), ...props, children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: props.children }) }));
17
+ }
4
18
  export function TocThumb({ containerRef, ...props }) {
5
19
  const thumbRef = useRef(null);
6
20
  return (_jsxs(_Fragment, { children: [_jsx("div", { ref: thumbRef, role: "none", ...props }), _jsx(Updater, { containerRef: containerRef, thumbRef: thumbRef })] }));
7
21
  }
8
22
  function Updater({ containerRef, thumbRef, }) {
9
- const active = useActiveAnchors();
23
+ const active = Primitive.useActiveAnchors();
10
24
  const onPrint = useEffectEvent(() => {
11
25
  if (!containerRef.current || !thumbRef.current)
12
26
  return;
@@ -31,7 +31,7 @@ export function SearchProvider({ SearchDialog, children, preload = true, options
31
31
  const [isOpen, setIsOpen] = useState(preload ? false : undefined);
32
32
  const onKeyDown = useEffectEvent((e) => {
33
33
  if (hotKey.every((v) => typeof v.key === 'string' ? e.key === v.key : v.key(e))) {
34
- setIsOpen(true);
34
+ setIsOpen((open) => !open);
35
35
  e.preventDefault();
36
36
  }
37
37
  });
@@ -5,7 +5,7 @@ interface TreeContextType {
5
5
  root: MakeRequired<PageTree.Root | PageTree.Folder, '$id'>;
6
6
  full: PageTree.Root;
7
7
  }
8
- export declare function TreeContextProvider(props: {
8
+ export declare function TreeContextProvider({ tree: rawTree, children, }: {
9
9
  tree: PageTree.Root;
10
10
  children: ReactNode;
11
11
  }): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/contexts/tree.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAE,KAAK,SAAS,EAAuC,MAAM,OAAO,CAAC;AAG5E,KAAK,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE5E,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC3D,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;CACrB;AAKD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,2CA8BA;AAED,wBAAgB,WAAW,IAAI,QAAQ,CAAC,IAAI,EAAE,CAE7C;AAED,wBAAgB,cAAc,IAAI,eAAe,CAMhD"}
1
+ {"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/contexts/tree.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAE,KAAK,SAAS,EAAuC,MAAM,OAAO,CAAC;AAG5E,KAAK,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE5E,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC3D,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;CACrB;AAKD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EAAE,OAAO,EACb,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,2CA8BA;AAED,wBAAgB,WAAW,IAAI,QAAQ,CAAC,IAAI,EAAE,CAE7C;AAED,wBAAgB,cAAc,IAAI,eAAe,CAMhD"}
@@ -5,13 +5,13 @@ import { useMemo, useRef, createContext, use } from 'react';
5
5
  import { searchPath } from 'fumadocs-core/breadcrumb';
6
6
  const TreeContext = createContext(null);
7
7
  const PathContext = createContext([]);
8
- export function TreeContextProvider(props) {
8
+ export function TreeContextProvider({ tree: rawTree, children, }) {
9
9
  const nextIdRef = useRef(0);
10
10
  const pathname = usePathname();
11
11
  // I found that object-typed props passed from a RSC will be re-constructed, hence breaking all hooks' dependencies
12
12
  // using the id here to make sure this never happens
13
13
  // eslint-disable-next-line react-hooks/exhaustive-deps
14
- const tree = useMemo(() => props.tree, [props.tree.$id ?? props.tree]);
14
+ const tree = useMemo(() => rawTree, [rawTree.$id ?? rawTree]);
15
15
  const path = useMemo(() => {
16
16
  return (searchPath(tree.children, pathname) ??
17
17
  (tree.fallback ? searchPath(tree.fallback.children, pathname) : null) ??
@@ -19,7 +19,7 @@ export function TreeContextProvider(props) {
19
19
  }, [tree, pathname]);
20
20
  const root = path.findLast((item) => item.type === 'folder' && item.root) ?? tree;
21
21
  root.$id ?? (root.$id = String(nextIdRef.current++));
22
- return (_jsx(TreeContext, { value: useMemo(() => ({ root, full: tree }), [root, tree]), children: _jsx(PathContext, { value: path, children: props.children }) }));
22
+ return (_jsx(TreeContext, { value: useMemo(() => ({ root, full: tree }), [root, tree]), children: _jsx(PathContext, { value: path, children: children }) }));
23
23
  }
24
24
  export function useTreePath() {
25
25
  return use(PathContext);
@@ -1,9 +1,16 @@
1
- import { type ComponentProps } from 'react';
2
- import type { Option } from '../../components/layout/root-toggle.js';
3
- export declare function Navbar(props: ComponentProps<'header'>): import("react/jsx-runtime").JSX.Element;
4
- export declare function LayoutBody(props: ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
1
+ import { type ComponentProps, type ReactNode } from 'react';
2
+ import type { SidebarTab } from '../../utils/get-sidebar-tabs.js';
3
+ export declare const LayoutContext: import("react").Context<{
4
+ isNavTransparent: boolean;
5
+ } | null>;
6
+ export declare function LayoutContextProvider({ navTransparentMode, children, }: {
7
+ navTransparentMode?: 'always' | 'top' | 'none';
8
+ children: ReactNode;
9
+ }): import("react/jsx-runtime").JSX.Element;
10
+ export declare function LayoutHeader(props: ComponentProps<'header'>): import("react/jsx-runtime").JSX.Element;
11
+ export declare function LayoutBody({ className, style, children, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
5
12
  export declare function CollapsibleControl(): import("react/jsx-runtime").JSX.Element;
6
13
  export declare function LayoutTabs({ options, ...props }: ComponentProps<'div'> & {
7
- options: Option[];
14
+ options: SidebarTab[];
8
15
  }): import("react/jsx-runtime").JSX.Element;
9
16
  //# sourceMappingURL=client.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/client.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAOrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAK9D,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAgBrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,2CAsBvD;AAED,wBAAgB,kBAAkB,4CA2BjC;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,2CAuBA"}
1
+ {"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/client.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAG3D,eAAO,MAAM,aAAa;sBACN,OAAO;SACZ,CAAC;AAEhB,wBAAgB,qBAAqB,CAAC,EACpC,kBAA2B,EAC3B,QAAQ,GACT,EAAE;IACD,kBAAkB,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAkBA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAQ3D;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAgCvB;AAED,wBAAgB,kBAAkB,4CAwBjC;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,UAAU,EAAE,CAAC;CACvB,2CA6BA"}
@@ -1,34 +1,46 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { Sidebar as SidebarIcon } from '../../icons.js';
4
- import { useMemo } from 'react';
4
+ import { createContext, use, useMemo, } from 'react';
5
5
  import { cn } from '../../utils/cn.js';
6
6
  import { buttonVariants } from '../../components/ui/button.js';
7
- import { useSidebar } from '../../contexts/sidebar.js';
8
- import { useNav } from '../../contexts/layout.js';
9
- import { SidebarCollapseTrigger } from '../../components/layout/sidebar.js';
10
- import { SearchToggle } from '../../components/layout/search-toggle.js';
7
+ import { useSidebar } from '../../components/sidebar/base.js';
8
+ import { SidebarCollapseTrigger } from './sidebar.js';
9
+ import { SearchToggle } from '../shared/search-toggle.js';
11
10
  import { usePathname } from 'fumadocs-core/framework';
12
11
  import { isTabActive } from '../../utils/is-active.js';
13
12
  import Link from 'fumadocs-core/link';
14
- export function Navbar(props) {
15
- const { isTransparent } = useNav();
16
- return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed top-(--fd-banner-height) left-0 right-(--removed-body-scroll-bar-size,0) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm', !isTransparent && 'bg-fd-background/80', props.className), children: props.children }));
13
+ import { useIsScrollTop } from '../../utils/use-is-scroll-top.js';
14
+ export const LayoutContext = createContext(null);
15
+ export function LayoutContextProvider({ navTransparentMode = 'none', children, }) {
16
+ const isTop = useIsScrollTop({ enabled: navTransparentMode === 'top' }) ?? true;
17
+ const isNavTransparent = navTransparentMode === 'top' ? isTop : navTransparentMode === 'always';
18
+ return (_jsx(LayoutContext, { value: useMemo(() => ({
19
+ isNavTransparent,
20
+ }), [isNavTransparent]), children: children }));
17
21
  }
18
- export function LayoutBody(props) {
22
+ export function LayoutHeader(props) {
23
+ const { isNavTransparent } = use(LayoutContext);
24
+ return (_jsx("header", { "data-transparent": isNavTransparent, ...props, children: props.children }));
25
+ }
26
+ export function LayoutBody({ className, style, children, ...props }) {
19
27
  const { collapsed } = useSidebar();
20
- return (_jsx("main", { id: "nd-docs-layout", ...props, className: cn('flex flex-1 flex-col pt-(--fd-nav-height) transition-[padding] fd-default-layout', !collapsed && 'mx-(--fd-layout-offset)', props.className), style: {
21
- ...props.style,
22
- paddingInlineStart: collapsed
23
- ? 'min(calc(100vw - var(--fd-page-width)), var(--fd-sidebar-width))'
24
- : 'var(--fd-sidebar-width)',
25
- }, children: props.children }));
28
+ return (_jsx("div", { id: "nd-docs-layout", className: cn('grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) [--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: {
29
+ gridTemplate: `"sidebar header toc"
30
+ "sidebar toc-popover toc"
31
+ "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)`,
32
+ '--fd-docs-row-1': 'var(--fd-banner-height, 0px)',
33
+ '--fd-docs-row-2': 'calc(var(--fd-docs-row-1) + var(--fd-header-height))',
34
+ '--fd-docs-row-3': 'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',
35
+ '--fd-sidebar-col': collapsed ? '0px' : 'var(--fd-sidebar-width)',
36
+ gridAutoColumns: 'auto',
37
+ gridAutoRows: 'auto',
38
+ ...style,
39
+ }, ...props, children: children }));
26
40
  }
27
41
  export function CollapsibleControl() {
28
42
  const { collapsed } = useSidebar();
29
- return (_jsxs("div", { className: cn('fixed flex shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 max-md:hidden xl:start-4 max-xl:end-4', !collapsed && 'pointer-events-none opacity-0'), style: {
30
- top: 'calc(var(--fd-banner-height) + var(--fd-tocnav-height) + var(--spacing) * 4)',
31
- }, children: [_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
43
+ return (_jsxs("div", { className: cn('fixed flex top-16 shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 max-md:hidden xl:top-4 xl:start-4 max-xl:end-4', !collapsed && 'pointer-events-none opacity-0'), children: [_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
32
44
  color: 'ghost',
33
45
  size: 'icon-sm',
34
46
  className: 'rounded-lg',
@@ -39,8 +51,5 @@ export function LayoutTabs({ options, ...props }) {
39
51
  const selected = useMemo(() => {
40
52
  return options.findLast((option) => isTabActive(option, pathname));
41
53
  }, [options, pathname]);
42
- return (_jsx("div", { ...props, className: cn('flex flex-row items-end gap-6 overflow-auto', props.className), children: options.map((option) => (_jsx(LayoutTab, { selected: selected === option, option: option }, option.url))) }));
43
- }
44
- function LayoutTab({ option: { title, url, unlisted, props }, selected = false, }) {
45
- return (_jsx(Link, { href: url, ...props, 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', unlisted && !selected && 'hidden', selected && 'border-fd-primary text-fd-primary', props?.className), children: title }));
54
+ return (_jsx("div", { ...props, className: cn('flex flex-row items-end gap-6 overflow-auto [grid-area:main]', props.className), children: options.map((option, i) => (_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 }, i))) }));
46
55
  }
@@ -1,10 +1,10 @@
1
1
  import type * as PageTree from 'fumadocs-core/page-tree';
2
2
  import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
3
- import { type SidebarComponents, type SidebarProps, SidebarTrigger } from '../../components/layout/sidebar.js';
4
- import { type Option } from '../../components/layout/root-toggle.js';
5
- import { type BaseLayoutProps, type LinkItemType } from '../../layouts/shared/index.js';
6
- import { CollapsibleControl, Navbar } from '../../layouts/docs/client.js';
3
+ import { Sidebar } from './sidebar.js';
4
+ import { type BaseLayoutProps } from '../../layouts/shared/index.js';
7
5
  import { type GetSidebarTabsOptions } from '../../utils/get-sidebar-tabs.js';
6
+ import type { SidebarPageTreeComponents } from '../../components/sidebar/page-tree.js';
7
+ import { type SidebarTabWithProps } from '../../components/sidebar/tabs.js';
8
8
  export interface DocsLayoutProps extends BaseLayoutProps {
9
9
  tree: PageTree.Root;
10
10
  sidebar?: SidebarOptions;
@@ -14,14 +14,14 @@ export interface DocsLayoutProps extends BaseLayoutProps {
14
14
  */
15
15
  containerProps?: HTMLAttributes<HTMLDivElement>;
16
16
  }
17
- interface SidebarOptions extends ComponentProps<'aside'>, Pick<SidebarProps, 'defaultOpenLevel' | 'prefetch'> {
17
+ interface SidebarOptions extends ComponentProps<'aside'>, Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {
18
18
  enabled?: boolean;
19
19
  component?: ReactNode;
20
- components?: Partial<SidebarComponents>;
20
+ components?: Partial<SidebarPageTreeComponents>;
21
21
  /**
22
22
  * Root Toggle options
23
23
  */
24
- tabs?: Option[] | GetSidebarTabsOptions | false;
24
+ tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;
25
25
  banner?: ReactNode;
26
26
  footer?: ReactNode;
27
27
  /**
@@ -31,6 +31,6 @@ interface SidebarOptions extends ComponentProps<'aside'>, Pick<SidebarProps, 'de
31
31
  */
32
32
  collapsible?: boolean;
33
33
  }
34
- export declare function DocsLayout({ nav: { transparentMode, ...nav }, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled, ...sidebarProps }, searchToggle, themeSwitch, tabMode, i18n, children, tree, ...props }: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
35
- export { CollapsibleControl, Navbar, SidebarTrigger, type LinkItemType };
34
+ export declare function DocsLayout({ nav: { transparentMode, ...nav }, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled, defaultOpenLevel, prefetch, ...sidebarProps }, searchToggle, themeSwitch, tabMode, i18n, children, tree, ...props }: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
35
+ export {};
36
36
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,OAAO,EAGL,KAAK,iBAAiB,EAWtB,KAAK,YAAY,EACjB,cAAc,EAEf,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,MAAM,EAAc,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,YAAY,EAClB,MAAM,kBAAkB,CAAC;AAK1B,OAAO,EACL,kBAAkB,EAGlB,MAAM,EACP,MAAM,uBAAuB,CAAC;AAS/B,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,UAAU,cACR,SAAQ,cAAc,CAAC,OAAO,CAAC,EAC7B,IAAI,CAAC,YAAY,EAAE,kBAAkB,GAAG,UAAU,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAEhD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAO,EAAE,EACP,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,cAAqB,EAC9B,GAAG,YAAY,EACX,EACN,YAAiB,EACjB,WAAgB,EAChB,OAAgB,EAChB,IAAY,EACZ,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,eAAe,2CA+OjB;AA6CD,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,YAAY,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACzD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,OAAO,EAQR,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,KAAK,eAAe,EAAoB,MAAM,kBAAkB,CAAC;AAoB1E,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,UAAU,cACR,SAAQ,cAAc,CAAC,OAAO,CAAC,EAC7B,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,kBAAkB,GAAG,UAAU,CAAC;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAEhD;;OAEG;IACH,IAAI,CAAC,EAAE,mBAAmB,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAE7D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAO,EAAE,EACP,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,cAAqB,EAC9B,gBAAgB,EAChB,QAAQ,EACR,GAAG,YAAY,EACX,EACN,YAAiB,EACjB,WAAgB,EAChB,OAAgB,EAChB,IAAY,EACZ,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,eAAe,2CA2NjB"}