fumadocs-ui 11.3.1 → 12.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-24NYFO7H.js → chunk-2KMKNVSN.js} +2 -4
- package/dist/{chunk-C4PI62MH.js → chunk-34Z7WODD.js} +6 -8
- package/dist/{chunk-GDRBCN6Q.js → chunk-3F57TIUQ.js} +21 -7
- package/dist/{chunk-PXDQVGII.js → chunk-7EMVRXMS.js} +10 -1
- package/dist/{chunk-7F2LGCS6.js → chunk-AN2Y6MA2.js} +2 -4
- package/dist/{chunk-PW7TBOIJ.js → chunk-CRYPD6UZ.js} +2 -1
- package/dist/{chunk-UKE65HV3.js → chunk-IOHAG6BY.js} +1 -1
- package/dist/chunk-JQW5DMD2.js +226 -0
- package/dist/{chunk-WNKY4RA5.js → chunk-UBVEKNRF.js} +1 -1
- package/dist/{chunk-E2VA3Y4S.js → chunk-XXVXIK4M.js} +2 -3
- package/dist/components/accordion.js +2 -2
- package/dist/components/api.js +5 -8
- package/dist/components/callout.js +1 -1
- package/dist/components/card.js +1 -1
- package/dist/components/codeblock.js +3 -3
- package/dist/components/dialog/search-algolia.js +4 -3
- package/dist/components/dialog/search-default.js +4 -3
- package/dist/components/dialog/search.js +4 -3
- package/dist/components/files.js +1 -1
- package/dist/components/heading.js +2 -2
- package/dist/components/image-zoom.js +4 -6
- package/dist/components/inline-toc.js +1 -1
- package/dist/components/layout/language-toggle.d.ts +6 -0
- package/dist/components/layout/language-toggle.js +58 -0
- package/dist/components/layout/root-toggle.d.ts +16 -0
- package/dist/components/layout/root-toggle.js +60 -0
- package/dist/components/roll-button.js +2 -3
- package/dist/components/steps.js +1 -1
- package/dist/components/tabs.js +6 -11
- package/dist/components/type-table.js +2 -2
- package/dist/docs.client.d.ts +13 -0
- package/dist/docs.client.js +396 -0
- package/dist/{i18n-p5QWhj_3.d.ts → i18n-CE8z-AAs.d.ts} +1 -0
- package/dist/i18n.d.ts +3 -6
- package/dist/i18n.js +5 -104
- package/dist/{layout-vxXAvjoq.d.ts → layout.client-Duq0TTke.d.ts} +23 -15
- package/dist/layout.client.d.ts +2 -8
- package/dist/layout.client.js +39 -571
- package/dist/layout.d.ts +1 -1
- package/dist/layout.js +42 -28
- package/dist/mdx.client.js +3 -3
- package/dist/mdx.js +4 -4
- package/dist/page.client.js +7 -8
- package/dist/page.js +19 -10
- package/dist/provider.d.ts +12 -13
- package/dist/provider.js +10 -11
- package/dist/style.css +1 -1
- package/dist/tailwind-plugin.cjs +34 -43
- package/dist/tailwind-plugin.js +35 -44
- package/dist/twoslash/popup.js +8 -14
- package/dist/twoslash.css +1 -1
- package/package.json +4 -5
- /package/dist/{chunk-6C3VEZWH.js → chunk-MLKGABMK.js} +0 -0
- /package/dist/{tree-cqNEopxM.d.ts → tree-CrKzI9Nz.d.ts} +0 -0
package/dist/layout.client.js
CHANGED
|
@@ -1,211 +1,49 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
} from "./chunk-C4PI62MH.js";
|
|
9
|
-
import {
|
|
10
|
-
ScrollArea,
|
|
11
|
-
ScrollViewport
|
|
12
|
-
} from "./chunk-VYTHQTZE.js";
|
|
3
|
+
LargeSearchToggle,
|
|
4
|
+
LinkItem,
|
|
5
|
+
SearchToggle,
|
|
6
|
+
ThemeToggle
|
|
7
|
+
} from "./chunk-JQW5DMD2.js";
|
|
13
8
|
import {
|
|
14
9
|
Popover,
|
|
15
10
|
PopoverContent,
|
|
16
11
|
PopoverTrigger
|
|
17
|
-
} from "./chunk-
|
|
18
|
-
import
|
|
19
|
-
hasActive,
|
|
20
|
-
isActive
|
|
21
|
-
} from "./chunk-7F2LGCS6.js";
|
|
12
|
+
} from "./chunk-UBVEKNRF.js";
|
|
13
|
+
import "./chunk-AN2Y6MA2.js";
|
|
22
14
|
import {
|
|
23
15
|
useSearchContext
|
|
24
16
|
} from "./chunk-FSPYEOFC.js";
|
|
25
17
|
import {
|
|
26
18
|
useI18n
|
|
27
|
-
} from "./chunk-
|
|
28
|
-
import
|
|
29
|
-
Collapsible,
|
|
30
|
-
CollapsibleContent,
|
|
31
|
-
CollapsibleTrigger
|
|
32
|
-
} from "./chunk-7XPZOMJ2.js";
|
|
19
|
+
} from "./chunk-CRYPD6UZ.js";
|
|
20
|
+
import "./chunk-7XPZOMJ2.js";
|
|
33
21
|
import {
|
|
34
22
|
buttonVariants
|
|
35
23
|
} from "./chunk-7GZKFBAP.js";
|
|
36
24
|
import {
|
|
37
25
|
twMerge
|
|
38
26
|
} from "./chunk-TK3TM3MR.js";
|
|
39
|
-
import "./chunk-
|
|
40
|
-
|
|
41
|
-
// src/components/nav.tsx
|
|
42
|
-
import { MenuIcon, MoreVertical, SearchIcon, X } from "lucide-react";
|
|
43
|
-
import Link2 from "fumadocs-core/link";
|
|
44
|
-
import { SidebarTrigger } from "fumadocs-core/sidebar";
|
|
45
|
-
import { useCallback as useCallback2, useEffect, useState } from "react";
|
|
46
|
-
import { usePathname as usePathname2 } from "next/navigation";
|
|
47
|
-
|
|
48
|
-
// src/components/theme-toggle.tsx
|
|
49
|
-
import { cva } from "class-variance-authority";
|
|
50
|
-
import { Moon, Sun } from "lucide-react";
|
|
51
|
-
import { useTheme } from "next-themes";
|
|
52
|
-
import { useCallback } from "react";
|
|
53
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
54
|
-
var buttonVariants2 = cva("size-7 rounded-full p-1.5 text-muted-foreground", {
|
|
55
|
-
variants: {
|
|
56
|
-
dark: {
|
|
57
|
-
true: "dark:bg-accent dark:text-accent-foreground",
|
|
58
|
-
false: "bg-accent text-accent-foreground dark:bg-transparent dark:text-muted-foreground"
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
function ThemeToggle({
|
|
63
|
-
className,
|
|
64
|
-
...props
|
|
65
|
-
}) {
|
|
66
|
-
const { setTheme, resolvedTheme } = useTheme();
|
|
67
|
-
const onToggle = useCallback(() => {
|
|
68
|
-
setTheme(resolvedTheme === "dark" ? "light" : "dark");
|
|
69
|
-
}, [setTheme, resolvedTheme]);
|
|
70
|
-
return /* @__PURE__ */ jsxs(
|
|
71
|
-
"button",
|
|
72
|
-
{
|
|
73
|
-
type: "button",
|
|
74
|
-
className: twMerge(
|
|
75
|
-
"inline-flex items-center rounded-full border p-0.5",
|
|
76
|
-
className
|
|
77
|
-
),
|
|
78
|
-
"aria-label": "Toggle Theme",
|
|
79
|
-
onClick: onToggle,
|
|
80
|
-
...props,
|
|
81
|
-
children: [
|
|
82
|
-
/* @__PURE__ */ jsx(Sun, { className: twMerge(buttonVariants2({ dark: false })) }),
|
|
83
|
-
/* @__PURE__ */ jsx(Moon, { className: twMerge(buttonVariants2({ dark: true })) })
|
|
84
|
-
]
|
|
85
|
-
}
|
|
86
|
-
);
|
|
87
|
-
}
|
|
27
|
+
import "./chunk-MLKGABMK.js";
|
|
88
28
|
|
|
89
|
-
// src/components/
|
|
29
|
+
// src/components/layout/nav.tsx
|
|
30
|
+
import { MoreVertical } from "lucide-react";
|
|
90
31
|
import Link from "fumadocs-core/link";
|
|
91
|
-
import {
|
|
32
|
+
import { useEffect, useState } from "react";
|
|
92
33
|
import { usePathname } from "next/navigation";
|
|
93
|
-
import {
|
|
94
|
-
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
95
|
-
var linkItemVariants = cva2(
|
|
96
|
-
"inline-flex items-center gap-1.5 rounded-lg p-2 text-[15px] text-muted-foreground transition-colors [&_svg]:size-4",
|
|
97
|
-
{
|
|
98
|
-
variants: {
|
|
99
|
-
active: {
|
|
100
|
-
true: "bg-accent text-accent-foreground",
|
|
101
|
-
false: "hover:bg-accent"
|
|
102
|
-
}
|
|
103
|
-
},
|
|
104
|
-
defaultVariants: {
|
|
105
|
-
active: false
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
);
|
|
109
|
-
function LinkItem({
|
|
110
|
-
item,
|
|
111
|
-
on = "nav",
|
|
112
|
-
className,
|
|
113
|
-
...props
|
|
114
|
-
}) {
|
|
115
|
-
const pathname = usePathname();
|
|
116
|
-
if (item.type === "menu" && on === "nav") {
|
|
117
|
-
return /* @__PURE__ */ jsxs2(Popover, { children: [
|
|
118
|
-
/* @__PURE__ */ jsxs2(
|
|
119
|
-
PopoverTrigger,
|
|
120
|
-
{
|
|
121
|
-
className: twMerge(
|
|
122
|
-
linkItemVariants({ className }),
|
|
123
|
-
"data-[state=open]:bg-accent"
|
|
124
|
-
),
|
|
125
|
-
...props,
|
|
126
|
-
children: [
|
|
127
|
-
item.text,
|
|
128
|
-
/* @__PURE__ */ jsx2(ChevronDown, { className: "ml-auto size-4" })
|
|
129
|
-
]
|
|
130
|
-
}
|
|
131
|
-
),
|
|
132
|
-
/* @__PURE__ */ jsx2(PopoverContent, { className: "flex flex-col", children: item.items.map((child, i) => /* @__PURE__ */ jsx2(LinkItem, { item: child, on: "menu" }, i)) })
|
|
133
|
-
] });
|
|
134
|
-
}
|
|
135
|
-
if (item.type === "menu") {
|
|
136
|
-
return /* @__PURE__ */ jsxs2(Collapsible, { className: "flex flex-col", children: [
|
|
137
|
-
/* @__PURE__ */ jsxs2(
|
|
138
|
-
CollapsibleTrigger,
|
|
139
|
-
{
|
|
140
|
-
className: twMerge(linkItemVariants({ className }), "group/link"),
|
|
141
|
-
...props,
|
|
142
|
-
children: [
|
|
143
|
-
item.icon,
|
|
144
|
-
item.text,
|
|
145
|
-
/* @__PURE__ */ jsx2(ChevronDown, { className: "ml-auto size-4 group-data-[state=closed]/link:-rotate-90" })
|
|
146
|
-
]
|
|
147
|
-
}
|
|
148
|
-
),
|
|
149
|
-
/* @__PURE__ */ jsx2(CollapsibleContent, { children: /* @__PURE__ */ jsx2("div", { className: "flex flex-col py-1 ps-4", children: item.items.map((child, i) => /* @__PURE__ */ jsx2(LinkItem, { item: child, on: "menu" }, i)) }) })
|
|
150
|
-
] });
|
|
151
|
-
}
|
|
152
|
-
const activeType = item.active ?? "url";
|
|
153
|
-
const active = activeType !== "none" ? isActive(item.url, pathname, activeType === "nested-url") : false;
|
|
154
|
-
if (item.type === "secondary" && on === "nav") {
|
|
155
|
-
return /* @__PURE__ */ jsx2(
|
|
156
|
-
Link,
|
|
157
|
-
{
|
|
158
|
-
"aria-label": item.text,
|
|
159
|
-
href: item.url,
|
|
160
|
-
external: item.external,
|
|
161
|
-
className: twMerge(
|
|
162
|
-
buttonVariants({
|
|
163
|
-
size: "icon",
|
|
164
|
-
color: "ghost",
|
|
165
|
-
className
|
|
166
|
-
})
|
|
167
|
-
),
|
|
168
|
-
...props,
|
|
169
|
-
children: item.icon
|
|
170
|
-
}
|
|
171
|
-
);
|
|
172
|
-
}
|
|
173
|
-
return /* @__PURE__ */ jsxs2(
|
|
174
|
-
Link,
|
|
175
|
-
{
|
|
176
|
-
href: item.url,
|
|
177
|
-
external: item.external,
|
|
178
|
-
className: twMerge(
|
|
179
|
-
linkItemVariants({
|
|
180
|
-
active,
|
|
181
|
-
className
|
|
182
|
-
})
|
|
183
|
-
),
|
|
184
|
-
...props,
|
|
185
|
-
children: [
|
|
186
|
-
on === "menu" ? item.icon : null,
|
|
187
|
-
item.text
|
|
188
|
-
]
|
|
189
|
-
}
|
|
190
|
-
);
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
// src/components/nav.tsx
|
|
194
|
-
import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
34
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
195
35
|
function Nav({
|
|
196
36
|
title = "My App",
|
|
197
37
|
url = "/",
|
|
198
38
|
items,
|
|
199
39
|
transparentMode = "none",
|
|
200
|
-
enableSidebar,
|
|
201
40
|
enableSearch = true,
|
|
202
41
|
children
|
|
203
42
|
}) {
|
|
204
43
|
const search = useSearchContext();
|
|
205
44
|
const [transparent, setTransparent] = useState(transparentMode !== "none");
|
|
206
45
|
useEffect(() => {
|
|
207
|
-
if (transparentMode !== "top")
|
|
208
|
-
return;
|
|
46
|
+
if (transparentMode !== "top") return;
|
|
209
47
|
const listener = () => {
|
|
210
48
|
setTransparent(window.scrollY < 10);
|
|
211
49
|
};
|
|
@@ -215,16 +53,16 @@ function Nav({
|
|
|
215
53
|
window.removeEventListener("scroll", listener);
|
|
216
54
|
};
|
|
217
55
|
}, [transparentMode]);
|
|
218
|
-
return /* @__PURE__ */
|
|
56
|
+
return /* @__PURE__ */ jsx(
|
|
219
57
|
"header",
|
|
220
58
|
{
|
|
221
59
|
className: twMerge(
|
|
222
60
|
"sticky top-0 z-50 h-16 border-b transition-colors",
|
|
223
61
|
transparent ? "border-transparent" : "border-foreground/10 bg-background/50 backdrop-blur-md"
|
|
224
62
|
),
|
|
225
|
-
children: /* @__PURE__ */
|
|
226
|
-
/* @__PURE__ */
|
|
227
|
-
|
|
63
|
+
children: /* @__PURE__ */ jsxs("nav", { className: "mx-auto flex size-full max-w-container flex-row items-center gap-6 px-4", children: [
|
|
64
|
+
/* @__PURE__ */ jsx(
|
|
65
|
+
Link,
|
|
228
66
|
{
|
|
229
67
|
href: url,
|
|
230
68
|
className: "inline-flex items-center gap-3 font-semibold",
|
|
@@ -232,7 +70,7 @@ function Nav({
|
|
|
232
70
|
}
|
|
233
71
|
),
|
|
234
72
|
children,
|
|
235
|
-
items.filter((item) => item.type !== "secondary").map((item, i) => /* @__PURE__ */
|
|
73
|
+
items.filter((item) => item.type !== "secondary").map((item, i) => /* @__PURE__ */ jsx(
|
|
236
74
|
LinkItem,
|
|
237
75
|
{
|
|
238
76
|
item,
|
|
@@ -240,34 +78,14 @@ function Nav({
|
|
|
240
78
|
},
|
|
241
79
|
i
|
|
242
80
|
)),
|
|
243
|
-
/* @__PURE__ */
|
|
244
|
-
enableSearch && search.enabled ? /* @__PURE__ */
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
buttonVariants({
|
|
252
|
-
size: "icon",
|
|
253
|
-
color: "ghost",
|
|
254
|
-
className: "group md:hidden"
|
|
255
|
-
})
|
|
256
|
-
),
|
|
257
|
-
children: [
|
|
258
|
-
/* @__PURE__ */ jsx3(MenuIcon, { className: "group-data-[open=true]:hidden" }),
|
|
259
|
-
/* @__PURE__ */ jsx3(X, { className: "hidden group-data-[open=true]:block" })
|
|
260
|
-
]
|
|
261
|
-
}
|
|
262
|
-
) : null,
|
|
263
|
-
/* @__PURE__ */ jsx3(
|
|
264
|
-
LinksMenu,
|
|
265
|
-
{
|
|
266
|
-
items,
|
|
267
|
-
className: twMerge("lg:hidden", enableSidebar && "max-md:hidden")
|
|
268
|
-
}
|
|
269
|
-
),
|
|
270
|
-
items.filter((item) => item.type === "secondary").map((item, i) => /* @__PURE__ */ jsx3(LinkItem, { item, className: "max-lg:hidden" }, i))
|
|
81
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-row items-center justify-end md:gap-2", children: [
|
|
82
|
+
enableSearch && search.enabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
83
|
+
/* @__PURE__ */ jsx(SearchToggle, { className: "md:hidden" }),
|
|
84
|
+
/* @__PURE__ */ jsx(LargeSearchToggle, { className: "w-full max-w-[240px] max-md:hidden" })
|
|
85
|
+
] }) : null,
|
|
86
|
+
/* @__PURE__ */ jsx(ThemeToggle, { className: "max-lg:hidden" }),
|
|
87
|
+
/* @__PURE__ */ jsx(LinksMenu, { items, className: "lg:hidden" }),
|
|
88
|
+
items.filter((item) => item.type === "secondary").map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, className: "max-lg:hidden" }, i))
|
|
271
89
|
] })
|
|
272
90
|
] })
|
|
273
91
|
}
|
|
@@ -275,12 +93,13 @@ function Nav({
|
|
|
275
93
|
}
|
|
276
94
|
function LinksMenu({ items, ...props }) {
|
|
277
95
|
const [open, setOpen] = useState(false);
|
|
278
|
-
const
|
|
96
|
+
const { text } = useI18n();
|
|
97
|
+
const pathname = usePathname();
|
|
279
98
|
useEffect(() => {
|
|
280
99
|
setOpen(false);
|
|
281
100
|
}, [pathname]);
|
|
282
|
-
return /* @__PURE__ */
|
|
283
|
-
/* @__PURE__ */
|
|
101
|
+
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
102
|
+
/* @__PURE__ */ jsx(
|
|
284
103
|
PopoverTrigger,
|
|
285
104
|
{
|
|
286
105
|
...props,
|
|
@@ -291,369 +110,18 @@ function LinksMenu({ items, ...props }) {
|
|
|
291
110
|
className: props.className
|
|
292
111
|
})
|
|
293
112
|
),
|
|
294
|
-
children: /* @__PURE__ */
|
|
113
|
+
children: /* @__PURE__ */ jsx(MoreVertical, {})
|
|
295
114
|
}
|
|
296
115
|
),
|
|
297
|
-
/* @__PURE__ */
|
|
298
|
-
items.map((item, i) => /* @__PURE__ */
|
|
299
|
-
/* @__PURE__ */
|
|
300
|
-
/* @__PURE__ */
|
|
301
|
-
/* @__PURE__ */
|
|
116
|
+
/* @__PURE__ */ jsxs(PopoverContent, { className: "flex flex-col", children: [
|
|
117
|
+
items.map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, on: "menu" }, i)),
|
|
118
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between px-2 py-1", children: [
|
|
119
|
+
/* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: text.chooseTheme }),
|
|
120
|
+
/* @__PURE__ */ jsx(ThemeToggle, {})
|
|
302
121
|
] })
|
|
303
122
|
] })
|
|
304
123
|
] });
|
|
305
124
|
}
|
|
306
|
-
function SearchToggle() {
|
|
307
|
-
const { hotKey, setOpenSearch } = useSearchContext();
|
|
308
|
-
const { text } = useI18n();
|
|
309
|
-
const onClick = useCallback2(() => {
|
|
310
|
-
setOpenSearch(true);
|
|
311
|
-
}, [setOpenSearch]);
|
|
312
|
-
return /* @__PURE__ */ jsxs3(Fragment, { children: [
|
|
313
|
-
/* @__PURE__ */ jsx3(
|
|
314
|
-
"button",
|
|
315
|
-
{
|
|
316
|
-
type: "button",
|
|
317
|
-
className: twMerge(
|
|
318
|
-
buttonVariants({
|
|
319
|
-
size: "icon",
|
|
320
|
-
color: "ghost",
|
|
321
|
-
className: "md:hidden"
|
|
322
|
-
})
|
|
323
|
-
),
|
|
324
|
-
"aria-label": "Open Search",
|
|
325
|
-
onClick,
|
|
326
|
-
children: /* @__PURE__ */ jsx3(SearchIcon, {})
|
|
327
|
-
}
|
|
328
|
-
),
|
|
329
|
-
/* @__PURE__ */ jsxs3(
|
|
330
|
-
"button",
|
|
331
|
-
{
|
|
332
|
-
type: "button",
|
|
333
|
-
className: "inline-flex w-full max-w-[240px] items-center gap-2 rounded-full border bg-secondary/50 p-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground max-md:hidden",
|
|
334
|
-
onClick,
|
|
335
|
-
children: [
|
|
336
|
-
/* @__PURE__ */ jsx3(SearchIcon, { className: "ms-1 size-4" }),
|
|
337
|
-
text.search,
|
|
338
|
-
/* @__PURE__ */ jsx3("div", { className: "ms-auto inline-flex gap-0.5 text-xs", children: hotKey.map((k, i) => /* @__PURE__ */ jsx3("kbd", { className: "rounded-md border bg-background px-1.5", children: k.display }, i)) })
|
|
339
|
-
]
|
|
340
|
-
}
|
|
341
|
-
)
|
|
342
|
-
] });
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
// src/components/sidebar.tsx
|
|
346
|
-
import { cva as cva3 } from "class-variance-authority";
|
|
347
|
-
import { ChevronDown as ChevronDown2, ExternalLinkIcon } from "lucide-react";
|
|
348
|
-
import * as Base from "fumadocs-core/sidebar";
|
|
349
|
-
import { usePathname as usePathname3 } from "next/navigation";
|
|
350
|
-
import {
|
|
351
|
-
createContext,
|
|
352
|
-
useCallback as useCallback3,
|
|
353
|
-
useContext,
|
|
354
|
-
useEffect as useEffect2,
|
|
355
|
-
useMemo,
|
|
356
|
-
useState as useState2
|
|
357
|
-
} from "react";
|
|
358
|
-
import Link3 from "fumadocs-core/link";
|
|
359
|
-
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
360
|
-
var itemVariants = cva3(
|
|
361
|
-
"flex w-full flex-row items-center gap-2 rounded-md px-2 py-1.5 text-muted-foreground transition-colors duration-100 [&_svg]:size-4",
|
|
362
|
-
{
|
|
363
|
-
variants: {
|
|
364
|
-
active: {
|
|
365
|
-
true: "bg-primary/10 font-medium text-primary",
|
|
366
|
-
false: "hover:bg-accent/50 hover:text-accent-foreground/80 hover:transition-none"
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
);
|
|
371
|
-
var defaultComponents = {
|
|
372
|
-
Folder: FolderNode,
|
|
373
|
-
Separator: SeparatorNode,
|
|
374
|
-
Item: PageNode
|
|
375
|
-
};
|
|
376
|
-
var SidebarContext = createContext({
|
|
377
|
-
defaultOpenLevel: 1,
|
|
378
|
-
components: defaultComponents
|
|
379
|
-
});
|
|
380
|
-
function Sidebar({
|
|
381
|
-
footer,
|
|
382
|
-
components,
|
|
383
|
-
defaultOpenLevel = 1,
|
|
384
|
-
banner,
|
|
385
|
-
items,
|
|
386
|
-
...props
|
|
387
|
-
}) {
|
|
388
|
-
const alwaysShowFooter = Boolean(footer);
|
|
389
|
-
const context = useMemo(
|
|
390
|
-
() => ({
|
|
391
|
-
defaultOpenLevel,
|
|
392
|
-
components: { ...defaultComponents, ...components }
|
|
393
|
-
}),
|
|
394
|
-
[components, defaultOpenLevel]
|
|
395
|
-
);
|
|
396
|
-
return /* @__PURE__ */ jsx4(SidebarContext.Provider, { value: context, children: /* @__PURE__ */ jsxs4(
|
|
397
|
-
Base.SidebarList,
|
|
398
|
-
{
|
|
399
|
-
blockScrollingWidth: 768,
|
|
400
|
-
className: twMerge(
|
|
401
|
-
"flex w-full flex-col text-[15px] md:sticky md:top-16 md:h-body md:w-[240px] md:text-sm xl:w-[260px]",
|
|
402
|
-
"max-md:fixed max-md:inset-0 max-md:z-40 max-md:pt-16 max-md:data-[open=false]:hidden",
|
|
403
|
-
props.className
|
|
404
|
-
),
|
|
405
|
-
children: [
|
|
406
|
-
/* @__PURE__ */ jsx4(
|
|
407
|
-
"div",
|
|
408
|
-
{
|
|
409
|
-
id: "sidebar-background",
|
|
410
|
-
className: "absolute z-[-1] size-full max-md:bg-background/80 max-md:backdrop-blur-md"
|
|
411
|
-
}
|
|
412
|
-
),
|
|
413
|
-
/* @__PURE__ */ jsxs4(ViewportContent, { children: [
|
|
414
|
-
banner,
|
|
415
|
-
items.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex flex-col md:hidden", children: items.map((item, i) => /* @__PURE__ */ jsx4(LinkItem, { item, on: "menu" }, i)) })
|
|
416
|
-
] }),
|
|
417
|
-
/* @__PURE__ */ jsxs4(
|
|
418
|
-
"div",
|
|
419
|
-
{
|
|
420
|
-
className: twMerge(
|
|
421
|
-
"flex flex-row items-center gap-2 border-t p-3 md:p-2",
|
|
422
|
-
!alwaysShowFooter && "md:hidden"
|
|
423
|
-
),
|
|
424
|
-
children: [
|
|
425
|
-
footer,
|
|
426
|
-
/* @__PURE__ */ jsx4(ThemeToggle, { className: "md:hidden" })
|
|
427
|
-
]
|
|
428
|
-
}
|
|
429
|
-
)
|
|
430
|
-
]
|
|
431
|
-
}
|
|
432
|
-
) });
|
|
433
|
-
}
|
|
434
|
-
function ViewportContent({
|
|
435
|
-
children
|
|
436
|
-
}) {
|
|
437
|
-
const { root } = useTreeContext();
|
|
438
|
-
return /* @__PURE__ */ jsx4(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx4(ScrollViewport, { children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-8 p-4 pb-10 md:px-3 md:pt-10", children: [
|
|
439
|
-
children,
|
|
440
|
-
/* @__PURE__ */ jsx4(NodeList, { items: root.children })
|
|
441
|
-
] }) }) });
|
|
442
|
-
}
|
|
443
|
-
function NodeList({
|
|
444
|
-
items,
|
|
445
|
-
level = 0,
|
|
446
|
-
...props
|
|
447
|
-
}) {
|
|
448
|
-
const { components } = useContext(SidebarContext);
|
|
449
|
-
return /* @__PURE__ */ jsx4("div", { ...props, children: items.map((item) => {
|
|
450
|
-
const id = `${item.type}_${item.name}`;
|
|
451
|
-
switch (item.type) {
|
|
452
|
-
case "separator":
|
|
453
|
-
return /* @__PURE__ */ jsx4(components.Separator, { item }, id);
|
|
454
|
-
case "folder":
|
|
455
|
-
return /* @__PURE__ */ jsx4(components.Folder, { item, level: level + 1 }, id);
|
|
456
|
-
default:
|
|
457
|
-
return /* @__PURE__ */ jsx4(components.Item, { item }, item.url);
|
|
458
|
-
}
|
|
459
|
-
}) });
|
|
460
|
-
}
|
|
461
|
-
function PageNode({
|
|
462
|
-
item: { icon, external = false, url, name },
|
|
463
|
-
nested = false
|
|
464
|
-
}) {
|
|
465
|
-
const pathname = usePathname3();
|
|
466
|
-
const active = isActive(url, pathname, nested);
|
|
467
|
-
return /* @__PURE__ */ jsxs4(
|
|
468
|
-
Link3,
|
|
469
|
-
{
|
|
470
|
-
href: url,
|
|
471
|
-
external,
|
|
472
|
-
className: twMerge(itemVariants({ active })),
|
|
473
|
-
children: [
|
|
474
|
-
icon ?? (external ? /* @__PURE__ */ jsx4(ExternalLinkIcon, {}) : null),
|
|
475
|
-
name
|
|
476
|
-
]
|
|
477
|
-
}
|
|
478
|
-
);
|
|
479
|
-
}
|
|
480
|
-
function FolderNode({
|
|
481
|
-
item: { name, children, index, icon, defaultOpen = false },
|
|
482
|
-
level
|
|
483
|
-
}) {
|
|
484
|
-
const { defaultOpenLevel } = useContext(SidebarContext);
|
|
485
|
-
const pathname = usePathname3();
|
|
486
|
-
const active = index !== void 0 && isActive(index.url, pathname, false);
|
|
487
|
-
const childActive = useMemo(
|
|
488
|
-
() => hasActive(children, pathname),
|
|
489
|
-
[children, pathname]
|
|
490
|
-
);
|
|
491
|
-
const shouldExtend = active || childActive || defaultOpenLevel >= level || defaultOpen;
|
|
492
|
-
const [extend, setExtend] = useState2(shouldExtend);
|
|
493
|
-
useEffect2(() => {
|
|
494
|
-
if (shouldExtend)
|
|
495
|
-
setExtend(true);
|
|
496
|
-
}, [shouldExtend]);
|
|
497
|
-
const onClick = useCallback3(
|
|
498
|
-
(e) => {
|
|
499
|
-
if (e.target !== e.currentTarget || active) {
|
|
500
|
-
setExtend((prev) => !prev);
|
|
501
|
-
e.preventDefault();
|
|
502
|
-
}
|
|
503
|
-
},
|
|
504
|
-
[active]
|
|
505
|
-
);
|
|
506
|
-
return /* @__PURE__ */ jsxs4(Collapsible, { open: extend, onOpenChange: setExtend, children: [
|
|
507
|
-
index ? /* @__PURE__ */ jsxs4(
|
|
508
|
-
Link3,
|
|
509
|
-
{
|
|
510
|
-
className: twMerge(itemVariants({ active })),
|
|
511
|
-
href: index.url,
|
|
512
|
-
onClick,
|
|
513
|
-
children: [
|
|
514
|
-
icon,
|
|
515
|
-
name,
|
|
516
|
-
/* @__PURE__ */ jsx4(
|
|
517
|
-
ChevronDown2,
|
|
518
|
-
{
|
|
519
|
-
className: twMerge(
|
|
520
|
-
"ms-auto transition-transform",
|
|
521
|
-
!extend && "-rotate-90"
|
|
522
|
-
)
|
|
523
|
-
}
|
|
524
|
-
)
|
|
525
|
-
]
|
|
526
|
-
}
|
|
527
|
-
) : /* @__PURE__ */ jsxs4(CollapsibleTrigger, { className: twMerge(itemVariants({ active })), children: [
|
|
528
|
-
icon,
|
|
529
|
-
name,
|
|
530
|
-
/* @__PURE__ */ jsx4(
|
|
531
|
-
ChevronDown2,
|
|
532
|
-
{
|
|
533
|
-
className: twMerge(
|
|
534
|
-
"ms-auto transition-transform",
|
|
535
|
-
!extend && "-rotate-90"
|
|
536
|
-
)
|
|
537
|
-
}
|
|
538
|
-
)
|
|
539
|
-
] }),
|
|
540
|
-
/* @__PURE__ */ jsx4(CollapsibleContent, { children: /* @__PURE__ */ jsx4(
|
|
541
|
-
NodeList,
|
|
542
|
-
{
|
|
543
|
-
className: "ms-2 flex flex-col border-s py-2 ps-2",
|
|
544
|
-
items: children,
|
|
545
|
-
level
|
|
546
|
-
}
|
|
547
|
-
) })
|
|
548
|
-
] });
|
|
549
|
-
}
|
|
550
|
-
function SeparatorNode({
|
|
551
|
-
item
|
|
552
|
-
}) {
|
|
553
|
-
return /* @__PURE__ */ jsx4("p", { className: "mb-2 mt-8 px-2 font-medium first:mt-0", children: item.name });
|
|
554
|
-
}
|
|
555
|
-
|
|
556
|
-
// src/components/dynamic-sidebar.tsx
|
|
557
|
-
import { useCallback as useCallback4, useRef, useState as useState3 } from "react";
|
|
558
|
-
import { SidebarIcon } from "lucide-react";
|
|
559
|
-
import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
560
|
-
function DynamicSidebar(props) {
|
|
561
|
-
const { collapsed, setCollapsed } = useSidebar();
|
|
562
|
-
const [hover, setHover] = useState3(false);
|
|
563
|
-
const timerRef = useRef(0);
|
|
564
|
-
const onCollapse = useCallback4(() => {
|
|
565
|
-
setCollapsed(!collapsed);
|
|
566
|
-
}, [collapsed, setCollapsed]);
|
|
567
|
-
const onHover = useCallback4((e) => {
|
|
568
|
-
if (e.pointerType === "touch")
|
|
569
|
-
return;
|
|
570
|
-
window.clearTimeout(timerRef.current);
|
|
571
|
-
setHover(true);
|
|
572
|
-
}, []);
|
|
573
|
-
const onLeave = useCallback4((e) => {
|
|
574
|
-
if (e.pointerType === "touch")
|
|
575
|
-
return;
|
|
576
|
-
window.clearTimeout(timerRef.current);
|
|
577
|
-
timerRef.current = window.setTimeout(() => {
|
|
578
|
-
setHover(false);
|
|
579
|
-
}, 300);
|
|
580
|
-
}, []);
|
|
581
|
-
return /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
582
|
-
collapsed ? /* @__PURE__ */ jsx5(
|
|
583
|
-
"div",
|
|
584
|
-
{
|
|
585
|
-
className: "fixed bottom-0 start-0 top-16 max-md:hidden",
|
|
586
|
-
onPointerEnter: onHover,
|
|
587
|
-
onPointerLeave: onLeave,
|
|
588
|
-
style: {
|
|
589
|
-
maxWidth: "240px",
|
|
590
|
-
width: "calc(max(0px, 100vw - 1400px)/2)",
|
|
591
|
-
minWidth: "1rem"
|
|
592
|
-
}
|
|
593
|
-
}
|
|
594
|
-
) : null,
|
|
595
|
-
collapsed ? /* @__PURE__ */ jsx5(
|
|
596
|
-
"button",
|
|
597
|
-
{
|
|
598
|
-
type: "button",
|
|
599
|
-
"aria-label": "Collapse Sidebar",
|
|
600
|
-
className: twMerge(
|
|
601
|
-
buttonVariants({
|
|
602
|
-
color: "secondary",
|
|
603
|
-
size: "icon",
|
|
604
|
-
className: "fixed start-4 bottom-4 z-10 max-md:hidden"
|
|
605
|
-
})
|
|
606
|
-
),
|
|
607
|
-
onClick: onCollapse,
|
|
608
|
-
children: /* @__PURE__ */ jsx5(SidebarIcon, {})
|
|
609
|
-
}
|
|
610
|
-
) : null,
|
|
611
|
-
/* @__PURE__ */ jsx5(
|
|
612
|
-
"div",
|
|
613
|
-
{
|
|
614
|
-
id: "dynamic-sidebar",
|
|
615
|
-
"data-open": !collapsed,
|
|
616
|
-
"data-hover": hover,
|
|
617
|
-
onPointerEnter: onHover,
|
|
618
|
-
onPointerLeave: onLeave,
|
|
619
|
-
"aria-hidden": Boolean(collapsed && !hover),
|
|
620
|
-
className: twMerge(
|
|
621
|
-
"z-40 transition-transform max-md:absolute",
|
|
622
|
-
collapsed && "md:fixed md:bottom-2 md:start-2 md:top-16 md:overflow-hidden md:rounded-xl md:border md:bg-background md:shadow-md"
|
|
623
|
-
),
|
|
624
|
-
children: /* @__PURE__ */ jsx5(
|
|
625
|
-
Sidebar,
|
|
626
|
-
{
|
|
627
|
-
...props,
|
|
628
|
-
className: twMerge(collapsed && "md:h-full"),
|
|
629
|
-
footer: /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
630
|
-
props.footer,
|
|
631
|
-
/* @__PURE__ */ jsx5(
|
|
632
|
-
"button",
|
|
633
|
-
{
|
|
634
|
-
type: "button",
|
|
635
|
-
"aria-label": "Collapse Sidebar",
|
|
636
|
-
className: twMerge(
|
|
637
|
-
buttonVariants({
|
|
638
|
-
color: "ghost",
|
|
639
|
-
size: "icon",
|
|
640
|
-
className: "max-md:hidden ms-auto"
|
|
641
|
-
})
|
|
642
|
-
),
|
|
643
|
-
onClick: onCollapse,
|
|
644
|
-
children: /* @__PURE__ */ jsx5(SidebarIcon, {})
|
|
645
|
-
}
|
|
646
|
-
)
|
|
647
|
-
] })
|
|
648
|
-
}
|
|
649
|
-
)
|
|
650
|
-
}
|
|
651
|
-
)
|
|
652
|
-
] });
|
|
653
|
-
}
|
|
654
125
|
export {
|
|
655
|
-
|
|
656
|
-
Nav,
|
|
657
|
-
Sidebar,
|
|
658
|
-
TreeContextProvider
|
|
126
|
+
Nav
|
|
659
127
|
};
|
package/dist/layout.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import 'fumadocs-core/server';
|
|
2
2
|
import 'react';
|
|
3
|
-
export { B as BaseLayoutProps, c as DocsLayout, D as DocsLayoutProps, b as Layout, L as LinkItemType } from './layout-
|
|
3
|
+
export { B as BaseLayoutProps, c as DocsLayout, D as DocsLayoutProps, b as Layout, L as LinkItemType } from './layout.client-Duq0TTke.js';
|