@fumadocs/ui 16.4.0 → 16.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/css/colors/ocean.css +1 -5
  2. package/css/colors/vitepress.css +3 -15
  3. package/dist/cn.d.ts +2 -2
  4. package/dist/cn.js +3 -1
  5. package/dist/components/toc/clerk.d.ts +11 -2
  6. package/dist/components/toc/clerk.d.ts.map +1 -1
  7. package/dist/components/toc/clerk.js +105 -69
  8. package/dist/components/toc/clerk.js.map +1 -0
  9. package/dist/components/toc/default.d.ts +11 -2
  10. package/dist/components/toc/default.d.ts.map +1 -1
  11. package/dist/components/toc/default.js +36 -15
  12. package/dist/components/toc/default.js.map +1 -0
  13. package/dist/components/toc/index.d.ts +23 -8
  14. package/dist/components/toc/index.d.ts.map +1 -1
  15. package/dist/components/toc/index.js +74 -56
  16. package/dist/components/toc/index.js.map +1 -0
  17. package/dist/contexts/i18n.d.ts +53 -43
  18. package/dist/contexts/i18n.d.ts.map +1 -1
  19. package/dist/contexts/i18n.js +55 -50
  20. package/dist/contexts/i18n.js.map +1 -0
  21. package/dist/contexts/search.d.ts +62 -49
  22. package/dist/contexts/search.d.ts.map +1 -1
  23. package/dist/contexts/search.js +56 -50
  24. package/dist/contexts/search.js.map +1 -0
  25. package/dist/contexts/tree.d.ts +18 -11
  26. package/dist/contexts/tree.d.ts.map +1 -1
  27. package/dist/contexts/tree.js +36 -26
  28. package/dist/contexts/tree.js.map +1 -0
  29. package/dist/hooks/use-copy-button.d.ts +6 -2
  30. package/dist/hooks/use-copy-button.d.ts.map +1 -1
  31. package/dist/hooks/use-copy-button.js +28 -25
  32. package/dist/hooks/use-copy-button.js.map +1 -0
  33. package/dist/hooks/use-footer-items.d.ts +7 -2
  34. package/dist/hooks/use-footer-items.d.ts.map +1 -1
  35. package/dist/hooks/use-footer-items.js +26 -25
  36. package/dist/hooks/use-footer-items.js.map +1 -0
  37. package/dist/hooks/use-is-scroll-top.d.ts +7 -2
  38. package/dist/hooks/use-is-scroll-top.d.ts.map +1 -1
  39. package/dist/hooks/use-is-scroll-top.js +23 -16
  40. package/dist/hooks/use-is-scroll-top.js.map +1 -0
  41. package/dist/i18n.d.ts +11 -11
  42. package/dist/i18n.d.ts.map +1 -1
  43. package/dist/i18n.js +19 -15
  44. package/dist/i18n.js.map +1 -0
  45. package/dist/link-item.d.ts +74 -66
  46. package/dist/link-item.d.ts.map +1 -1
  47. package/dist/link-item.js +23 -10
  48. package/dist/link-item.js.map +1 -0
  49. package/dist/merge-refs.d.ts +6 -2
  50. package/dist/merge-refs.d.ts.map +1 -1
  51. package/dist/merge-refs.js +12 -11
  52. package/dist/merge-refs.js.map +1 -0
  53. package/dist/og/next.d.ts +20 -12
  54. package/dist/og/next.d.ts.map +1 -1
  55. package/dist/og/next.js +68 -43
  56. package/dist/og/next.js.map +1 -0
  57. package/dist/typography/index.d.ts +10 -8
  58. package/dist/typography/index.d.ts.map +1 -1
  59. package/dist/typography/index.js +1714 -127
  60. package/dist/typography/index.js.map +1 -0
  61. package/dist/typography/styles.d.ts +92 -89
  62. package/dist/typography/styles.d.ts.map +1 -1
  63. package/dist/typography/styles.js +337 -423
  64. package/dist/typography/styles.js.map +1 -0
  65. package/dist/urls.d.ts +5 -2
  66. package/dist/urls.d.ts.map +1 -1
  67. package/dist/urls.js +14 -10
  68. package/dist/urls.js.map +1 -0
  69. package/package.json +20 -20
  70. package/dist/cn.d.ts.map +0 -1
  71. package/dist/icons.d.ts +0 -49
  72. package/dist/icons.d.ts.map +0 -1
  73. package/dist/icons.js +0 -281
@@ -39,10 +39,6 @@
39
39
  }
40
40
 
41
41
  .dark body {
42
- background-image: linear-gradient(
43
- rgba(5, 105, 255, 0.15),
44
- transparent 20rem,
45
- transparent
46
- );
42
+ background-image: linear-gradient(rgba(5, 105, 255, 0.15), transparent 20rem, transparent);
47
43
  background-repeat: no-repeat;
48
44
  }
@@ -40,27 +40,15 @@
40
40
  }
41
41
 
42
42
  .prose {
43
- --tw-prose-body: color-mix(
44
- in oklab,
45
- var(--color-fd-foreground) 85%,
46
- transparent
47
- );
48
- --tw-prose-headings: color-mix(
49
- in oklab,
50
- var(--color-fd-foreground) 85%,
51
- transparent
52
- );
43
+ --tw-prose-body: color-mix(in oklab, var(--color-fd-foreground) 85%, transparent);
44
+ --tw-prose-headings: color-mix(in oklab, var(--color-fd-foreground) 85%, transparent);
53
45
  --tw-prose-links: var(--color-fd-primary);
54
46
  --tw-prose-code: var(--color-fd-primary);
55
47
  }
56
48
 
57
49
  .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
58
50
  border: none;
59
- background-color: color-mix(
60
- in oklab,
61
- var(--color-fd-primary) 10%,
62
- transparent
63
- );
51
+ background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
64
52
  }
65
53
 
66
54
  #nd-sidebar {
