@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.
@@ -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");
@@ -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");
@@ -100,8 +100,7 @@
100
100
  @source inline("at");
101
101
  @source inline("attribute");
102
102
  @source inline("await");
103
- @source inline("b1");
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
- useEffect(() => {
17
- if (!containerRef.current) return;
20
+ const onResize = useEffectEvent(() => {
18
21
  const container = containerRef.current;
19
- function onResize() {
20
- if (container.clientHeight === 0) return;
21
- let w = 0, h = 0, b1 = 0, d = "";
22
- for (let i = 0; i < items.length; i++) {
23
- const element = container.querySelector(`a[href="#${items[i].url.slice(1)}"]`);
24
- if (!element) continue;
25
- const styles = getComputedStyle(element);
26
- const offset = getLineOffset(items[i].depth) + 1, t2 = element.offsetTop + parseFloat(styles.paddingTop), b2 = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
27
- w = Math.max(offset, w);
28
- h = Math.max(h, b2);
29
- if (i === 0) d += ` M${offset} ${t2} L${offset} ${b2}`;
30
- else {
31
- const pOffset = getLineOffset(items[i - 1].depth) + 1;
32
- d += ` C ${pOffset} ${t2 - 4} ${offset} ${b1 + 4} ${offset} ${t2} L${offset} ${b2}`;
33
- }
34
- b1 = b2;
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(container);
51
+ observer.observe(containerRef.current);
49
52
  return () => {
50
53
  observer.disconnect();
51
54
  };
52
- }, [items]);
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 inset-0 transition-[clip-path] delay-25",
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 = useTOCItems();
93
- const ids = Primitive.useActiveAnchors();
94
- const item = items.findLast((item) => ids.includes(item.url.slice(1)));
95
- if (!item) return;
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 delay-25 transition-transform",
98
- style: { translate: `calc(${getLineOffset(item.depth)}px - 1.25px) calc(var(--fd-top) + var(--fd-height))` }
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, upper = item.depth, lower = item.depth }) {
112
- const offset = getLineOffset(item.depth), upperOffset = getLineOffset(upper), lowerOffset = getLineOffset(lower);
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
- style: { paddingInlineStart: getItemOffset(item.depth) },
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, useTOCItems } from "./index.js";
6
+ import { TocThumb } from "./index.js";
6
7
  import { useRef } from "react";
7
- import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
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
- const items = useTOCItems();
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
- if (items.length === 0) return /* @__PURE__ */ jsx("div", {
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
- className: cn("prose py-1.5 text-sm text-fd-muted-foreground transition-colors delay-25 wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground hover:delay-0", item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8"),
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, useActiveAnchor, useTOCItems } from "../../../../components/toc/index.js";
5
- import { TOCItems } from "../../../../components/toc/default.js";
6
- import { TOCItems as TOCItems$1 } from "../../../../components/toc/clerk.js";
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: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
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
- return /* @__PURE__ */ jsxs(PageTOCPopover, {
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 onClick = useEffectEvent((e) => {
54
- if (!open) return;
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", onClick);
52
+ window.addEventListener("click", onClickOutside);
59
53
  return () => {
60
- window.removeEventListener("click", onClick);
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
- 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)]", className),
73
- ...rest,
74
- children: /* @__PURE__ */ jsx("header", {
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 = useTOCItems();
86
- const active = useActiveAnchor();
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 = selected !== -1 && !open;
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: (selected + 1) / Math.max(1, items.length),
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[selected]?.title
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
- className: cn("flex flex-col px-4 max-h-[50vh] md:px-6", props.className),
157
- children: props.children
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 { TOCItems } from "../../../../components/toc/default.js";
6
- import { TOCItems as TOCItems$1 } from "../../../../components/toc/clerk.js";
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__ */ jsx(PageTOCPopoverContent, {
22
+ children: [/* @__PURE__ */ jsxs(PageTOCPopoverContent, {
22
23
  ...content,
23
- children: /* @__PURE__ */ jsxs("div", { children: [
24
+ children: [
24
25
  header,
25
- /* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
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 = useTOCItems();
77
- const active = useActiveAnchor();
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: (selected + 1) / Math.max(1, items.length),
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[selected] && selected !== -1 && !open ? /* @__PURE__ */ jsx(motion.span, {
108
+ children: items[selectedIdx] && !open ? /* @__PURE__ */ jsx(motion.span, {
109
109
  ...spanProps,
110
- children: items[selected].title
111
- }, selected) : path ? /* @__PURE__ */ jsx(motion.span, {
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
- className: cn("flex flex-col px-2 max-h-[50vh]", props.className),
166
- children: props.children
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, useActiveAnchor, useTOCItems } from "../../../../components/toc/index.js";
5
- import { TOCItems } from "../../../../components/toc/default.js";
6
- import { TOCItems as TOCItems$1 } from "../../../../components/toc/clerk.js";
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: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
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
- return /* @__PURE__ */ jsxs(PageTOCPopover, {
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 onClick = useEffectEvent((e) => {
53
- if (!open) return;
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", onClick);
51
+ window.addEventListener("click", onClickOutside);
58
52
  return () => {
59
- window.removeEventListener("click", onClick);
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
- 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)]", className),
72
- ...rest,
73
- children: /* @__PURE__ */ jsx("header", {
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 = useTOCItems();
85
- const active = useActiveAnchor();
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 = selected !== -1 && !open;
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: (selected + 1) / Math.max(1, items.length),
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[selected]?.title
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
- className: cn("flex flex-col px-4 max-h-[50vh] md:px-6", props.className),
156
- children: props.children
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",
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.1",
143
+ "@fumadocs/cli": "1.3.2",
144
144
  "eslint-config-custom": "0.0.0",
145
- "fumadocs-core": "16.7.3",
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.3"
156
+ "fumadocs-core": "16.7.5"
157
157
  },
158
158
  "peerDependenciesMeta": {
159
159
  "shiki": {