fumadocs-ui 11.3.2 → 12.0.1

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