package/dist/cn.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export { twMerge as cn } from 'tailwind-merge';
2
- //# sourceMappingURL=cn.d.ts.map
1
+ import { twMerge as cn } from "tailwind-merge";
2
+ export { cn };
package/dist/cn.js CHANGED
@@ -1 +1,3 @@
1
- export { twMerge as cn } from 'tailwind-merge';
1
+ import { twMerge as cn } from "tailwind-merge";
2
+
3
+ export { cn };
@@ -1,3 +1,12 @@
1
- import { type ComponentProps } from 'react';
2
- export declare function TOCItems({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
1
+ import { ComponentProps } from "react";
2
+ import * as react_jsx_runtime7 from "react/jsx-runtime";
3
+
4
+ //#region src/components/toc/clerk.d.ts
5
+ declare function TOCItems({
6
+ ref,
7
+ className,
8
+ ...props
9
+ }: ComponentProps<'div'>): react_jsx_runtime7.JSX.Element;
10
+ //#endregion
11
+ export { TOCItems };
3
12
  //# sourceMappingURL=clerk.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"clerk.d.ts","sourceRoot":"","sources":["../../../src/components/toc/clerk.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AAMzE,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAsG3E"}
1
+ {"version":3,"file":"clerk.d.ts","names":[],"sources":["../../../src/components/toc/clerk.tsx"],"sourcesContent":[],"mappings":";;;;iBAQgB,QAAA;;;;GAAuC,wBAAqB,kBAAA,CAAA,GAAA,CAAA"}
@@ -1,76 +1,112 @@
1
1
  'use client';
2
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
- import * as Primitive from 'fumadocs-core/toc';
4
- import { useEffect, useRef, useState } from 'react';
5
- import { cn } from '../../cn.js';
6
- import { TocThumb, useTOCItems } from './index.js';
7
- import { mergeRefs } from '../../merge-refs.js';
8
- import { useI18n } from '../../contexts/i18n.js';
9
- export function TOCItems({ ref, className, ...props }) {
10
- const containerRef = useRef(null);
11
- const items = useTOCItems();
12
- const { text } = useI18n();
13
- const [svg, setSvg] = useState();
14
- useEffect(() => {
15
- if (!containerRef.current)
16
- return;
17
- const container = containerRef.current;
18
- function onResize() {
19
- if (container.clientHeight === 0)
20
- return;
21
- let w = 0, h = 0;
22
- const d = [];
23
- for (let i = 0; i < items.length; i++) {
24
- const element = container.querySelector(`a[href="#${items[i].url.slice(1)}"]`);
25
- if (!element)
26
- continue;
27
- const styles = getComputedStyle(element);
28
- const offset = getLineOffset(items[i].depth) + 1, top = element.offsetTop + parseFloat(styles.paddingTop), bottom = element.offsetTop +
29
- element.clientHeight -
30
- parseFloat(styles.paddingBottom);
31
- w = Math.max(offset, w);
32
- h = Math.max(h, bottom);
33
- d.push(`${i === 0 ? 'M' : 'L'}${offset} ${top}`);
34
- d.push(`L${offset} ${bottom}`);
35
- }
36
- setSvg({
37
- path: d.join(' '),
38
- width: w + 1,
39
- height: h,
40
- });
41
- }
42
- const observer = new ResizeObserver(onResize);
43
- onResize();
44
- observer.observe(container);
45
- return () => {
46
- observer.disconnect();
47
- };
48
- }, [items]);
49
- if (items.length === 0)
50
- return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
51
- return (_jsxs(_Fragment, { children: [svg && (_jsx("div", { className: "absolute start-0 top-0 rtl:-scale-x-100", style: {
52
- width: svg.width,
53
- height: svg.height,
54
- maskImage: `url("data:image/svg+xml,${
55
- // Inline SVG
56
- encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`)}")`,
57
- }, children: _jsx(TocThumb, { containerRef: containerRef, className: "translate-y-(--fd-top) h-(--fd-height) bg-fd-primary transition-[translate,height]" }) })), _jsx("div", { ref: mergeRefs(containerRef, ref), className: cn('flex flex-col', className), ...props, children: items.map((item, i) => (_jsx(TOCItem, { item: item, upper: items[i - 1]?.depth, lower: items[i + 1]?.depth }, item.url))) })] }));
2
+
3
+ import { cn } from "../../cn.js";
4
+ import { useI18n } from "../../contexts/i18n.js";
5
+ import { mergeRefs } from "../../merge-refs.js";
6
+ import { TocThumb, useTOCItems } from "./index.js";
7
+ import { useEffect, useRef, useState } from "react";
8
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
+ import * as Primitive from "fumadocs-core/toc";
10
+
11
+ //#region src/components/toc/clerk.tsx
12
+ function TOCItems({ ref, className, ...props }) {
13
+ const containerRef = useRef(null);
14
+ const items = useTOCItems();
15
+ const { text } = useI18n();
16
+ const [svg, setSvg] = useState();
17
+ useEffect(() => {
18
+ if (!containerRef.current) return;
19
+ const container = containerRef.current;
20
+ function onResize() {
21
+ if (container.clientHeight === 0) return;
22
+ let w = 0, h = 0;
23
+ const d = [];
24
+ for (let i = 0; i < items.length; i++) {
25
+ const element = container.querySelector(`a[href="#${items[i].url.slice(1)}"]`);
26
+ if (!element) continue;
27
+ const styles = getComputedStyle(element);
28
+ const offset = getLineOffset(items[i].depth) + 1, top = element.offsetTop + parseFloat(styles.paddingTop), bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
29
+ w = Math.max(offset, w);
30
+ h = Math.max(h, bottom);
31
+ d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`);
32
+ d.push(`L${offset} ${bottom}`);
33
+ }
34
+ setSvg({
35
+ path: d.join(" "),
36
+ width: w + 1,
37
+ height: h
38
+ });
39
+ }
40
+ const observer = new ResizeObserver(onResize);
41
+ onResize();
42
+ observer.observe(container);
43
+ return () => {
44
+ observer.disconnect();
45
+ };
46
+ }, [items]);
47
+ if (items.length === 0) return /* @__PURE__ */ jsx("div", {
48
+ className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
49
+ children: text.tocNoHeadings
50
+ });
51
+ return /* @__PURE__ */ jsxs(Fragment, { children: [svg && /* @__PURE__ */ jsx("div", {
52
+ className: "absolute start-0 top-0 rtl:-scale-x-100",
53
+ style: {
54
+ width: svg.width,
55
+ height: svg.height,
56
+ maskImage: `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`)}")`
57
+ },
58
+ children: /* @__PURE__ */ jsx(TocThumb, {
59
+ containerRef,
60
+ className: "absolute w-full top-(--fd-top) h-(--fd-height) bg-fd-primary transition-[top,height] ease-linear duration-250"
61
+ })
62
+ }), /* @__PURE__ */ jsx("div", {
63
+ ref: mergeRefs(containerRef, ref),
64
+ className: cn("flex flex-col", className),
65
+ ...props,
66
+ children: items.map((item, i) => /* @__PURE__ */ jsx(TOCItem, {
67
+ item,
68
+ upper: items[i - 1]?.depth,
69
+ lower: items[i + 1]?.depth
70
+ }, item.url))
71
+ })] });
58
72
  }
