@fumadocs/base-ui 16.7.3 → 16.7.5
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.
- package/css/generated/docs.css +4 -1
- package/css/generated/flux.css +0 -2
- package/css/generated/notebook.css +3 -1
- package/css/generated/shared.css +8 -15
- package/dist/components/toc/clerk.d.ts +9 -1
- package/dist/components/toc/clerk.js +77 -54
- package/dist/components/toc/default.d.ts +9 -1
- package/dist/components/toc/default.js +27 -18
- package/dist/components/toc/index.d.ts +2 -2
- package/dist/components/toc/index.js +3 -2
- package/dist/layouts/docs/page/slots/toc.js +40 -35
- package/dist/layouts/flux/page/slots/toc.js +20 -18
- package/dist/layouts/notebook/page/slots/toc.js +40 -35
- package/dist/style.css +3 -92
- package/package.json +4 -4
package/css/generated/docs.css
CHANGED
|
@@ -39,7 +39,6 @@
|
|
|
39
39
|
@source inline("[grid-area:toc]");
|
|
40
40
|
@source inline("a");
|
|
41
41
|
@source inline("absolute");
|
|
42
|
-
@source inline("active");
|
|
43
42
|
@source inline("after");
|
|
44
43
|
@source inline("all");
|
|
45
44
|
@source inline("always");
|
|
@@ -223,6 +222,7 @@
|
|
|
223
222
|
@source inline("inset-0");
|
|
224
223
|
@source inline("inset-y-0");
|
|
225
224
|
@source inline("inset-y-2");
|
|
225
|
+
@source inline("instanceof");
|
|
226
226
|
@source inline("interface");
|
|
227
227
|
@source inline("invisible");
|
|
228
228
|
@source inline("isActive");
|
|
@@ -300,6 +300,8 @@
|
|
|
300
300
|
@source inline("of");
|
|
301
301
|
@source inline("on");
|
|
302
302
|
@source inline("onClick");
|
|
303
|
+
@source inline("onClickItem");
|
|
304
|
+
@source inline("onClickOutside");
|
|
303
305
|
@source inline("onOpenChange");
|
|
304
306
|
@source inline("opacity-0");
|
|
305
307
|
@source inline("open");
|
|
@@ -364,6 +366,7 @@
|
|
|
364
366
|
@source inline("searchTrigger");
|
|
365
367
|
@source inline("secondary");
|
|
366
368
|
@source inline("selected");
|
|
369
|
+
@source inline("selectedIdx");
|
|
367
370
|
@source inline("setDate");
|
|
368
371
|
@source inline("setOpen");
|
|
369
372
|
@source inline("shadow-lg");
|
package/css/generated/flux.css
CHANGED
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
@source inline("[grid-area:main]");
|
|
17
17
|
@source inline("a");
|
|
18
18
|
@source inline("absolute");
|
|
19
|
-
@source inline("active");
|
|
20
19
|
@source inline("after");
|
|
21
20
|
@source inline("align");
|
|
22
21
|
@source inline("all");
|
|
@@ -404,7 +403,6 @@
|
|
|
404
403
|
@source inline("under");
|
|
405
404
|
@source inline("url");
|
|
406
405
|
@source inline("use");
|
|
407
|
-
@source inline("useActiveAnchor");
|
|
408
406
|
@source inline("useDocsPage");
|
|
409
407
|
@source inline("useFluxLayout");
|
|
410
408
|
@source inline("useFooterItems");
|
|
@@ -43,7 +43,6 @@
|
|
|
43
43
|
@source inline("[grid-area:toc]");
|
|
44
44
|
@source inline("a");
|
|
45
45
|
@source inline("absolute");
|
|
46
|
-
@source inline("active");
|
|
47
46
|
@source inline("after");
|
|
48
47
|
@source inline("all");
|
|
49
48
|
@source inline("always");
|
|
@@ -240,6 +239,7 @@
|
|
|
240
239
|
@source inline("inset-0");
|
|
241
240
|
@source inline("inset-y-0");
|
|
242
241
|
@source inline("inset-y-2");
|
|
242
|
+
@source inline("instanceof");
|
|
243
243
|
@source inline("interface");
|
|
244
244
|
@source inline("invisible");
|
|
245
245
|
@source inline("isActive");
|
|
@@ -331,6 +331,8 @@
|
|
|
331
331
|
@source inline("of");
|
|
332
332
|
@source inline("on");
|
|
333
333
|
@source inline("onClick");
|
|
334
|
+
@source inline("onClickItem");
|
|
335
|
+
@source inline("onClickOutside");
|
|
334
336
|
@source inline("onOpenChange");
|
|
335
337
|
@source inline("onPointerEnter");
|
|
336
338
|
@source inline("onPointerLeave");
|
package/css/generated/shared.css
CHANGED
|
@@ -100,8 +100,7 @@
|
|
|
100
100
|
@source inline("at");
|
|
101
101
|
@source inline("attribute");
|
|
102
102
|
@source inline("await");
|
|
103
|
-
@source inline("
|
|
104
|
-
@source inline("b2");
|
|
103
|
+
@source inline("b0");
|
|
105
104
|
@source inline("backdrop-blur-lg");
|
|
106
105
|
@source inline("backdrop-blur-md");
|
|
107
106
|
@source inline("backdrop-blur-xs");
|
|
@@ -137,7 +136,6 @@
|
|
|
137
136
|
@source inline("bg-fd-primary/10");
|
|
138
137
|
@source inline("bg-fd-secondary");
|
|
139
138
|
@source inline("bg-fd-secondary/50");
|
|
140
|
-
@source inline("bg-linear-to-t");
|
|
141
139
|
@source inline("bg-transparent");
|
|
142
140
|
@source inline("bind");
|
|
143
141
|
@source inline("black");
|
|
@@ -314,7 +312,6 @@
|
|
|
314
312
|
@source inline("defineI18nUI");
|
|
315
313
|
@source inline("defined");
|
|
316
314
|
@source inline("delay");
|
|
317
|
-
@source inline("delay-25");
|
|
318
315
|
@source inline("dependencies");
|
|
319
316
|
@source inline("depends");
|
|
320
317
|
@source inline("deprecated");
|
|
@@ -357,6 +354,7 @@
|
|
|
357
354
|
@source inline("enabled");
|
|
358
355
|
@source inline("end");
|
|
359
356
|
@source inline("end-2");
|
|
357
|
+
@source inline("endIdx");
|
|
360
358
|
@source inline("endpoint");
|
|
361
359
|
@source inline("environment");
|
|
362
360
|
@source inline("equal");
|
|
@@ -458,7 +456,6 @@
|
|
|
458
456
|
@source inline("h-(--accordion-panel-height)");
|
|
459
457
|
@source inline("h-(--collapsible-panel-height)");
|
|
460
458
|
@source inline("h-(--fd-animated-height)");
|
|
461
|
-
@source inline("h-(--fd-height)");
|
|
462
459
|
@source inline("h-(--popup-height)");
|
|
463
460
|
@source inline("h-(--positioner-height)");
|
|
464
461
|
@source inline("h-1.5");
|
|
@@ -493,7 +490,6 @@
|
|
|
493
490
|
@source inline("hover:bg-fd-accent");
|
|
494
491
|
@source inline("hover:bg-fd-accent/80");
|
|
495
492
|
@source inline("hover:bg-fd-primary/80");
|
|
496
|
-
@source inline("hover:delay-0");
|
|
497
493
|
@source inline("hover:text-fd-accent-foreground");
|
|
498
494
|
@source inline("hovered");
|
|
499
495
|
@source inline("hovering");
|
|
@@ -507,7 +503,6 @@
|
|
|
507
503
|
@source inline("iconClass");
|
|
508
504
|
@source inline("id");
|
|
509
505
|
@source inline("idea");
|
|
510
|
-
@source inline("ids");
|
|
511
506
|
@source inline("idx");
|
|
512
507
|
@source inline("if");
|
|
513
508
|
@source inline("if-needed");
|
|
@@ -538,6 +533,7 @@
|
|
|
538
533
|
@source inline("isActive");
|
|
539
534
|
@source inline("isLoading");
|
|
540
535
|
@source inline("isOpen");
|
|
536
|
+
@source inline("isStart");
|
|
541
537
|
@source inline("isTabActive");
|
|
542
538
|
@source inline("isWindows");
|
|
543
539
|
@source inline("it");
|
|
@@ -561,6 +557,7 @@
|
|
|
561
557
|
@source inline("languages");
|
|
562
558
|
@source inline("last:pb-0");
|
|
563
559
|
@source inline("last:rounded-b-xl");
|
|
560
|
+
@source inline("lastInactiveIdx");
|
|
564
561
|
@source inline("lastUpdate");
|
|
565
562
|
@source inline("layer");
|
|
566
563
|
@source inline("layout");
|
|
@@ -720,6 +717,7 @@
|
|
|
720
717
|
@source inline("onPointerLeave");
|
|
721
718
|
@source inline("onPointerMove");
|
|
722
719
|
@source inline("onPrint");
|
|
720
|
+
@source inline("onResize");
|
|
723
721
|
@source inline("onSearchChange");
|
|
724
722
|
@source inline("onSearchChangeCallback");
|
|
725
723
|
@source inline("onSelect");
|
|
@@ -886,7 +884,6 @@
|
|
|
886
884
|
@source inline("round");
|
|
887
885
|
@source inline("rounded-2xl");
|
|
888
886
|
@source inline("rounded-[inherit]");
|
|
889
|
-
@source inline("rounded-e-full");
|
|
890
887
|
@source inline("rounded-full");
|
|
891
888
|
@source inline("rounded-lg");
|
|
892
889
|
@source inline("rounded-md");
|
|
@@ -904,6 +901,7 @@
|
|
|
904
901
|
@source inline("scroll-m-20");
|
|
905
902
|
@source inline("scroll-m-24");
|
|
906
903
|
@source inline("scroll-m-28");
|
|
904
|
+
@source inline("scroll-m-4");
|
|
907
905
|
@source inline("scrollIntoView");
|
|
908
906
|
@source inline("scrollMode");
|
|
909
907
|
@source inline("scrollY");
|
|
@@ -977,6 +975,7 @@
|
|
|
977
975
|
@source inline("stars");
|
|
978
976
|
@source inline("start-3");
|
|
979
977
|
@source inline("start-6");
|
|
978
|
+
@source inline("startIdx");
|
|
980
979
|
@source inline("state");
|
|
981
980
|
@source inline("static");
|
|
982
981
|
@source inline("sticky");
|
|
@@ -997,11 +996,9 @@
|
|
|
997
996
|
@source inline("supposed");
|
|
998
997
|
@source inline("sure");
|
|
999
998
|
@source inline("svg");
|
|
1000
|
-
@source inline("svgRef");
|
|
1001
999
|
@source inline("switch");
|
|
1002
1000
|
@source inline("system");
|
|
1003
1001
|
@source inline("t");
|
|
1004
|
-
@source inline("t2");
|
|
1005
1002
|
@source inline("tab");
|
|
1006
1003
|
@source inline("tabIndex");
|
|
1007
1004
|
@source inline("table");
|
|
@@ -1056,7 +1053,6 @@
|
|
|
1056
1053
|
@source inline("tocNoHeadings");
|
|
1057
1054
|
@source inline("toolbar");
|
|
1058
1055
|
@source inline("top");
|
|
1059
|
-
@source inline("top-(--fd-top)");
|
|
1060
1056
|
@source inline("top-0");
|
|
1061
1057
|
@source inline("top-1.5");
|
|
1062
1058
|
@source inline("top-1/2");
|
|
@@ -1070,13 +1066,11 @@
|
|
|
1070
1066
|
@source inline("transition-[height]");
|
|
1071
1067
|
@source inline("transition-[opacity,transform,translate]");
|
|
1072
1068
|
@source inline("transition-[opacity,transform,width,height,scale,translate]");
|
|
1073
|
-
@source inline("transition-[top,height]");
|
|
1074
1069
|
@source inline("transition-all");
|
|
1075
1070
|
@source inline("transition-colors");
|
|
1076
1071
|
@source inline("transition-opacity");
|
|
1077
1072
|
@source inline("transition-transform");
|
|
1078
1073
|
@source inline("translate");
|
|
1079
|
-
@source inline("translate-y-1/2");
|
|
1080
1074
|
@source inline("translations");
|
|
1081
1075
|
@source inline("transparent");
|
|
1082
1076
|
@source inline("tree");
|
|
@@ -1108,12 +1102,12 @@
|
|
|
1108
1102
|
@source inline("urls");
|
|
1109
1103
|
@source inline("usage");
|
|
1110
1104
|
@source inline("use");
|
|
1111
|
-
@source inline("useActiveAnchors");
|
|
1112
1105
|
@source inline("useCopyButton");
|
|
1113
1106
|
@source inline("useDocsSearch");
|
|
1114
1107
|
@source inline("useI18n");
|
|
1115
1108
|
@source inline("useId");
|
|
1116
1109
|
@source inline("useIsDocsLayout");
|
|
1110
|
+
@source inline("useItems");
|
|
1117
1111
|
@source inline("useMediaQuery");
|
|
1118
1112
|
@source inline("useMemo");
|
|
1119
1113
|
@source inline("useOnChange");
|
|
@@ -1142,7 +1136,6 @@
|
|
|
1142
1136
|
@source inline("variants");
|
|
1143
1137
|
@source inline("vertical");
|
|
1144
1138
|
@source inline("via");
|
|
1145
|
-
@source inline("via-fd-primary");
|
|
1146
1139
|
@source inline("viewBox");
|
|
1147
1140
|
@source inline("viewRef");
|
|
1148
1141
|
@source inline("viewport");
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ComponentProps } from "react";
|
|
2
2
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import * as Primitive from "fumadocs-core/toc";
|
|
3
4
|
|
|
4
5
|
//#region src/components/toc/clerk.d.ts
|
|
5
6
|
declare function TOCItems({
|
|
@@ -7,5 +8,12 @@ declare function TOCItems({
|
|
|
7
8
|
className,
|
|
8
9
|
...props
|
|
9
10
|
}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
|
|
11
|
+
declare function TOCEmpty(): react_jsx_runtime0.JSX.Element;
|
|
12
|
+
declare function TOCItem({
|
|
13
|
+
item,
|
|
14
|
+
...props
|
|
15
|
+
}: Primitive.TOCItemProps & {
|
|
16
|
+
item: Primitive.TOCItemType;
|
|
17
|
+
}): react_jsx_runtime0.JSX.Element;
|
|
10
18
|
//#endregion
|
|
11
|
-
export { TOCItems };
|
|
19
|
+
export { TOCEmpty, TOCItem, TOCItems };
|
|
@@ -1,59 +1,58 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
|
|
2
3
|
import { useI18n } from "../../contexts/i18n.js";
|
|
3
4
|
import { cn } from "../../utils/cn.js";
|
|
4
5
|
import { mergeRefs } from "../../utils/merge-refs.js";
|
|
5
6
|
import { TocThumb, useTOCItems } from "./index.js";
|
|
6
|
-
import { useEffect, useRef, useState } from "react";
|
|
7
|
+
import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
|
|
7
8
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
8
9
|
import * as Primitive from "fumadocs-core/toc";
|
|
9
10
|
//#region src/components/toc/clerk.tsx
|
|
11
|
+
var clerk_exports = /* @__PURE__ */ __exportAll({
|
|
12
|
+
TOCEmpty: () => TOCEmpty,
|
|
13
|
+
TOCItem: () => TOCItem,
|
|
14
|
+
TOCItems: () => TOCItems
|
|
15
|
+
});
|
|
10
16
|
function TOCItems({ ref, className, ...props }) {
|
|
11
17
|
const containerRef = useRef(null);
|
|
12
18
|
const items = useTOCItems();
|
|
13
|
-
const { text } = useI18n();
|
|
14
|
-
const svgRef = useRef(null);
|
|
15
19
|
const [svg, setSvg] = useState();
|
|
16
|
-
|
|
17
|
-
if (!containerRef.current) return;
|
|
20
|
+
const onResize = useEffectEvent(() => {
|
|
18
21
|
const container = containerRef.current;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
w += 1;
|
|
37
|
-
if (!svgRef.current || svgRef.current.d !== d) {
|
|
38
|
-
svgRef.current = {
|
|
39
|
-
d,
|
|
40
|
-
width: w,
|
|
41
|
-
height: h
|
|
42
|
-
};
|
|
43
|
-
setSvg(svgRef.current);
|
|
22
|
+
if (!container || container.clientHeight === 0) return;
|
|
23
|
+
let w = 0;
|
|
24
|
+
let h = 0;
|
|
25
|
+
let b0 = 0;
|
|
26
|
+
let d = "";
|
|
27
|
+
for (let i = 0; i < items.length; i++) {
|
|
28
|
+
const element = container.querySelector(`a[href="#${items[i].url.slice(1)}"]`);
|
|
29
|
+
if (!element) continue;
|
|
30
|
+
const styles = getComputedStyle(element);
|
|
31
|
+
const offset = getLineOffset(items[i].depth) + 1, top = element.offsetTop + parseFloat(styles.paddingTop), bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
|
|
32
|
+
w = Math.max(offset, w);
|
|
33
|
+
h = Math.max(h, bottom);
|
|
34
|
+
if (i === 0) d += ` M${offset} ${top} L${offset} ${bottom}`;
|
|
35
|
+
else {
|
|
36
|
+
const pOffset = getLineOffset(items[i - 1].depth) + 1;
|
|
37
|
+
d += ` C ${pOffset} ${top - 4} ${offset} ${b0 + 4} ${offset} ${top} L${offset} ${bottom}`;
|
|
44
38
|
}
|
|
39
|
+
b0 = bottom;
|
|
45
40
|
}
|
|
41
|
+
setSvg({
|
|
42
|
+
d,
|
|
43
|
+
width: w + 1,
|
|
44
|
+
height: h
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
if (!containerRef.current) return;
|
|
46
49
|
const observer = new ResizeObserver(onResize);
|
|
47
50
|
onResize();
|
|
48
|
-
observer.observe(
|
|
51
|
+
observer.observe(containerRef.current);
|
|
49
52
|
return () => {
|
|
50
53
|
observer.disconnect();
|
|
51
54
|
};
|
|
52
|
-
}, [
|
|
53
|
-
if (items.length === 0) return /* @__PURE__ */ jsx("div", {
|
|
54
|
-
className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
|
|
55
|
-
children: text.tocNoHeadings
|
|
56
|
-
});
|
|
55
|
+
}, []);
|
|
57
56
|
return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs(TocThumb, {
|
|
58
57
|
containerRef,
|
|
59
58
|
className: "absolute top-0 inset-s-0",
|
|
@@ -64,7 +63,7 @@ function TOCItems({ ref, className, ...props }) {
|
|
|
64
63
|
children: [/* @__PURE__ */ jsx("svg", {
|
|
65
64
|
xmlns: "http://www.w3.org/2000/svg",
|
|
66
65
|
viewBox: `0 0 ${svg.width} ${svg.height}`,
|
|
67
|
-
className: "absolute
|
|
66
|
+
className: "absolute transition-[clip-path]",
|
|
68
67
|
style: {
|
|
69
68
|
width: svg.width,
|
|
70
69
|
height: svg.height,
|
|
@@ -80,22 +79,33 @@ function TOCItems({ ref, className, ...props }) {
|
|
|
80
79
|
}), /* @__PURE__ */ jsx("div", {
|
|
81
80
|
ref: mergeRefs(containerRef, ref),
|
|
82
81
|
className: cn("flex flex-col", className),
|
|
83
|
-
...props
|
|
84
|
-
children: items.map((item, i) => /* @__PURE__ */ jsx(TOCItem, {
|
|
85
|
-
item,
|
|
86
|
-
upper: items[i - 1]?.depth,
|
|
87
|
-
lower: items[i + 1]?.depth
|
|
88
|
-
}, item.url))
|
|
82
|
+
...props
|
|
89
83
|
})] });
|
|
90
84
|
}
|
|
85
|
+
function TOCEmpty() {
|
|
86
|
+
const { text } = useI18n();
|
|
87
|
+
return /* @__PURE__ */ jsx("div", {
|
|
88
|
+
className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
|
|
89
|
+
children: text.tocNoHeadings
|
|
90
|
+
});
|
|
91
|
+
}
|
|
91
92
|
function ThumbBox() {
|
|
92
|
-
const items =
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
93
|
+
const items = Primitive.useItems();
|
|
94
|
+
let startIdx = -1;
|
|
95
|
+
let endIdx = -1;
|
|
96
|
+
let lastInactiveIdx = -1;
|
|
97
|
+
for (let i = 0; i < items.length; i++) {
|
|
98
|
+
const item = items[i];
|
|
99
|
+
if (item.active) {
|
|
100
|
+
if (startIdx === -1) startIdx = i;
|
|
101
|
+
endIdx = i;
|
|
102
|
+
} else if (lastInactiveIdx === -1 || items[lastInactiveIdx].t < item.t) lastInactiveIdx = i;
|
|
103
|
+
}
|
|
104
|
+
if (startIdx === -1) return;
|
|
105
|
+
const isStart = endIdx < lastInactiveIdx;
|
|
96
106
|
return /* @__PURE__ */ jsx("div", {
|
|
97
|
-
className: "absolute size-1 bg-fd-primary rounded-full
|
|
98
|
-
style: { translate: `calc(${getLineOffset(
|
|
107
|
+
className: "absolute size-1 bg-fd-primary rounded-full transition-transform",
|
|
108
|
+
style: { translate: `calc(${getLineOffset(items[isStart ? startIdx : endIdx].original.depth)}px - 1.25px) ${isStart ? "var(--fd-top)" : "calc(var(--fd-top) + var(--fd-height))"}` }
|
|
99
109
|
});
|
|
100
110
|
}
|
|
101
111
|
function getItemOffset(depth) {
|
|
@@ -108,12 +118,25 @@ function getLineOffset(depth) {
|
|
|
108
118
|
if (depth === 3) return 10;
|
|
109
119
|
return 20;
|
|
110
120
|
}
|
|
111
|
-
function TOCItem({ item,
|
|
112
|
-
const
|
|
121
|
+
function TOCItem({ item, ...props }) {
|
|
122
|
+
const items = useTOCItems();
|
|
123
|
+
const { lowerOffset, offset, upperOffset } = useMemo(() => {
|
|
124
|
+
const index = items.indexOf(item);
|
|
125
|
+
const offset = getLineOffset(item.depth);
|
|
126
|
+
return {
|
|
127
|
+
offset,
|
|
128
|
+
upperOffset: index > 0 ? getLineOffset(items[index - 1].depth) : offset,
|
|
129
|
+
lowerOffset: index + 1 < items.length ? getLineOffset(items[index + 1].depth) : offset
|
|
130
|
+
};
|
|
131
|
+
}, [items, item]);
|
|
113
132
|
return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
|
|
114
133
|
href: item.url,
|
|
115
|
-
|
|
116
|
-
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",
|
|
134
|
+
...props,
|
|
135
|
+
className: cn("prose relative py-1.5 text-sm scroll-m-4 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", props.className),
|
|
136
|
+
style: {
|
|
137
|
+
paddingInlineStart: getItemOffset(item.depth),
|
|
138
|
+
...props.style
|
|
139
|
+
},
|
|
117
140
|
children: [
|
|
118
141
|
offset !== upperOffset && /* @__PURE__ */ jsx("svg", {
|
|
119
142
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -141,4 +164,4 @@ function TOCItem({ item, upper = item.depth, lower = item.depth }) {
|
|
|
141
164
|
});
|
|
142
165
|
}
|
|
143
166
|
//#endregion
|
|
144
|
-
export { TOCItems };
|
|
167
|
+
export { TOCEmpty, TOCItem, TOCItems, clerk_exports };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ComponentProps } from "react";
|
|
2
2
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import * as Primitive from "fumadocs-core/toc";
|
|
3
4
|
|
|
4
5
|
//#region src/components/toc/default.d.ts
|
|
5
6
|
declare function TOCItems({
|
|
@@ -7,5 +8,12 @@ declare function TOCItems({
|
|
|
7
8
|
className,
|
|
8
9
|
...props
|
|
9
10
|
}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
|
|
11
|
+
declare function TOCEmpty(): react_jsx_runtime0.JSX.Element;
|
|
12
|
+
declare function TOCItem({
|
|
13
|
+
item,
|
|
14
|
+
...props
|
|
15
|
+
}: Primitive.TOCItemProps & {
|
|
16
|
+
item: Primitive.TOCItemType;
|
|
17
|
+
}): react_jsx_runtime0.JSX.Element;
|
|
10
18
|
//#endregion
|
|
11
|
-
export { TOCItems };
|
|
19
|
+
export { TOCEmpty, TOCItem, TOCItems };
|
|
@@ -1,38 +1,47 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
|
|
2
3
|
import { useI18n } from "../../contexts/i18n.js";
|
|
3
4
|
import { cn } from "../../utils/cn.js";
|
|
4
5
|
import { mergeRefs } from "../../utils/merge-refs.js";
|
|
5
|
-
import { TocThumb
|
|
6
|
+
import { TocThumb } from "./index.js";
|
|
6
7
|
import { useRef } from "react";
|
|
7
|
-
import {
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
9
|
import * as Primitive from "fumadocs-core/toc";
|
|
9
10
|
//#region src/components/toc/default.tsx
|
|
11
|
+
var default_exports = /* @__PURE__ */ __exportAll({
|
|
12
|
+
TOCEmpty: () => TOCEmpty,
|
|
13
|
+
TOCItem: () => TOCItem,
|
|
14
|
+
TOCItems: () => TOCItems
|
|
15
|
+
});
|
|
10
16
|
function TOCItems({ ref, className, ...props }) {
|
|
11
17
|
const containerRef = useRef(null);
|
|
12
|
-
|
|
18
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
19
|
+
className: "relative",
|
|
20
|
+
children: [/* @__PURE__ */ jsx(TocThumb, {
|
|
21
|
+
containerRef,
|
|
22
|
+
className: "absolute inset-y-0 inset-s-0 bg-fd-primary w-px transition-[clip-path]",
|
|
23
|
+
style: { clipPath: "polygon(0 var(--fd-top), 100% var(--fd-top), 100% calc(var(--fd-top) + var(--fd-height)), 0 calc(var(--fd-top) + var(--fd-height)))" }
|
|
24
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
25
|
+
ref: mergeRefs(ref, containerRef),
|
|
26
|
+
className: cn("flex flex-col border-s border-fd-foreground/10", className),
|
|
27
|
+
...props
|
|
28
|
+
})]
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
function TOCEmpty() {
|
|
13
32
|
const { text } = useI18n();
|
|
14
|
-
|
|
33
|
+
return /* @__PURE__ */ jsx("div", {
|
|
15
34
|
className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
|
|
16
35
|
children: text.tocNoHeadings
|
|
17
36
|
});
|
|
18
|
-
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(TocThumb, {
|
|
19
|
-
containerRef,
|
|
20
|
-
align: "center",
|
|
21
|
-
className: "absolute top-(--fd-top) h-(--fd-height) w-px bg-linear-to-t via-fd-primary transition-[top,height] delay-25",
|
|
22
|
-
children: [/* @__PURE__ */ jsx("div", { className: "absolute top-0 -translate-y-1/2 size-1 rounded-e-full bg-fd-primary" }), /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 translate-y-1/2 size-1 rounded-e-full bg-fd-primary" })]
|
|
23
|
-
}), /* @__PURE__ */ jsx("div", {
|
|
24
|
-
ref: mergeRefs(ref, containerRef),
|
|
25
|
-
className: cn("flex flex-col border-s border-fd-foreground/10", className),
|
|
26
|
-
...props,
|
|
27
|
-
children: items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))
|
|
28
|
-
})] });
|
|
29
37
|
}
|
|
30
|
-
function TOCItem({ item }) {
|
|
38
|
+
function TOCItem({ item, ...props }) {
|
|
31
39
|
return /* @__PURE__ */ jsx(Primitive.TOCItem, {
|
|
32
40
|
href: item.url,
|
|
33
|
-
|
|
41
|
+
...props,
|
|
42
|
+
className: cn("prose py-1.5 text-sm text-fd-muted-foreground scroll-m-4 transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground", item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8", props.className),
|
|
34
43
|
children: item.title
|
|
35
44
|
});
|
|
36
45
|
}
|
|
37
46
|
//#endregion
|
|
38
|
-
export { TOCItems };
|
|
47
|
+
export { TOCEmpty, TOCItem, TOCItems, default_exports };
|
|
@@ -5,7 +5,7 @@ import * as Primitive from "fumadocs-core/toc";
|
|
|
5
5
|
//#region src/components/toc/index.d.ts
|
|
6
6
|
declare function useTOCItems(): Primitive.TOCItemType[];
|
|
7
7
|
type TOCProviderProps = Primitive.AnchorProviderProps;
|
|
8
|
-
declare const useActiveAnchor: typeof Primitive.useActiveAnchor, useActiveAnchors: typeof Primitive.useActiveAnchors;
|
|
8
|
+
declare const useActiveAnchor: typeof Primitive.useActiveAnchor, useActiveAnchors: typeof Primitive.useActiveAnchors, useItems: typeof Primitive.useItems;
|
|
9
9
|
declare function TOCProvider({
|
|
10
10
|
toc,
|
|
11
11
|
children,
|
|
@@ -26,4 +26,4 @@ declare function TocThumb({
|
|
|
26
26
|
...props
|
|
27
27
|
}: TocThumbProps): react_jsx_runtime0.JSX.Element;
|
|
28
28
|
//#endregion
|
|
29
|
-
export { TOCProvider, TOCProviderProps, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useTOCItems };
|
|
29
|
+
export { TOCProvider, TOCProviderProps, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };
|
|
@@ -13,13 +13,14 @@ var toc_exports = /* @__PURE__ */ __exportAll({
|
|
|
13
13
|
TocThumb: () => TocThumb,
|
|
14
14
|
useActiveAnchor: () => useActiveAnchor,
|
|
15
15
|
useActiveAnchors: () => useActiveAnchors,
|
|
16
|
+
useItems: () => useItems,
|
|
16
17
|
useTOCItems: () => useTOCItems
|
|
17
18
|
});
|
|
18
19
|
const TOCContext = createContext([]);
|
|
19
20
|
function useTOCItems() {
|
|
20
21
|
return use(TOCContext);
|
|
21
22
|
}
|
|
22
|
-
const { useActiveAnchor, useActiveAnchors } = Primitive;
|
|
23
|
+
const { useActiveAnchor, useActiveAnchors, useItems } = Primitive;
|
|
23
24
|
function TOCProvider({ toc, children, ...props }) {
|
|
24
25
|
return /* @__PURE__ */ jsx(TOCContext, {
|
|
25
26
|
value: toc,
|
|
@@ -103,4 +104,4 @@ function TocThumb({ containerRef, align = "end", ...props }) {
|
|
|
103
104
|
});
|
|
104
105
|
}
|
|
105
106
|
//#endregion
|
|
106
|
-
export { TOCProvider, TOCScrollArea, TocThumb, toc_exports, useActiveAnchor, useActiveAnchors, useTOCItems };
|
|
107
|
+
export { TOCProvider, TOCScrollArea, TocThumb, toc_exports, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { I18nLabel, useI18n } from "../../../../contexts/i18n.js";
|
|
3
3
|
import { cn } from "../../../../utils/cn.js";
|
|
4
|
-
import { TOCProvider as TOCProvider$1, TOCScrollArea,
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
4
|
+
import { TOCProvider as TOCProvider$1, TOCScrollArea, useItems, useTOCItems } from "../../../../components/toc/index.js";
|
|
5
|
+
import { default_exports } from "../../../../components/toc/default.js";
|
|
6
|
+
import { clerk_exports } from "../../../../components/toc/clerk.js";
|
|
7
7
|
import { useTreePath } from "../../../../contexts/tree.js";
|
|
8
8
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
|
|
9
9
|
import { useDocsLayout } from "../../client.js";
|
|
@@ -15,7 +15,9 @@ import { ChevronDown, Text } from "lucide-react";
|
|
|
15
15
|
function TOCProvider(props) {
|
|
16
16
|
return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
|
|
17
17
|
}
|
|
18
|
-
function TOC({ container, header, footer, style }) {
|
|
18
|
+
function TOC({ container, header, footer, style = "normal" }) {
|
|
19
|
+
const items = useTOCItems();
|
|
20
|
+
const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
|
|
19
21
|
return /* @__PURE__ */ jsxs("div", {
|
|
20
22
|
id: "nd-toc",
|
|
21
23
|
...container,
|
|
@@ -27,37 +29,29 @@ function TOC({ container, header, footer, style }) {
|
|
|
27
29
|
className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground",
|
|
28
30
|
children: [/* @__PURE__ */ jsx(Text, { className: "size-4" }), /* @__PURE__ */ jsx(I18nLabel, { label: "toc" })]
|
|
29
31
|
}),
|
|
30
|
-
/* @__PURE__ */ jsx(TOCScrollArea, { children:
|
|
32
|
+
/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
|
|
31
33
|
footer
|
|
32
34
|
]
|
|
33
35
|
});
|
|
34
36
|
}
|
|
35
37
|
const TocPopoverContext = createContext(null);
|
|
36
|
-
function TOCPopover({ container, trigger, content, header, footer, style }) {
|
|
37
|
-
|
|
38
|
-
...container,
|
|
39
|
-
children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsx(PageTOCPopoverContent, {
|
|
40
|
-
...content,
|
|
41
|
-
children: /* @__PURE__ */ jsxs("div", { children: [
|
|
42
|
-
header,
|
|
43
|
-
/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
|
|
44
|
-
footer
|
|
45
|
-
] })
|
|
46
|
-
})]
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
function PageTOCPopover({ className, children, ...rest }) {
|
|
38
|
+
function TOCPopover({ container, trigger, content, header, footer, style = "normal" }) {
|
|
39
|
+
const items = useTOCItems();
|
|
50
40
|
const ref = useRef(null);
|
|
51
41
|
const [open, setOpen] = useState(false);
|
|
52
42
|
const { isNavTransparent } = useDocsLayout();
|
|
53
|
-
const
|
|
54
|
-
|
|
43
|
+
const { TOCItems, TOCItem, TOCEmpty } = style === "clerk" ? clerk_exports : default_exports;
|
|
44
|
+
const onClickOutside = useEffectEvent((e) => {
|
|
45
|
+
if (!open || !(e.target instanceof HTMLElement)) return;
|
|
55
46
|
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
|
|
56
47
|
});
|
|
48
|
+
const onClickItem = () => {
|
|
49
|
+
setOpen(false);
|
|
50
|
+
};
|
|
57
51
|
useEffect(() => {
|
|
58
|
-
window.addEventListener("click",
|
|
52
|
+
window.addEventListener("click", onClickOutside);
|
|
59
53
|
return () => {
|
|
60
|
-
window.removeEventListener("click",
|
|
54
|
+
window.removeEventListener("click", onClickOutside);
|
|
61
55
|
};
|
|
62
56
|
}, []);
|
|
63
57
|
return /* @__PURE__ */ jsx(TocPopoverContext, {
|
|
@@ -69,12 +63,22 @@ function PageTOCPopover({ className, children, ...rest }) {
|
|
|
69
63
|
open,
|
|
70
64
|
onOpenChange: setOpen,
|
|
71
65
|
"data-toc-popover": "",
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
children: /* @__PURE__ */
|
|
66
|
+
...container,
|
|
67
|
+
className: cn("sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", container?.className),
|
|
68
|
+
children: /* @__PURE__ */ jsxs("header", {
|
|
75
69
|
ref,
|
|
76
70
|
className: cn("border-b backdrop-blur-sm transition-colors", (!isNavTransparent || open) && "bg-fd-background/80", open && "shadow-lg"),
|
|
77
|
-
children
|
|
71
|
+
children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsxs(PageTOCPopoverContent, {
|
|
72
|
+
...content,
|
|
73
|
+
children: [
|
|
74
|
+
header,
|
|
75
|
+
/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, {
|
|
76
|
+
item,
|
|
77
|
+
onClick: onClickItem
|
|
78
|
+
}, item.url))] }) }),
|
|
79
|
+
footer
|
|
80
|
+
]
|
|
81
|
+
})]
|
|
78
82
|
})
|
|
79
83
|
})
|
|
80
84
|
});
|
|
@@ -82,18 +86,17 @@ function PageTOCPopover({ className, children, ...rest }) {
|
|
|
82
86
|
function PageTOCPopoverTrigger({ className, ...props }) {
|
|
83
87
|
const { text } = useI18n();
|
|
84
88
|
const { open } = use(TocPopoverContext);
|
|
85
|
-
const items =
|
|
86
|
-
const
|
|
87
|
-
const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
|
|
89
|
+
const items = useItems();
|
|
90
|
+
const selectedIdx = items.findIndex((item) => item.active);
|
|
88
91
|
const path = useTreePath().at(-1);
|
|
89
|
-
const showItem =
|
|
92
|
+
const showItem = selectedIdx !== -1 && !open;
|
|
90
93
|
return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
|
|
91
94
|
className: cn("flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6", className),
|
|
92
95
|
"data-toc-popover-trigger": "",
|
|
93
96
|
...props,
|
|
94
97
|
children: [
|
|
95
98
|
/* @__PURE__ */ jsx(ProgressCircle, {
|
|
96
|
-
value: (
|
|
99
|
+
value: (selectedIdx + 1) / Math.max(1, items.length),
|
|
97
100
|
max: 1,
|
|
98
101
|
className: cn("shrink-0", open && "text-fd-primary")
|
|
99
102
|
}),
|
|
@@ -104,7 +107,7 @@ function PageTOCPopoverTrigger({ className, ...props }) {
|
|
|
104
107
|
children: path?.name ?? text.toc
|
|
105
108
|
}), /* @__PURE__ */ jsx("span", {
|
|
106
109
|
className: cn("truncate transition-[opacity,translate]", !showItem && "opacity-0 translate-y-full pointer-events-none"),
|
|
107
|
-
children: items[
|
|
110
|
+
children: items[selectedIdx]?.original.title
|
|
108
111
|
})]
|
|
109
112
|
}),
|
|
110
113
|
/* @__PURE__ */ jsx(ChevronDown, { className: cn("shrink-0 transition-transform mx-0.5", open && "rotate-180") })
|
|
@@ -153,8 +156,10 @@ function PageTOCPopoverContent(props) {
|
|
|
153
156
|
return /* @__PURE__ */ jsx(CollapsibleContent, {
|
|
154
157
|
"data-toc-popover-content": "",
|
|
155
158
|
...props,
|
|
156
|
-
|
|
157
|
-
|
|
159
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
160
|
+
className: "flex flex-col px-4 max-h-[50vh] md:px-6",
|
|
161
|
+
children: props.children
|
|
162
|
+
})
|
|
158
163
|
});
|
|
159
164
|
}
|
|
160
165
|
//#endregion
|
|
@@ -1,30 +1,31 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useI18n } from "../../../../contexts/i18n.js";
|
|
3
3
|
import { cn } from "../../../../utils/cn.js";
|
|
4
|
-
import { TOCScrollArea, toc_exports, useTOCItems } from "../../../../components/toc/index.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
4
|
+
import { TOCScrollArea, toc_exports, useItems, useTOCItems } from "../../../../components/toc/index.js";
|
|
5
|
+
import { default_exports } from "../../../../components/toc/default.js";
|
|
6
|
+
import { clerk_exports } from "../../../../components/toc/clerk.js";
|
|
7
7
|
import { useTreePath } from "../../../../contexts/tree.js";
|
|
8
8
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
|
|
9
9
|
import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
|
|
10
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
11
|
import { ChevronDown } from "lucide-react";
|
|
12
|
-
import { useActiveAnchor } from "fumadocs-core/toc";
|
|
13
12
|
import { createPortal } from "react-dom";
|
|
14
13
|
import { AnimatePresence, motion } from "motion/react";
|
|
15
14
|
//#region src/layouts/flux/page/slots/toc.tsx
|
|
16
15
|
const TocPopoverContext = createContext(null);
|
|
17
16
|
const { TOCProvider } = toc_exports;
|
|
18
|
-
function TOC({ container, trigger, content, header, footer, style }) {
|
|
17
|
+
function TOC({ container, trigger, content, header, footer, style = "normal" }) {
|
|
18
|
+
const items = useTOCItems();
|
|
19
|
+
const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
|
|
19
20
|
return /* @__PURE__ */ jsxs(PageTOCPopover, {
|
|
20
21
|
...container,
|
|
21
|
-
children: [/* @__PURE__ */
|
|
22
|
+
children: [/* @__PURE__ */ jsxs(PageTOCPopoverContent, {
|
|
22
23
|
...content,
|
|
23
|
-
children:
|
|
24
|
+
children: [
|
|
24
25
|
header,
|
|
25
|
-
/* @__PURE__ */ jsx(TOCScrollArea, { children:
|
|
26
|
+
/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
|
|
26
27
|
footer
|
|
27
|
-
]
|
|
28
|
+
]
|
|
28
29
|
}), /* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger })]
|
|
29
30
|
});
|
|
30
31
|
}
|
|
@@ -73,9 +74,8 @@ function PageTOCPopoverPhysical({ className, children, ...rest }) {
|
|
|
73
74
|
function PageTOCPopoverTrigger({ className, ...props }) {
|
|
74
75
|
const { text } = useI18n();
|
|
75
76
|
const { open } = use(TocPopoverContext);
|
|
76
|
-
const items =
|
|
77
|
-
const
|
|
78
|
-
const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
|
|
77
|
+
const items = useItems();
|
|
78
|
+
const selectedIdx = items.findIndex((item) => item.active);
|
|
79
79
|
const path = useTreePath().at(-1);
|
|
80
80
|
const spanProps = {
|
|
81
81
|
transition: { duration: .1 },
|
|
@@ -99,16 +99,16 @@ function PageTOCPopoverTrigger({ className, ...props }) {
|
|
|
99
99
|
...props,
|
|
100
100
|
children: [
|
|
101
101
|
/* @__PURE__ */ jsx(ProgressCircle, {
|
|
102
|
-
value: (
|
|
102
|
+
value: (selectedIdx + 1) / Math.max(1, items.length),
|
|
103
103
|
max: 1,
|
|
104
104
|
className: cn("shrink-0", open && "text-fd-primary")
|
|
105
105
|
}),
|
|
106
106
|
/* @__PURE__ */ jsx(AnimatePresence, {
|
|
107
107
|
mode: "wait",
|
|
108
|
-
children: items[
|
|
108
|
+
children: items[selectedIdx] && !open ? /* @__PURE__ */ jsx(motion.span, {
|
|
109
109
|
...spanProps,
|
|
110
|
-
children: items[
|
|
111
|
-
},
|
|
110
|
+
children: items[selectedIdx].original.title
|
|
111
|
+
}, selectedIdx) : path ? /* @__PURE__ */ jsx(motion.span, {
|
|
112
112
|
...spanProps,
|
|
113
113
|
children: path.name
|
|
114
114
|
}, path.$id ?? ":pathId") : /* @__PURE__ */ jsx(motion.span, {
|
|
@@ -162,8 +162,10 @@ function PageTOCPopoverContent(props) {
|
|
|
162
162
|
return /* @__PURE__ */ jsx(CollapsibleContent, {
|
|
163
163
|
"data-toc-popover-content": "",
|
|
164
164
|
...props,
|
|
165
|
-
|
|
166
|
-
|
|
165
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
166
|
+
className: "flex flex-col px-2 max-h-[50vh]",
|
|
167
|
+
children: props.children
|
|
168
|
+
})
|
|
167
169
|
});
|
|
168
170
|
}
|
|
169
171
|
//#endregion
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { I18nLabel, useI18n } from "../../../../contexts/i18n.js";
|
|
3
3
|
import { cn } from "../../../../utils/cn.js";
|
|
4
|
-
import { TOCProvider as TOCProvider$1, TOCScrollArea,
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
4
|
+
import { TOCProvider as TOCProvider$1, TOCScrollArea, useItems, useTOCItems } from "../../../../components/toc/index.js";
|
|
5
|
+
import { default_exports } from "../../../../components/toc/default.js";
|
|
6
|
+
import { clerk_exports } from "../../../../components/toc/clerk.js";
|
|
7
7
|
import { useTreePath } from "../../../../contexts/tree.js";
|
|
8
8
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
|
|
9
9
|
import { useNotebookLayout } from "../../client.js";
|
|
@@ -14,7 +14,9 @@ import { ChevronDown, Text } from "lucide-react";
|
|
|
14
14
|
function TOCProvider(props) {
|
|
15
15
|
return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
|
|
16
16
|
}
|
|
17
|
-
function TOC({ container, header, footer, style }) {
|
|
17
|
+
function TOC({ container, header, footer, style = "normal" }) {
|
|
18
|
+
const items = useTOCItems();
|
|
19
|
+
const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
|
|
18
20
|
return /* @__PURE__ */ jsxs("div", {
|
|
19
21
|
id: "nd-toc",
|
|
20
22
|
...container,
|
|
@@ -26,37 +28,29 @@ function TOC({ container, header, footer, style }) {
|
|
|
26
28
|
className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground",
|
|
27
29
|
children: [/* @__PURE__ */ jsx(Text, { className: "size-4" }), /* @__PURE__ */ jsx(I18nLabel, { label: "toc" })]
|
|
28
30
|
}),
|
|
29
|
-
/* @__PURE__ */ jsx(TOCScrollArea, { children:
|
|
31
|
+
/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))] }) }),
|
|
30
32
|
footer
|
|
31
33
|
]
|
|
32
34
|
});
|
|
33
35
|
}
|
|
34
36
|
const TocPopoverContext = createContext(null);
|
|
35
|
-
function TOCPopover({ container, trigger, content, header, footer, style }) {
|
|
36
|
-
|
|
37
|
-
...container,
|
|
38
|
-
children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsx(PageTOCPopoverContent, {
|
|
39
|
-
...content,
|
|
40
|
-
children: /* @__PURE__ */ jsxs("div", { children: [
|
|
41
|
-
header,
|
|
42
|
-
/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
|
|
43
|
-
footer
|
|
44
|
-
] })
|
|
45
|
-
})]
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
function PageTOCPopover({ className, children, ...rest }) {
|
|
37
|
+
function TOCPopover({ container, trigger, content, header, footer, style = "normal" }) {
|
|
38
|
+
const items = useTOCItems();
|
|
49
39
|
const ref = useRef(null);
|
|
50
40
|
const [open, setOpen] = useState(false);
|
|
51
41
|
const { isNavTransparent } = useNotebookLayout();
|
|
52
|
-
const
|
|
53
|
-
|
|
42
|
+
const { TOCItems, TOCItem, TOCEmpty } = style === "clerk" ? clerk_exports : default_exports;
|
|
43
|
+
const onClickOutside = useEffectEvent((e) => {
|
|
44
|
+
if (!open || !(e.target instanceof HTMLElement)) return;
|
|
54
45
|
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
|
|
55
46
|
});
|
|
47
|
+
const onClickItem = () => {
|
|
48
|
+
setOpen(false);
|
|
49
|
+
};
|
|
56
50
|
useEffect(() => {
|
|
57
|
-
window.addEventListener("click",
|
|
51
|
+
window.addEventListener("click", onClickOutside);
|
|
58
52
|
return () => {
|
|
59
|
-
window.removeEventListener("click",
|
|
53
|
+
window.removeEventListener("click", onClickOutside);
|
|
60
54
|
};
|
|
61
55
|
}, []);
|
|
62
56
|
return /* @__PURE__ */ jsx(TocPopoverContext, {
|
|
@@ -68,12 +62,22 @@ function PageTOCPopover({ className, children, ...rest }) {
|
|
|
68
62
|
open,
|
|
69
63
|
onOpenChange: setOpen,
|
|
70
64
|
"data-toc-popover": "",
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
children: /* @__PURE__ */
|
|
65
|
+
...container,
|
|
66
|
+
className: cn("sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", container?.className),
|
|
67
|
+
children: /* @__PURE__ */ jsxs("header", {
|
|
74
68
|
ref,
|
|
75
69
|
className: cn("border-b backdrop-blur-sm transition-colors", (!isNavTransparent || open) && "bg-fd-background/80", open && "shadow-lg"),
|
|
76
|
-
children
|
|
70
|
+
children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsxs(PageTOCPopoverContent, {
|
|
71
|
+
...content,
|
|
72
|
+
children: [
|
|
73
|
+
header,
|
|
74
|
+
/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, { children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, {
|
|
75
|
+
item,
|
|
76
|
+
onClick: onClickItem
|
|
77
|
+
}, item.url))] }) }),
|
|
78
|
+
footer
|
|
79
|
+
]
|
|
80
|
+
})]
|
|
77
81
|
})
|
|
78
82
|
})
|
|
79
83
|
});
|
|
@@ -81,18 +85,17 @@ function PageTOCPopover({ className, children, ...rest }) {
|
|
|
81
85
|
function PageTOCPopoverTrigger({ className, ...props }) {
|
|
82
86
|
const { text } = useI18n();
|
|
83
87
|
const { open } = use(TocPopoverContext);
|
|
84
|
-
const items =
|
|
85
|
-
const
|
|
86
|
-
const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
|
|
88
|
+
const items = useItems();
|
|
89
|
+
const selectedIdx = items.findIndex((item) => item.active);
|
|
87
90
|
const path = useTreePath().at(-1);
|
|
88
|
-
const showItem =
|
|
91
|
+
const showItem = selectedIdx !== -1 && !open;
|
|
89
92
|
return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
|
|
90
93
|
className: cn("flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6", className),
|
|
91
94
|
"data-toc-popover-trigger": "",
|
|
92
95
|
...props,
|
|
93
96
|
children: [
|
|
94
97
|
/* @__PURE__ */ jsx(ProgressCircle, {
|
|
95
|
-
value: (
|
|
98
|
+
value: (selectedIdx + 1) / Math.max(1, items.length),
|
|
96
99
|
max: 1,
|
|
97
100
|
className: cn("shrink-0", open && "text-fd-primary")
|
|
98
101
|
}),
|
|
@@ -103,7 +106,7 @@ function PageTOCPopoverTrigger({ className, ...props }) {
|
|
|
103
106
|
children: path?.name ?? text.toc
|
|
104
107
|
}), /* @__PURE__ */ jsx("span", {
|
|
105
108
|
className: cn("truncate transition-[opacity,translate]", !showItem && "opacity-0 translate-y-full pointer-events-none"),
|
|
106
|
-
children: items[
|
|
109
|
+
children: items[selectedIdx]?.original.title
|
|
107
110
|
})]
|
|
108
111
|
}),
|
|
109
112
|
/* @__PURE__ */ jsx(ChevronDown, { className: cn("shrink-0 transition-transform mx-0.5", open && "rotate-180") })
|
|
@@ -152,8 +155,10 @@ function PageTOCPopoverContent(props) {
|
|
|
152
155
|
return /* @__PURE__ */ jsx(CollapsibleContent, {
|
|
153
156
|
"data-toc-popover-content": "",
|
|
154
157
|
...props,
|
|
155
|
-
|
|
156
|
-
|
|
158
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
159
|
+
className: "flex flex-col px-4 max-h-[50vh] md:px-6",
|
|
160
|
+
children: props.children
|
|
161
|
+
})
|
|
157
162
|
});
|
|
158
163
|
}
|
|
159
164
|
//#endregion
|
package/dist/style.css
CHANGED
|
@@ -337,9 +337,6 @@
|
|
|
337
337
|
.top-\(--fd-docs-row-3\) {
|
|
338
338
|
top: var(--fd-docs-row-3);
|
|
339
339
|
}
|
|
340
|
-
.top-\(--fd-top\) {
|
|
341
|
-
top: var(--fd-top);
|
|
342
|
-
}
|
|
343
340
|
.top-0 {
|
|
344
341
|
top: calc(var(--spacing) * 0);
|
|
345
342
|
}
|
|
@@ -971,9 +968,6 @@
|
|
|
971
968
|
.h-\(--fd-header-height\) {
|
|
972
969
|
height: var(--fd-header-height);
|
|
973
970
|
}
|
|
974
|
-
.h-\(--fd-height\) {
|
|
975
|
-
height: var(--fd-height);
|
|
976
|
-
}
|
|
977
971
|
.h-\(--fd-toc-popover-height\) {
|
|
978
972
|
height: var(--fd-toc-popover-height);
|
|
979
973
|
}
|
|
@@ -1178,10 +1172,6 @@
|
|
|
1178
1172
|
--tw-translate-y: -100%;
|
|
1179
1173
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1180
1174
|
}
|
|
1181
|
-
.translate-y-1\/2 {
|
|
1182
|
-
--tw-translate-y: calc(1 / 2 * 100%);
|
|
1183
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1184
|
-
}
|
|
1185
1175
|
.translate-y-full {
|
|
1186
1176
|
--tw-translate-y: 100%;
|
|
1187
1177
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
@@ -1201,6 +1191,9 @@
|
|
|
1201
1191
|
.animate-pulse {
|
|
1202
1192
|
animation: var(--animate-pulse);
|
|
1203
1193
|
}
|
|
1194
|
+
.scroll-m-4 {
|
|
1195
|
+
scroll-margin: calc(var(--spacing) * 4);
|
|
1196
|
+
}
|
|
1204
1197
|
.scroll-m-20 {
|
|
1205
1198
|
scroll-margin: calc(var(--spacing) * 20);
|
|
1206
1199
|
}
|
|
@@ -1357,10 +1350,6 @@
|
|
|
1357
1350
|
.rounded-xl {
|
|
1358
1351
|
border-radius: var(--radius-xl);
|
|
1359
1352
|
}
|
|
1360
|
-
.rounded-e-full {
|
|
1361
|
-
border-start-end-radius: calc(infinity * 1px);
|
|
1362
|
-
border-end-end-radius: calc(infinity * 1px);
|
|
1363
|
-
}
|
|
1364
1353
|
.border {
|
|
1365
1354
|
border-style: var(--tw-border-style);
|
|
1366
1355
|
border-width: 1px;
|
|
@@ -1490,18 +1479,6 @@
|
|
|
1490
1479
|
.bg-transparent {
|
|
1491
1480
|
background-color: transparent;
|
|
1492
1481
|
}
|
|
1493
|
-
.bg-linear-to-t {
|
|
1494
|
-
--tw-gradient-position: to top;
|
|
1495
|
-
@supports (background-image: linear-gradient(in lab, red, red)) {
|
|
1496
|
-
--tw-gradient-position: to top in oklab;
|
|
1497
|
-
}
|
|
1498
|
-
background-image: linear-gradient(var(--tw-gradient-stops));
|
|
1499
|
-
}
|
|
1500
|
-
.via-fd-primary {
|
|
1501
|
-
--tw-gradient-via: var(--color-fd-primary);
|
|
1502
|
-
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
|
|
1503
|
-
--tw-gradient-stops: var(--tw-gradient-via-stops);
|
|
1504
|
-
}
|
|
1505
1482
|
.mask-\[linear-gradient\(to_bottom\,transparent\,white_--spacing\(14\)\,white_calc\(100\%---spacing\(14\)\)\,transparent\)\] {
|
|
1506
1483
|
mask-image: linear-gradient(to bottom,transparent,white calc(var(--spacing) * 14),white calc(100% - calc(var(--spacing) * 14)),transparent);
|
|
1507
1484
|
}
|
|
@@ -1899,11 +1876,6 @@
|
|
|
1899
1876
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1900
1877
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1901
1878
|
}
|
|
1902
|
-
.transition-\[top\,height\] {
|
|
1903
|
-
transition-property: top,height;
|
|
1904
|
-
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1905
|
-
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1906
|
-
}
|
|
1907
1879
|
.transition-\[width\,inset-block\,translate\,background-color\] {
|
|
1908
1880
|
transition-property: width,inset-block,translate,background-color;
|
|
1909
1881
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
@@ -1929,9 +1901,6 @@
|
|
|
1929
1901
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1930
1902
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1931
1903
|
}
|
|
1932
|
-
.delay-25 {
|
|
1933
|
-
transition-delay: 25ms;
|
|
1934
|
-
}
|
|
1935
1904
|
.duration-\(--duration\) {
|
|
1936
1905
|
--tw-duration: var(--duration);
|
|
1937
1906
|
transition-duration: var(--duration);
|
|
@@ -2260,13 +2229,6 @@
|
|
|
2260
2229
|
}
|
|
2261
2230
|
}
|
|
2262
2231
|
}
|
|
2263
|
-
.hover\:delay-0 {
|
|
2264
|
-
&:hover {
|
|
2265
|
-
@media (hover: hover) {
|
|
2266
|
-
transition-delay: 0ms;
|
|
2267
|
-
}
|
|
2268
|
-
}
|
|
2269
|
-
}
|
|
2270
2232
|
.focus-visible\:ring-2 {
|
|
2271
2233
|
&:focus-visible {
|
|
2272
2234
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
@@ -3257,48 +3219,6 @@
|
|
|
3257
3219
|
inherits: false;
|
|
3258
3220
|
initial-value: 0;
|
|
3259
3221
|
}
|
|
3260
|
-
@property --tw-gradient-position {
|
|
3261
|
-
syntax: "*";
|
|
3262
|
-
inherits: false;
|
|
3263
|
-
}
|
|
3264
|
-
@property --tw-gradient-from {
|
|
3265
|
-
syntax: "<color>";
|
|
3266
|
-
inherits: false;
|
|
3267
|
-
initial-value: #0000;
|
|
3268
|
-
}
|
|
3269
|
-
@property --tw-gradient-via {
|
|
3270
|
-
syntax: "<color>";
|
|
3271
|
-
inherits: false;
|
|
3272
|
-
initial-value: #0000;
|
|
3273
|
-
}
|
|
3274
|
-
@property --tw-gradient-to {
|
|
3275
|
-
syntax: "<color>";
|
|
3276
|
-
inherits: false;
|
|
3277
|
-
initial-value: #0000;
|
|
3278
|
-
}
|
|
3279
|
-
@property --tw-gradient-stops {
|
|
3280
|
-
syntax: "*";
|
|
3281
|
-
inherits: false;
|
|
3282
|
-
}
|
|
3283
|
-
@property --tw-gradient-via-stops {
|
|
3284
|
-
syntax: "*";
|
|
3285
|
-
inherits: false;
|
|
3286
|
-
}
|
|
3287
|
-
@property --tw-gradient-from-position {
|
|
3288
|
-
syntax: "<length-percentage>";
|
|
3289
|
-
inherits: false;
|
|
3290
|
-
initial-value: 0%;
|
|
3291
|
-
}
|
|
3292
|
-
@property --tw-gradient-via-position {
|
|
3293
|
-
syntax: "<length-percentage>";
|
|
3294
|
-
inherits: false;
|
|
3295
|
-
initial-value: 50%;
|
|
3296
|
-
}
|
|
3297
|
-
@property --tw-gradient-to-position {
|
|
3298
|
-
syntax: "<length-percentage>";
|
|
3299
|
-
inherits: false;
|
|
3300
|
-
initial-value: 100%;
|
|
3301
|
-
}
|
|
3302
3222
|
@property --tw-leading {
|
|
3303
3223
|
syntax: "*";
|
|
3304
3224
|
inherits: false;
|
|
@@ -3569,15 +3489,6 @@
|
|
|
3569
3489
|
--tw-skew-y: initial;
|
|
3570
3490
|
--tw-divide-x-reverse: 0;
|
|
3571
3491
|
--tw-divide-y-reverse: 0;
|
|
3572
|
-
--tw-gradient-position: initial;
|
|
3573
|
-
--tw-gradient-from: #0000;
|
|
3574
|
-
--tw-gradient-via: #0000;
|
|
3575
|
-
--tw-gradient-to: #0000;
|
|
3576
|
-
--tw-gradient-stops: initial;
|
|
3577
|
-
--tw-gradient-via-stops: initial;
|
|
3578
|
-
--tw-gradient-from-position: 0%;
|
|
3579
|
-
--tw-gradient-via-position: 50%;
|
|
3580
|
-
--tw-gradient-to-position: 100%;
|
|
3581
3492
|
--tw-leading: initial;
|
|
3582
3493
|
--tw-font-weight: initial;
|
|
3583
3494
|
--tw-shadow: 0 0 #0000;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fumadocs/base-ui",
|
|
3
|
-
"version": "16.7.
|
|
3
|
+
"version": "16.7.5",
|
|
4
4
|
"description": "The Base UI version of Fumadocs UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Docs",
|
|
@@ -140,9 +140,9 @@
|
|
|
140
140
|
"tailwindcss": "^4.2.2",
|
|
141
141
|
"tsdown": "0.21.4",
|
|
142
142
|
"unified": "^11.0.5",
|
|
143
|
-
"@fumadocs/cli": "1.3.
|
|
143
|
+
"@fumadocs/cli": "1.3.2",
|
|
144
144
|
"eslint-config-custom": "0.0.0",
|
|
145
|
-
"fumadocs-core": "16.7.
|
|
145
|
+
"fumadocs-core": "16.7.5",
|
|
146
146
|
"tsconfig": "0.0.0"
|
|
147
147
|
},
|
|
148
148
|
"peerDependencies": {
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
"react": "^19.2.0",
|
|
154
154
|
"react-dom": "^19.2.0",
|
|
155
155
|
"shiki": "*",
|
|
156
|
-
"fumadocs-core": "16.7.
|
|
156
|
+
"fumadocs-core": "16.7.5"
|
|
157
157
|
},
|
|
158
158
|
"peerDependenciesMeta": {
|
|
159
159
|
"shiki": {
|