59
73
  function getItemOffset(depth) {
60
- if (depth <= 2)
61
- return 14;
62
- if (depth === 3)
63
- return 26;
64
- return 36;
74
+ if (depth <= 2) return 14;
75
+ if (depth === 3) return 26;
76
+ return 36;
65
77
  }
66
78
  function getLineOffset(depth) {
67
- return depth >= 3 ? 10 : 0;
79
+ return depth >= 3 ? 10 : 0;
68
80
  }
69
- function TOCItem({ item, upper = item.depth, lower = item.depth, }) {
70
- const offset = getLineOffset(item.depth), upperOffset = getLineOffset(upper), lowerOffset = getLineOffset(lower);
71
- return (_jsxs(Primitive.TOCItem, { href: item.url, style: {
72
- paddingInlineStart: getItemOffset(item.depth),
73
- }, className: "prose relative py-1.5 text-sm text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", children: [offset !== upperOffset && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", className: "absolute -top-1.5 start-0 size-4 rtl:-scale-x-100", children: _jsx("line", { x1: upperOffset, y1: "0", x2: offset, y2: "12", className: "stroke-fd-foreground/10", strokeWidth: "1" }) })), _jsx("div", { className: cn('absolute inset-y-0 w-px bg-fd-foreground/10', offset !== upperOffset && 'top-1.5', offset !== lowerOffset && 'bottom-1.5'), style: {
74
- insetInlineStart: offset,
75
- } }), item.title] }));
81
+ function TOCItem({ item, upper = item.depth, lower = item.depth }) {
82
+ const offset = getLineOffset(item.depth), upperOffset = getLineOffset(upper), lowerOffset = getLineOffset(lower);
83
+ return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
84
+ href: item.url,
85
+ style: { paddingInlineStart: getItemOffset(item.depth) },
86
+ 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",
87
+ children: [
88
+ offset !== upperOffset && /* @__PURE__ */ jsx("svg", {
89
+ xmlns: "http://www.w3.org/2000/svg",
90
+ viewBox: "0 0 16 16",
91
+ className: "absolute -top-1.5 start-0 size-4 rtl:-scale-x-100",
92
+ children: /* @__PURE__ */ jsx("line", {
93
+ x1: upperOffset,
94
+ y1: "0",
95
+ x2: offset,
96
+ y2: "12",
97
+ className: "stroke-fd-foreground/10",
98
+ strokeWidth: "1"
99
+ })
100
+ }),
101
+ /* @__PURE__ */ jsx("div", {
102
+ className: cn("absolute inset-y-0 w-px bg-fd-foreground/10", offset !== upperOffset && "top-1.5", offset !== lowerOffset && "bottom-1.5"),
103
+ style: { insetInlineStart: offset }
104
+ }),
105
+ item.title
106
+ ]
107
+ });
76
108
  }
109
+
110
+ //#endregion
111
+ export { TOCItems };
112
+ //# sourceMappingURL=clerk.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"clerk.js","names":["d: string[]","element: HTMLElement | null"],"sources":["../../../src/components/toc/clerk.tsx"],"sourcesContent":["'use client';\nimport * as Primitive from 'fumadocs-core/toc';\nimport { type ComponentProps, useEffect, useRef, useState } from 'react';\nimport { cn } from '@/cn';\nimport { TocThumb, useTOCItems } from '.';\nimport { mergeRefs } from '@/merge-refs';\nimport { useI18n } from '@/contexts/i18n';\n\nexport function TOCItems({ ref, className, ...props }: ComponentProps<'div'>) {\n const containerRef = useRef<HTMLDivElement>(null);\n const items = useTOCItems();\n const { text } = useI18n();\n\n const [svg, setSvg] = useState<{\n path: string;\n width: number;\n height: number;\n }>();\n\n useEffect(() => {\n if (!containerRef.current) return;\n const container = containerRef.current;\n\n function onResize(): void {\n if (container.clientHeight === 0) return;\n let w = 0,\n h = 0;\n const d: string[] = [];\n for (let i = 0; i < items.length; i++) {\n const element: HTMLElement | null = container.querySelector(\n `a[href=\"#${items[i].url.slice(1)}\"]`,\n );\n if (!element) continue;\n\n const styles = getComputedStyle(element);\n const offset = getLineOffset(items[i].depth) + 1,\n top = element.offsetTop + parseFloat(styles.paddingTop),\n bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);\n\n w = Math.max(offset, w);\n h = Math.max(h, bottom);\n\n d.push(`${i === 0 ? 'M' : 'L'}${offset} ${top}`);\n d.push(`L${offset} ${bottom}`);\n }\n\n setSvg({\n path: d.join(' '),\n width: w + 1,\n height: h,\n });\n }\n\n const observer = new ResizeObserver(onResize);\n onResize();\n\n observer.observe(container);\n return () => {\n observer.disconnect();\n };\n }, [items]);\n\n if (items.length === 0)\n return (\n <div className=\"rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground\">\n {text.tocNoHeadings}\n </div>\n );\n\n return (\n <>\n {svg && (\n <div\n className=\"absolute start-0 top-0 rtl:-scale-x-100\"\n style={{\n width: svg.width,\n height: svg.height,\n maskImage: `url(\"data:image/svg+xml,${\n // Inline SVG\n encodeURIComponent(\n `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ${svg.width} ${svg.height}\"><path d=\"${svg.path}\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" /></svg>`,\n )\n }\")`,\n }}\n >\n <TocThumb\n containerRef={containerRef}\n className=\"absolute w-full top-(--fd-top) h-(--fd-height) bg-fd-primary transition-[top,height] ease-linear duration-250\"\n />\n </div>\n )}\n <div ref={mergeRefs(containerRef, ref)} className={cn('flex flex-col', className)} {...props}>\n {items.map((item, i) => (\n <TOCItem\n key={item.url}\n item={item}\n upper={items[i - 1]?.depth}\n lower={items[i + 1]?.depth}\n />\n ))}\n </div>\n </>\n );\n}\n\nfunction getItemOffset(depth: number): number {\n if (depth <= 2) return 14;\n if (depth === 3) return 26;\n return 36;\n}\n\nfunction getLineOffset(depth: number): number {\n return depth >= 3 ? 10 : 0;\n}\n\nfunction TOCItem({\n item,\n upper = item.depth,\n lower = item.depth,\n}: {\n item: Primitive.TOCItemType;\n upper?: number;\n lower?: number;\n}) {\n const offset = getLineOffset(item.depth),\n upperOffset = getLineOffset(upper),\n lowerOffset = getLineOffset(lower);\n\n return (\n <Primitive.TOCItem\n href={item.url}\n style={{\n paddingInlineStart: getItemOffset(item.depth),\n }}\n 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\"\n >\n {offset !== upperOffset && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n className=\"absolute -top-1.5 start-0 size-4 rtl:-scale-x-100\"\n >\n <line\n x1={upperOffset}\n y1=\"0\"\n x2={offset}\n y2=\"12\"\n className=\"stroke-fd-foreground/10\"\n strokeWidth=\"1\"\n />\n </svg>\n )}\n <div\n className={cn(\n 'absolute inset-y-0 w-px bg-fd-foreground/10',\n offset !== upperOffset && 'top-1.5',\n offset !== lowerOffset && 'bottom-1.5',\n )}\n style={{\n insetInlineStart: offset,\n }}\n />\n {item.title}\n </Primitive.TOCItem>\n );\n}\n"],"mappings":";;;;;;;;;;;AAQA,SAAgB,SAAS,EAAE,KAAK,WAAW,GAAG,SAAgC;CAC5E,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,QAAQ,aAAa;CAC3B,MAAM,EAAE,SAAS,SAAS;CAE1B,MAAM,CAAC,KAAK,UAAU,UAIlB;AAEJ,iBAAgB;AACd,MAAI,CAAC,aAAa,QAAS;EAC3B,MAAM,YAAY,aAAa;EAE/B,SAAS,WAAiB;AACxB,OAAI,UAAU,iBAAiB,EAAG;GAClC,IAAI,IAAI,GACN,IAAI;GACN,MAAMA,IAAc,EAAE;AACtB,QAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;IACrC,MAAMC,UAA8B,UAAU,cAC5C,YAAY,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC,IACnC;AACD,QAAI,CAAC,QAAS;IAEd,MAAM,SAAS,iBAAiB,QAAQ;IACxC,MAAM,SAAS,cAAc,MAAM,GAAG,MAAM,GAAG,GAC7C,MAAM,QAAQ,YAAY,WAAW,OAAO,WAAW,EACvD,SAAS,QAAQ,YAAY,QAAQ,eAAe,WAAW,OAAO,cAAc;AAEtF,QAAI,KAAK,IAAI,QAAQ,EAAE;AACvB,QAAI,KAAK,IAAI,GAAG,OAAO;AAEvB,MAAE,KAAK,GAAG,MAAM,IAAI,MAAM,MAAM,OAAO,GAAG,MAAM;AAChD,MAAE,KAAK,IAAI,OAAO,GAAG,SAAS;;AAGhC,UAAO;IACL,MAAM,EAAE,KAAK,IAAI;IACjB,OAAO,IAAI;IACX,QAAQ;IACT,CAAC;;EAGJ,MAAM,WAAW,IAAI,eAAe,SAAS;AAC7C,YAAU;AAEV,WAAS,QAAQ,UAAU;AAC3B,eAAa;AACX,YAAS,YAAY;;IAEtB,CAAC,MAAM,CAAC;AAEX,KAAI,MAAM,WAAW,EACnB,QACE,oBAAC;EAAI,WAAU;YACZ,KAAK;GACF;AAGV,QACE,4CACG,OACC,oBAAC;EACC,WAAU;EACV,OAAO;GACL,OAAO,IAAI;GACX,QAAQ,IAAI;GACZ,WAAW,2BAET,mBACE,wDAAwD,IAAI,MAAM,GAAG,IAAI,OAAO,aAAa,IAAI,KAAK,wDACvG,CACF;GACF;YAED,oBAAC;GACe;GACd,WAAU;IACV;GACE,EAER,oBAAC;EAAI,KAAK,UAAU,cAAc,IAAI;EAAE,WAAW,GAAG,iBAAiB,UAAU;EAAE,GAAI;YACpF,MAAM,KAAK,MAAM,MAChB,oBAAC;GAEO;GACN,OAAO,MAAM,IAAI,IAAI;GACrB,OAAO,MAAM,IAAI,IAAI;KAHhB,KAAK,IAIV,CACF;GACE,IACL;;AAIP,SAAS,cAAc,OAAuB;AAC5C,KAAI,SAAS,EAAG,QAAO;AACvB,KAAI,UAAU,EAAG,QAAO;AACxB,QAAO;;AAGT,SAAS,cAAc,OAAuB;AAC5C,QAAO,SAAS,IAAI,KAAK;;AAG3B,SAAS,QAAQ,EACf,MACA,QAAQ,KAAK,OACb,QAAQ,KAAK,SAKZ;CACD,MAAM,SAAS,cAAc,KAAK,MAAM,EACtC,cAAc,cAAc,MAAM,EAClC,cAAc,cAAc,MAAM;AAEpC,QACE,qBAAC,UAAU;EACT,MAAM,KAAK;EACX,OAAO,EACL,oBAAoB,cAAc,KAAK,MAAM,EAC9C;EACD,WAAU;;GAET,WAAW,eACV,oBAAC;IACC,OAAM;IACN,SAAQ;IACR,WAAU;cAEV,oBAAC;KACC,IAAI;KACJ,IAAG;KACH,IAAI;KACJ,IAAG;KACH,WAAU;KACV,aAAY;MACZ;KACE;GAER,oBAAC;IACC,WAAW,GACT,+CACA,WAAW,eAAe,WAC1B,WAAW,eAAe,aAC3B;IACD,OAAO,EACL,kBAAkB,QACnB;KACD;GACD,KAAK;;GACY"}
@@ -1,3 +1,12 @@
1
- import { type ComponentProps } from 'react';
2
- export declare function TOCItems({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
1
+ import { ComponentProps } from "react";
2
+ import * as react_jsx_runtime0 from "react/jsx-runtime";
3
+
4
+ //#region src/components/toc/default.d.ts
5
+ declare function TOCItems({
6
+ ref,
7
+ className,
8
+ ...props
9
+ }: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
10
+ //#endregion
11
+ export { TOCItems };
3
12
  //# sourceMappingURL=default.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../src/components/toc/default.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAU,MAAM,OAAO,CAAC;AAKpD,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAgC3E"}
1
+ {"version":3,"file":"default.d.ts","names":[],"sources":["../../../src/components/toc/default.tsx"],"sourcesContent":[],"mappings":";;;;iBAQgB,QAAA;;;;GAAuC,wBAAqB,kBAAA,CAAA,GAAA,CAAA"}
@@ -1,19 +1,40 @@
1
1
  'use client';
2
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useI18n } from '../../contexts/i18n.js';
4
- import { cn } from '../../cn.js';
5
- import { useRef } from 'react';
6
- import { mergeRefs } from '../../merge-refs.js';
7
- import { TocThumb, useTOCItems } from './index.js';
8
- import * as Primitive from 'fumadocs-core/toc';
9
- export function TOCItems({ ref, className, ...props }) {
10
- const containerRef = useRef(null);
11
- const items = useTOCItems();
12
- const { text } = useI18n();
13
- if (items.length === 0)
14
- return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
15
- return (_jsxs(_Fragment, { children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute top-0 translate-y-(--fd-top) h-(--fd-height) w-px bg-fd-primary transition-[translate,height]" }), _jsx("div", { ref: mergeRefs(ref, containerRef), className: cn('flex flex-col border-s border-fd-foreground/10', className), ...props, children: items.map((item) => (_jsx(TOCItem, { item: item }, item.url))) })] }));
2
+
3
+ import { cn } from "../../cn.js";
4
+ import { useI18n } from "../../contexts/i18n.js";
5
+ import { mergeRefs } from "../../merge-refs.js";
6
+ import { TocThumb, useTOCItems } from "./index.js";
7
+ import { useRef } from "react";
8
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
+ import * as Primitive from "fumadocs-core/toc";
10
+
11
+ //#region src/components/toc/default.tsx
12
+ function TOCItems({ ref, className, ...props }) {
13
+ const containerRef = useRef(null);
14
+ const items = useTOCItems();
15
+ const { text } = useI18n();
16
+ if (items.length === 0) return /* @__PURE__ */ jsx("div", {
17
+ className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
18
+ children: text.tocNoHeadings
19
+ });
20
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TocThumb, {
21
+ containerRef,
22
+ className: "absolute top-(--fd-top) h-(--fd-height) w-0.5 rounded-e-sm bg-fd-primary transition-[top,height] ease-linear duration-250"
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
+ })] });
16
29
  }
17
30
  function TOCItem({ item }) {
18
- return (_jsx(Primitive.TOCItem, { href: item.url, className: cn('prose py-1.5 text-sm text-fd-muted-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary', item.depth <= 2 && 'ps-3', item.depth === 3 && 'ps-6', item.depth >= 4 && 'ps-8'), children: item.title }));
31
+ return /* @__PURE__ */ jsx(Primitive.TOCItem, {
32
+ href: item.url,
33
+ className: cn("prose py-1.5 text-sm text-fd-muted-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8"),
34
+ children: item.title
35
+ });
19
36
  }
37
+
38
+ //#endregion
39
+ export { TOCItems };
40
+ //# sourceMappingURL=default.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"default.js","names":[],"sources":["../../../src/components/toc/default.tsx"],"sourcesContent":["'use client';\nimport { useI18n } from '@/contexts/i18n';\nimport { cn } from '@/cn';\nimport { type ComponentProps, useRef } from 'react';\nimport { mergeRefs } from '@/merge-refs';\nimport { TocThumb, useTOCItems } from '.';\nimport * as Primitive from 'fumadocs-core/toc';\n\nexport function TOCItems({ ref, className, ...props }: ComponentProps<'div'>) {\n const containerRef = useRef<HTMLDivElement>(null);\n const items = useTOCItems();\n const { text } = useI18n();\n\n if (items.length === 0)\n return (\n <div className=\"rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground\">\n {text.tocNoHeadings}\n </div>\n );\n\n return (\n <>\n <TocThumb\n containerRef={containerRef}\n className=\"absolute top-(--fd-top) h-(--fd-height) w-0.5 rounded-e-sm bg-fd-primary transition-[top,height] ease-linear duration-250\"\n />\n <div\n ref={mergeRefs(ref, containerRef)}\n className={cn('flex flex-col border-s border-fd-foreground/10', className)}\n {...props}\n >\n {items.map((item) => (\n <TOCItem key={item.url} item={item} />\n ))}\n </div>\n </>\n );\n}\n\nfunction TOCItem({ item }: { item: Primitive.TOCItemType }) {\n return (\n <Primitive.TOCItem\n href={item.url}\n className={cn(\n 'prose py-1.5 text-sm text-fd-muted-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary',\n item.depth <= 2 && 'ps-3',\n item.depth === 3 && 'ps-6',\n item.depth >= 4 && 'ps-8',\n )}\n >\n {item.title}\n </Primitive.TOCItem>\n );\n}\n"],"mappings":";;;;;;;;;;;AAQA,SAAgB,SAAS,EAAE,KAAK,WAAW,GAAG,SAAgC;CAC5E,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,QAAQ,aAAa;CAC3B,MAAM,EAAE,SAAS,SAAS;AAE1B,KAAI,MAAM,WAAW,EACnB,QACE,oBAAC;EAAI,WAAU;YACZ,KAAK;GACF;AAGV,QACE,4CACE,oBAAC;EACe;EACd,WAAU;GACV,EACF,oBAAC;EACC,KAAK,UAAU,KAAK,aAAa;EACjC,WAAW,GAAG,kDAAkD,UAAU;EAC1E,GAAI;YAEH,MAAM,KAAK,SACV,oBAAC,WAA6B,QAAhB,KAAK,IAAmB,CACtC;GACE,IACL;;AAIP,SAAS,QAAQ,EAAE,QAAyC;AAC1D,QACE,oBAAC,UAAU;EACT,MAAM,KAAK;EACX,WAAW,GACT,yIACA,KAAK,SAAS,KAAK,QACnB,KAAK,UAAU,KAAK,QACpB,KAAK,SAAS,KAAK,OACpB;YAEA,KAAK;GACY"}
@@ -1,11 +1,26 @@
1
- import * as Primitive from 'fumadocs-core/toc';
2
- import { type ComponentProps, type RefObject } from 'react';
3
- export declare function useTOCItems(): Primitive.TOCItemType[];
4
- export declare function TOCProvider({ toc, children, ...props }: ComponentProps<typeof Primitive.AnchorProvider>): import("react/jsx-runtime").JSX.Element;
5
- export declare function TOCScrollArea({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
1
+ import { ComponentProps, RefObject } from "react";
2
+ import * as react_jsx_runtime1 from "react/jsx-runtime";
3
+ import * as Primitive from "fumadocs-core/toc";
4
+
5
+ //#region src/components/toc/index.d.ts
6
+ declare function useTOCItems(): Primitive.TOCItemType[];
7
+ declare function TOCProvider({
8
+ toc,
9
+ children,
10
+ ...props
11
+ }: ComponentProps<typeof Primitive.AnchorProvider>): react_jsx_runtime1.JSX.Element;
12
+ declare function TOCScrollArea({
13
+ ref,
14
+ className,
15
+ ...props
16
+ }: ComponentProps<'div'>): react_jsx_runtime1.JSX.Element;
6
17
  interface RefProps {
7
- containerRef: RefObject<HTMLElement | null>;
18
+ containerRef: RefObject<HTMLElement | null>;
8
19
  }
9
- export declare function TocThumb({ containerRef, ...props }: ComponentProps<'div'> & RefProps): import("react/jsx-runtime").JSX.Element;
10
- export {};
20
+ declare function TocThumb({
21
+ containerRef,
22
+ ...props
23
+ }: ComponentProps<'div'> & RefProps): react_jsx_runtime1.JSX.Element;
24
+ //#endregion
25
+ export { TOCProvider, TOCScrollArea, TocThumb, useTOCItems };
11
26
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toc/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,SAAS,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAOf,wBAAgB,WAAW,IAAI,SAAS,CAAC,WAAW,EAAE,CAErD;AAED,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,cAAc,CAAC,2CAQjD;AAED,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAiBvB;AAID,UAAU,QAAQ;IAChB,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC7C;AAED,wBAAgB,QAAQ,CAAC,EACvB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,QAAQ,2CA4BlC"}
1
+ {"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/toc/index.tsx"],"sourcesContent":[],"mappings":";;;;;iBAiBgB,WAAA,CAAA,GAAe,SAAA,CAAU;iBAIzB,WAAA;;;;GAIb,sBAAsB,SAAA,CAAU,kBAAe,kBAAA,CAAA,GAAA,CAAA;iBAUlC,aAAA;;;;GAA4C,wBAAqB,kBAAA,CAAA,GAAA,CAAA;AAlBjF,UAqCU,QAAA,CArCiB;EAIX,YAAA,EAkCA,SAlCW,CAkCD,WAlCC,GAAA,IAAA,CAAA;;AAEzB,iBAmCc,QAAA,CAnCd;EAAA,YAAA;EAAA,GAAA;AAAA,CAAA,EAmCmD,cAnCnD,CAAA,KAAA,CAAA,GAmC2E,QAnC3E,CAAA,EAmCmF,kBAAA,CAAA,GAAA,CAAA,OAnCnF"}
@@ -1,64 +1,82 @@
1
1
  'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import * as Primitive from 'fumadocs-core/toc';
4
- import { createContext, use, useEffect, useEffectEvent, useRef, } from 'react';
5
- import { cn } from '../../cn.js';
6
- import { mergeRefs } from '../../merge-refs.js';
7
- import { useOnChange } from 'fumadocs-core/utils/use-on-change';
2
+
3
+ import { cn } from "../../cn.js";
4
+ import { mergeRefs } from "../../merge-refs.js";
5
+ import { createContext, use, useEffect, useEffectEvent, useRef } from "react";
6
+ import { jsx } from "react/jsx-runtime";
7
+ import * as Primitive from "fumadocs-core/toc";
8
+ import { useOnChange } from "fumadocs-core/utils/use-on-change";
9
+
10
+ //#region src/components/toc/index.tsx
8
11
  const TOCContext = createContext([]);
9
- export function useTOCItems() {
10
- return use(TOCContext);
12
+ function useTOCItems() {
13
+ return use(TOCContext);
11
14
  }
12
- export function TOCProvider({ toc, children, ...props }) {
13
- return (_jsx(TOCContext, { value: toc, children: _jsx(Primitive.AnchorProvider, { toc: toc, ...props, children: children }) }));
15
+ function TOCProvider({ toc, children, ...props }) {
16
+ return /* @__PURE__ */ jsx(TOCContext, {
17
+ value: toc,
18
+ children: /* @__PURE__ */ jsx(Primitive.AnchorProvider, {
19
+ toc,
20
+ ...props,
21
+ children
22
+ })
23
+ });
14
24
  }
15
- export function TOCScrollArea({ ref, className, ...props }) {
16
- const viewRef = useRef(null);
17
- return (_jsx("div", { ref: mergeRefs(viewRef, ref), className: cn('relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3', className), ...props, children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: props.children }) }));
25
+ function TOCScrollArea({ ref, className, ...props }) {
26
+ const viewRef = useRef(null);
27
+ return /* @__PURE__ */ jsx("div", {
28
+ ref: mergeRefs(viewRef, ref),
29
+ className: cn("relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3", className),
30
+ ...props,
31
+ children: /* @__PURE__ */ jsx(Primitive.ScrollProvider, {
32
+ containerRef: viewRef,
33
+ children: props.children
34
+ })
35
+ });
18
36
  }
19
- export function TocThumb({ containerRef, ...props }) {
20
- const thumbRef = useRef(null);
21
- const active = Primitive.useActiveAnchors();
22
- const onPrint = useEffectEvent(() => {
23
- if (!containerRef.current || !thumbRef.current)
24
- return;
25
- update(thumbRef.current, calc(containerRef.current, active));
26
- });
27
- useEffect(() => {
28
- if (!containerRef.current)
29
- return;
30
- const container = containerRef.current;
31
- const observer = new ResizeObserver(onPrint);
32
- observer.observe(container);
33
- return () => {
34
- observer.disconnect();
35
- };
36
- }, [containerRef]);
37
- useOnChange(active, () => {
38
- if (containerRef.current && thumbRef.current) {
39
- update(thumbRef.current, calc(containerRef.current, active));
40
- }
41
- });
42
- return _jsx("div", { ref: thumbRef, role: "none", ...props });
37
+ function TocThumb({ containerRef, ...props }) {
38
+ const thumbRef = useRef(null);
39
+ const active = Primitive.useActiveAnchors();
40
+ function update(info) {
41
+ const element = thumbRef.current;
42
+ if (!element) return;
43
+ element.style.setProperty("--fd-top", `${info[0]}px`);
44
+ element.style.setProperty("--fd-height", `${info[1]}px`);
45
+ }
46
+ const onPrint = useEffectEvent(() => {
47
+ if (containerRef.current) update(calc(containerRef.current, active));
48
+ });
49
+ useEffect(() => {
50
+ if (!containerRef.current) return;
51
+ const container = containerRef.current;
52
+ const observer = new ResizeObserver(onPrint);
53
+ observer.observe(container);
54
+ return () => {
55
+ observer.disconnect();
56
+ };
57
+ }, [containerRef]);
58
+ useOnChange(active, () => {
59
+ if (containerRef.current) update(calc(containerRef.current, active));
60
+ });
61
+ return /* @__PURE__ */ jsx("div", {
62
+ ref: thumbRef,
63
+ "data-hidden": active.length === 0,
64
+ ...props
65
+ });
43
66
  }
44
67
  function calc(container, active) {
45
- if (active.length === 0 || container.clientHeight === 0) {
46
- return [0, 0];
47
- }
48
- let upper = Number.MAX_VALUE, lower = 0;
49
- for (const item of active) {
50
- const element = container.querySelector(`a[href="#${item}"]`);
51
- if (!element)
52
- continue;
53
- const styles = getComputedStyle(element);
54
- upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
55
- lower = Math.max(lower, element.offsetTop +
56
- element.clientHeight -
57
- parseFloat(styles.paddingBottom));
58
- }
59
- return [upper, lower - upper];
60
- }
61
- function update(element, info) {
62
- element.style.setProperty('--fd-top', `${info[0]}px`);
63
- element.style.setProperty('--fd-height', `${info[1]}px`);
68
+ if (active.length === 0 || container.clientHeight === 0) return [0, 0];
69
+ let upper = Number.MAX_VALUE, lower = 0;
70
+ for (const item of active) {
71
+ const element = container.querySelector(`a[href="#${item}"]`);
72
+ if (!element) continue;
73
+ const styles = getComputedStyle(element);
74
+ upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
75
+ lower = Math.max(lower, element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom));
76
+ }
77
+ return [upper, lower - upper];
64
78
  }
79
+
80
+ //#endregion
81
+ export { TOCProvider, TOCScrollArea, TocThumb, useTOCItems };
82
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/toc/index.tsx"],"sourcesContent":["'use client';\nimport * as Primitive from 'fumadocs-core/toc';\nimport {\n type ComponentProps,\n createContext,\n type RefObject,\n use,\n useEffect,\n useEffectEvent,\n useRef,\n} from 'react';\nimport { cn } from '@/cn';\nimport { mergeRefs } from '@/merge-refs';\nimport { useOnChange } from 'fumadocs-core/utils/use-on-change';\n\nconst TOCContext = createContext<Primitive.TOCItemType[]>([]);\n\nexport function useTOCItems(): Primitive.TOCItemType[] {\n return use(TOCContext);\n}\n\nexport function TOCProvider({\n toc,\n children,\n ...props\n}: ComponentProps<typeof Primitive.AnchorProvider>) {\n return (\n <TOCContext value={toc}>\n <Primitive.AnchorProvider toc={toc} {...props}>\n {children}\n </Primitive.AnchorProvider>\n </TOCContext>\n );\n}\n\nexport function TOCScrollArea({ ref, className, ...props }: ComponentProps<'div'>) {\n const viewRef = useRef<HTMLDivElement>(null);\n\n return (\n <div\n ref={mergeRefs(viewRef, ref)}\n className={cn(\n 'relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3',\n className,\n )}\n {...props}\n >\n <Primitive.ScrollProvider containerRef={viewRef}>{props.children}</Primitive.ScrollProvider>\n </div>\n );\n}\n\ntype TocThumbType = [top: number, height: number];\n\ninterface RefProps {\n containerRef: RefObject<HTMLElement | null>;\n}\n\nexport function TocThumb({ containerRef, ...props }: ComponentProps<'div'> & RefProps) {\n const thumbRef = useRef<HTMLDivElement>(null);\n const active = Primitive.useActiveAnchors();\n function update(info: TocThumbType): void {\n const element = thumbRef.current;\n if (!element) return;\n element.style.setProperty('--fd-top', `${info[0]}px`);\n element.style.setProperty('--fd-height', `${info[1]}px`);\n }\n\n const onPrint = useEffectEvent(() => {\n if (containerRef.current) {\n update(calc(containerRef.current, active));\n }\n });\n\n useEffect(() => {\n if (!containerRef.current) return;\n const container = containerRef.current;\n\n const observer = new ResizeObserver(onPrint);\n observer.observe(container);\n\n return () => {\n observer.disconnect();\n };\n }, [containerRef]);\n\n useOnChange(active, () => {\n if (containerRef.current) {\n update(calc(containerRef.current, active));\n }\n });\n\n return <div ref={thumbRef} data-hidden={active.length === 0} {...props} />;\n}\n\nfunction calc(container: HTMLElement, active: string[]): TocThumbType {\n if (active.length === 0 || container.clientHeight === 0) {\n return [0, 0];\n }\n\n let upper = Number.MAX_VALUE,\n lower = 0;\n\n for (const item of active) {\n const element = container.querySelector<HTMLElement>(`a[href=\"#${item}\"]`);\n if (!element) continue;\n\n const styles = getComputedStyle(element);\n upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));\n lower = Math.max(\n lower,\n element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom),\n );\n }\n\n return [upper, lower - upper];\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAM,aAAa,cAAuC,EAAE,CAAC;AAE7D,SAAgB,cAAuC;AACrD,QAAO,IAAI,WAAW;;AAGxB,SAAgB,YAAY,EAC1B,KACA,UACA,GAAG,SAC+C;AAClD,QACE,oBAAC;EAAW,OAAO;YACjB,oBAAC,UAAU;GAAoB;GAAK,GAAI;GACrC;IACwB;GAChB;;AAIjB,SAAgB,cAAc,EAAE,KAAK,WAAW,GAAG,SAAgC;CACjF,MAAM,UAAU,OAAuB,KAAK;AAE5C,QACE,oBAAC;EACC,KAAK,UAAU,SAAS,IAAI;EAC5B,WAAW,GACT,uKACA,UACD;EACD,GAAI;YAEJ,oBAAC,UAAU;GAAe,cAAc;aAAU,MAAM;IAAoC;GACxF;;AAUV,SAAgB,SAAS,EAAE,cAAc,GAAG,SAA2C;CACrF,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,SAAS,UAAU,kBAAkB;CAC3C,SAAS,OAAO,MAA0B;EACxC,MAAM,UAAU,SAAS;AACzB,MAAI,CAAC,QAAS;AACd,UAAQ,MAAM,YAAY,YAAY,GAAG,KAAK,GAAG,IAAI;AACrD,UAAQ,MAAM,YAAY,eAAe,GAAG,KAAK,GAAG,IAAI;;CAG1D,MAAM,UAAU,qBAAqB;AACnC,MAAI,aAAa,QACf,QAAO,KAAK,aAAa,SAAS,OAAO,CAAC;GAE5C;AAEF,iBAAgB;AACd,MAAI,CAAC,aAAa,QAAS;EAC3B,MAAM,YAAY,aAAa;EAE/B,MAAM,WAAW,IAAI,eAAe,QAAQ;AAC5C,WAAS,QAAQ,UAAU;AAE3B,eAAa;AACX,YAAS,YAAY;;IAEtB,CAAC,aAAa,CAAC;AAElB,aAAY,cAAc;AACxB,MAAI,aAAa,QACf,QAAO,KAAK,aAAa,SAAS,OAAO,CAAC;GAE5C;AAEF,QAAO,oBAAC;EAAI,KAAK;EAAU,eAAa,OAAO,WAAW;EAAG,GAAI;GAAS;;AAG5E,SAAS,KAAK,WAAwB,QAAgC;AACpE,KAAI,OAAO,WAAW,KAAK,UAAU,iBAAiB,EACpD,QAAO,CAAC,GAAG,EAAE;CAGf,IAAI,QAAQ,OAAO,WACjB,QAAQ;AAEV,MAAK,MAAM,QAAQ,QAAQ;EACzB,MAAM,UAAU,UAAU,cAA2B,YAAY,KAAK,IAAI;AAC1E,MAAI,CAAC,QAAS;EAEd,MAAM,SAAS,iBAAiB,QAAQ;AACxC,UAAQ,KAAK,IAAI,OAAO,QAAQ,YAAY,WAAW,OAAO,WAAW,CAAC;AAC1E,UAAQ,KAAK,IACX,OACA,QAAQ,YAAY,QAAQ,eAAe,WAAW,OAAO,cAAc,CAC5E;;AAGH,QAAO,CAAC,OAAO,QAAQ,MAAM"}