fumadocs-ui 15.2.15 → 15.3.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.
Files changed (39) hide show
  1. package/css/black.css +2 -2
  2. package/css/neutral.css +2 -2
  3. package/css/ocean.css +3 -3
  4. package/css/preset.css +190 -1
  5. package/css/purple.css +10 -10
  6. package/dist/components/accordion.js +1 -1
  7. package/dist/components/codeblock.d.ts.map +1 -1
  8. package/dist/components/codeblock.js +5 -5
  9. package/dist/components/layout/root-toggle.d.ts +3 -3
  10. package/dist/components/layout/root-toggle.d.ts.map +1 -1
  11. package/dist/components/layout/root-toggle.js +1 -1
  12. package/dist/components/layout/sidebar.d.ts +14 -11
  13. package/dist/components/layout/sidebar.d.ts.map +1 -1
  14. package/dist/components/layout/sidebar.js +42 -33
  15. package/dist/components/tabs.d.ts +3 -1
  16. package/dist/components/tabs.d.ts.map +1 -1
  17. package/dist/components/tabs.js +25 -36
  18. package/dist/components/ui/tabs.d.ts.map +1 -1
  19. package/dist/components/ui/tabs.js +4 -4
  20. package/dist/contexts/sidebar.d.ts.map +1 -1
  21. package/dist/contexts/sidebar.js +2 -3
  22. package/dist/layouts/docs/shared.d.ts +0 -1
  23. package/dist/layouts/docs/shared.d.ts.map +1 -1
  24. package/dist/layouts/docs-client.d.ts.map +1 -1
  25. package/dist/layouts/docs-client.js +8 -8
  26. package/dist/layouts/docs.d.ts.map +1 -1
  27. package/dist/layouts/docs.js +2 -3
  28. package/dist/layouts/home/navbar.js +1 -1
  29. package/dist/layouts/notebook-client.d.ts.map +1 -1
  30. package/dist/layouts/notebook-client.js +4 -5
  31. package/dist/layouts/notebook.d.ts.map +1 -1
  32. package/dist/layouts/notebook.js +8 -8
  33. package/dist/page-client.d.ts.map +1 -1
  34. package/dist/page-client.js +3 -5
  35. package/dist/page.d.ts +2 -2
  36. package/dist/page.d.ts.map +1 -1
  37. package/dist/style.css +103 -111
  38. package/package.json +15 -13
  39. package/css/animations.css +0 -199
package/css/black.css CHANGED
@@ -7,7 +7,7 @@
7
7
  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
8
8
  --color-fd-card: hsl(0, 0%, 99.7%);
9
9
  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
10
- --color-fd-border: hsl(0, 0%, 89.8%);
10
+ --color-fd-border: hsla(0, 0%, 60%, 0.2);
11
11
  --color-fd-primary: hsl(0, 0%, 9%);
12
12
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
13
13
  --color-fd-secondary: hsl(0, 0%, 96.1%);
@@ -26,7 +26,7 @@
26
26
  --color-fd-popover-foreground: hsl(0, 0%, 98%);
27
27
  --color-fd-card: hsl(0, 0%, 4%);
28
28
  --color-fd-card-foreground: hsl(0, 0%, 98%);
29
- --color-fd-border: hsl(0, 0%, 14%);
29
+ --color-fd-border: hsl(0, 0%, 50%, 0.2);
30
30
  --color-fd-primary: hsl(0, 0%, 98%);
31
31
  --color-fd-primary-foreground: hsl(0, 0%, 9%);
32
32
  --color-fd-secondary: hsl(0, 0%, 12.9%);
package/css/neutral.css CHANGED
@@ -7,7 +7,7 @@
7
7
  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
8
8
  --color-fd-card: hsl(0, 0%, 94.7%);
9
9
  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
10
- --color-fd-border: hsl(0, 0%, 89.8%);
10
+ --color-fd-border: hsla(0, 0%, 62%, 20%);
11
11
  --color-fd-primary: hsl(0, 0%, 9%);
12
12
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
13
13
  --color-fd-secondary: hsl(0, 0%, 93.1%);
@@ -26,7 +26,7 @@
26
26
  --color-fd-popover-foreground: hsl(0, 0%, 88%);
27
27
  --color-fd-card: hsl(0, 0%, 9.8%);
28
28
  --color-fd-card-foreground: hsl(0, 0%, 98%);
29
- --color-fd-border: hsl(0, 0%, 14%);
29
+ --color-fd-border: hsla(0, 0%, 40%, 20%);
30
30
  --color-fd-primary: hsl(0, 0%, 98%);
31
31
  --color-fd-primary-foreground: hsl(0, 0%, 9%);
32
32
  --color-fd-secondary: hsl(0, 0%, 12.9%);
package/css/ocean.css CHANGED
@@ -18,15 +18,15 @@
18
18
  }
19
19
 
20
20
  .dark {
21
- --color-fd-background: hsl(220, 60%, 6%);
21
+ --color-fd-background: hsl(220, 60%, 8%);
22
22
  --color-fd-foreground: hsl(220, 60%, 94.5%);
23
23
  --color-fd-muted: hsl(220, 50%, 10%);
24
24
  --color-fd-muted-foreground: hsl(220, 30%, 65%);
25
25
  --color-fd-popover: hsl(220, 50%, 10%);
26
26
  --color-fd-popover-foreground: hsl(220, 60%, 94.5%);
27
- --color-fd-card: hsl(220, 50%, 10%);
27
+ --color-fd-card: hsla(220, 56%, 15%, 0.4);
28
28
  --color-fd-card-foreground: hsl(220, 60%, 94.5%);
29
- --color-fd-border: hsl(220, 50%, 20%);
29
+ --color-fd-border: hsla(220, 50%, 50%, 0.2);
30
30
  --color-fd-primary: hsl(205, 100%, 85%);
31
31
  --color-fd-primary-foreground: hsl(0, 0%, 9%);
32
32
  --color-fd-secondary: hsl(220, 50%, 20%);
package/css/preset.css CHANGED
@@ -1,5 +1,4 @@
1
1
  @import './shiki.css';
2
- @import './animations.css';
3
2
 
4
3
  @source '../dist/**/*.js';
5
4
  @plugin '../dist/theme/typography/index.js';
@@ -17,6 +16,196 @@
17
16
  --color-fd-diff-remove-symbol: rgb(230, 10, 100);
18
17
  --color-fd-diff-add: rgba(14, 180, 100, 0.12);
19
18
  --color-fd-diff-add-symbol: rgb(10, 200, 100);
19
+
20
+ --animate-fd-fade-in: fd-fade-in 300ms ease;
21
+ --animate-fd-fade-out: fd-fade-out 300ms ease;
22
+
23
+ --animate-fd-dialog-in: fd-dialog-in 200ms cubic-bezier(0.32, 0.72, 0, 1);
24
+ --animate-fd-dialog-out: fd-dialog-out 300ms cubic-bezier(0.32, 0.72, 0, 1);
25
+
26
+ --animate-fd-popover-in: fd-popover-in 150ms ease;
27
+ --animate-fd-popover-out: fd-popover-out 150ms ease;
28
+
29
+ --animate-fd-collapsible-down: fd-collapsible-down 150ms ease-out;
30
+ --animate-fd-collapsible-up: fd-collapsible-up 150ms ease-out;
31
+
32
+ --animate-fd-accordion-down: fd-accordion-down 200ms ease-out;
33
+ --animate-fd-accordion-up: fd-accordion-up 200ms ease-out;
34
+
35
+ --animate-fd-nav-menu-in: fd-nav-menu-in 200ms ease;
36
+ --animate-fd-nav-menu-out: fd-nav-menu-out 200ms ease;
37
+
38
+ --animate-fd-enterFromLeft: fd-enterFromLeft 250ms ease;
39
+ --animate-fd-enterFromRight: fd-enterFromRight 250ms ease;
40
+
41
+ --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
42
+ --animate-fd-exitToRight: fd-exitToRight 250ms ease;
43
+
44
+ @keyframes fd-collapsible-down {
45
+ from {
46
+ height: 0;
47
+ opacity: 0;
48
+ }
49
+ to {
50
+ height: var(--radix-collapsible-content-height);
51
+ }
52
+ }
53
+
54
+ @keyframes fd-collapsible-up {
55
+ from {
56
+ height: var(--radix-collapsible-content-height);
57
+ }
58
+ to {
59
+ height: 0;
60
+ opacity: 0;
61
+ }
62
+ }
63
+
64
+ @keyframes fd-accordion-down {
65
+ from {
66
+ height: 0;
67
+ opacity: 0.5;
68
+ }
69
+ to {
70
+ height: var(--radix-accordion-content-height);
71
+ }
72
+ }
73
+
74
+ @keyframes fd-accordion-up {
75
+ from {
76
+ height: var(--radix-accordion-content-height);
77
+ }
78
+ to {
79
+ height: 0;
80
+ opacity: 0.5;
81
+ }
82
+ }
83
+
84
+ @keyframes fd-dialog-in {
85
+ from {
86
+ transform: scale(1.06);
87
+ opacity: 0;
88
+ }
89
+ to {
90
+ transform: scale(1);
91
+ }
92
+ }
93
+
94
+ @keyframes fd-dialog-out {
95
+ from {
96
+ transform: scale(1);
97
+ }
98
+ to {
99
+ transform: scale(1.06);
100
+ opacity: 0;
101
+ }
102
+ }
103
+
104
+ @keyframes fd-popover-in {
105
+ from {
106
+ opacity: 0;
107
+ transform: translateY(-12px);
108
+ }
109
+ to {
110
+ opacity: 1;
111
+ transform: translateY(0);
112
+ }
113
+ }
114
+
115
+ @keyframes fd-popover-out {
116
+ from {
117
+ opacity: 1;
118
+ transform: translateY(0);
119
+ }
120
+ to {
121
+ opacity: 0;
122
+ transform: translateY(-12px);
123
+ }
124
+ }
125
+
126
+ @keyframes fd-fade-in {
127
+ from {
128
+ opacity: 0;
129
+ }
130
+ to {
131
+ opacity: 1;
132
+ }
133
+ }
134
+
135
+ @keyframes fd-fade-out {
136
+ from {
137
+ opacity: 1;
138
+ }
139
+ to {
140
+ opacity: 0;
141
+ }
142
+ }
143
+
144
+ @keyframes fd-enterFromRight {
145
+ from {
146
+ opacity: 0;
147
+ transform: translateX(200px);
148
+ }
149
+ to {
150
+ opacity: 1;
151
+ transform: translateX(0);
152
+ }
153
+ }
154
+
155
+ @keyframes fd-enterFromLeft {
156
+ from {
157
+ opacity: 0;
158
+ transform: translateX(-200px);
159
+ }
160
+ to {
161
+ opacity: 1;
162
+ transform: translateX(0);
163
+ }
164
+ }
165
+
166
+ @keyframes fd-exitToRight {
167
+ from {
168
+ opacity: 1;
169
+ transform: translateX(0);
170
+ }
171
+ to {
172
+ opacity: 0;
173
+ transform: translateX(200px);
174
+ }
175
+ }
176
+
177
+ @keyframes fd-exitToLeft {
178
+ from {
179
+ opacity: 1;
180
+ transform: translateX(0);
181
+ }
182
+ to {
183
+ opacity: 0;
184
+ transform: translateX(-200px);
185
+ }
186
+ }
187
+
188
+ @keyframes fd-nav-menu-in {
189
+ from {
190
+ opacity: 0;
191
+ height: 0px;
192
+ }
193
+ to {
194
+ opacity: 1;
195
+ height: var(--radix-navigation-menu-viewport-height);
196
+ }
197
+ }
198
+
199
+ @keyframes fd-nav-menu-out {
200
+ from {
201
+ opacity: 1;
202
+ height: var(--radix-navigation-menu-viewport-height);
203
+ }
204
+ to {
205
+ opacity: 0;
206
+ height: 0px;
207
+ }
208
+ }
20
209
  }
21
210
 
22
211
  @layer base {
package/css/purple.css CHANGED
@@ -1,8 +1,8 @@
1
1
  @theme {
2
2
  --color-fd-background: hsl(256, 100%, 96%);
3
3
  --color-fd-primary: hsl(270, 100%, 52%);
4
- --color-fd-border: hsl(270, 40%, 80%);
5
- --color-fd-accent: hsl(270, 60%, 86%);
4
+ --color-fd-border: hsla(270, 40%, 80%, 0.5);
5
+ --color-fd-accent: hsl(270, 40%, 88%);
6
6
  --color-fd-accent-foreground: hsl(270, 100%, 20%);
7
7
  --color-fd-muted: hsl(256, 60%, 94%);
8
8
  --color-fd-muted-foreground: hsl(256, 50%, 50%);
@@ -18,20 +18,20 @@
18
18
  }
19
19
 
20
20
  .dark {
21
- --color-fd-background: hsl(256, 60%, 6%);
21
+ --color-fd-background: hsl(256, 20%, 6%);
22
22
  --color-fd-primary: hsl(270, 100%, 86%);
23
- --color-fd-border: hsl(270, 100%, 20%);
24
- --color-fd-accent: hsl(256, 60%, 26%);
25
- --color-fd-accent-foreground: hsl(270, 100%, 86%);
26
- --color-fd-muted: hsl(256, 60%, 10%);
23
+ --color-fd-border: hsla(270, 50%, 40%, 0.3);
24
+ --color-fd-accent: hsl(256, 23%, 22%);
25
+ --color-fd-accent-foreground: hsl(270, 40%, 86%);
26
+ --color-fd-muted: hsl(256, 23%, 10%);
27
27
  --color-fd-foreground: hsl(256, 60%, 90%);
28
28
  --color-fd-muted-foreground: hsl(256, 50%, 75%);
29
- --color-fd-secondary: hsl(270, 100%, 20%);
29
+ --color-fd-secondary: hsl(270, 23%, 20%);
30
30
  --color-fd-secondary-foreground: hsl(256, 60%, 90%);
31
- --color-fd-card: hsl(256, 60%, 10%);
31
+ --color-fd-card: hsl(256, 23%, 10%);
32
32
  --color-fd-card-foreground: hsl(256, 60%, 90%);
33
33
  --color-fd-popover-foreground: hsl(256, 60%, 90%);
34
- --color-fd-popover: hsl(256, 60%, 6%);
34
+ --color-fd-popover: hsl(256, 23%, 6%);
35
35
  --color-fd-primary-foreground: hsl(256, 60%, 6%);
36
36
  --color-fd-ring: hsl(270, 100%, 86%);
37
37
  }
@@ -21,7 +21,7 @@ Accordions.displayName = 'Accordions';
21
21
  export const Accordion = forwardRef(({ title, className, id, children, ...props }, ref) => {
22
22
  return (_jsxs(AccordionPrimitive.Item, { ref: ref,
23
23
  // Use `id` instead if presents
24
- value: id ?? title, className: cn('group/accordion relative scroll-m-20', className), ...props, children: [_jsxs(AccordionPrimitive.Header, { id: id, className: "not-prose flex flex-row items-center text-fd-card-foreground font-medium has-focus-visible:bg-fd-accent", children: [_jsxs(AccordionPrimitive.Trigger, { className: "flex flex-1 items-center gap-2 px-4 py-2.5 text-start focus-visible:outline-none", children: [_jsx(ChevronRight, { className: "-ms-1 size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]/accordion:rotate-90" }), title] }), id ? _jsx(CopyButton, { id: id }) : null] }), _jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down", children: _jsx("div", { className: "px-4 py-2 prose-no-margin", children: children }) })] }));
24
+ value: id ?? title, className: cn('group/accordion relative scroll-m-20', className), ...props, children: [_jsxs(AccordionPrimitive.Header, { id: id, className: "not-prose flex flex-row items-center text-fd-card-foreground font-medium has-focus-visible:bg-fd-accent", children: [_jsxs(AccordionPrimitive.Trigger, { className: "flex flex-1 items-center gap-2 px-3 py-2.5 text-start focus-visible:outline-none", children: [_jsx(ChevronRight, { className: "size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]/accordion:rotate-90" }), title] }), id ? _jsx(CopyButton, { id: id }) : null] }), _jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down", children: _jsx("div", { className: "px-4 pb-2 text-[15px] prose-no-margin", children: children }) })] }));
25
25
  });
26
26
  function CopyButton({ id }) {
27
27
  const [checked, onClick] = useCopyButton(() => {
@@ -1 +1 @@
1
- {"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,uBAAuB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAef,CAAC;AAIF,eAAO,MAAM,SAAS;IA3CpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,uBAAuB;+CAqGxC,CAAC"}
1
+ {"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,uBAAuB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAxCpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,uBAAuB;+CAiGxC,CAAC"}
@@ -1,18 +1,18 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { Check, Copy } from '../icons.js';
4
- import { forwardRef, useCallback, useRef, } from 'react';
4
+ import { forwardRef, useRef, } from 'react';
5
5
  import { cn } from '../utils/cn.js';
6
6
  import { ScrollArea, ScrollBar, ScrollViewport, } from '../components/ui/scroll-area.js';
7
7
  import { useCopyButton } from '../utils/use-copy-button.js';
8
8
  import { buttonVariants } from '../components/ui/button.js';
9
9
  export const Pre = forwardRef(({ className, ...props }, ref) => {
10
- return (_jsx("pre", { ref: ref, className: cn('text-[13px] p-4 focus-visible:outline-none *:block *:w-full', className), ...props, children: props.children }));
10
+ return (_jsx("pre", { ref: ref, className: cn('text-[13px] p-4 *:block *:w-full', className), ...props, children: props.children }));
11
11
  });
12
12
  Pre.displayName = 'Pre';
13
13
  export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground = false, icon, viewportProps, ...props }, ref) => {
14
14
  const areaRef = useRef(null);
15
- const onCopy = useCallback(() => {
15
+ const onCopy = () => {
16
16
  const pre = areaRef.current?.getElementsByTagName('pre').item(0);
17
17
  if (!pre)
18
18
  return;
@@ -21,8 +21,8 @@ export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground =
21
21
  node.remove();
22
22
  });
23
23
  void navigator.clipboard.writeText(clone.textContent ?? '');
24
- }, []);
25
- return (_jsxs("figure", { ref: ref, ...props, className: cn('not-prose group fd-codeblock relative my-4 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)', props.className), children: [title ? (_jsxs("div", { className: "flex items-center gap-2 border-b bg-fd-muted px-4 py-1.5", children: [icon ? (_jsx("div", { className: "text-fd-muted-foreground [&_svg]:size-3.5", dangerouslySetInnerHTML: typeof icon === 'string'
24
+ };
25
+ return (_jsxs("figure", { ref: ref, ...props, className: cn('not-prose group relative my-4 overflow-hidden rounded-lg border bg-fd-card text-sm outline-none', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)', props.className), children: [title ? (_jsxs("div", { className: "flex items-center gap-2 bg-fd-secondary px-4 py-1.5", children: [icon ? (_jsx("div", { className: "text-fd-muted-foreground [&_svg]:size-3.5", dangerouslySetInnerHTML: typeof icon === 'string'
26
26
  ? {
27
27
  __html: icon,
28
28
  }
@@ -1,4 +1,4 @@
1
- import { type HTMLAttributes, type ReactNode } from 'react';
1
+ import { type ComponentProps, type ReactNode } from 'react';
2
2
  export interface Option {
3
3
  /**
4
4
  * Redirect URL of the folder, usually the index page
@@ -11,10 +11,10 @@ export interface Option {
11
11
  * Detect from a list of urls
12
12
  */
13
13
  urls?: Set<string>;
14
- props?: HTMLAttributes<HTMLElement>;
14
+ props?: ComponentProps<'a'>;
15
15
  }
16
16
  export declare function RootToggle({ options, placeholder, ...props }: {
17
17
  placeholder?: ReactNode;
18
18
  options: Option[];
19
- } & HTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
19
+ } & ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
20
20
  //# sourceMappingURL=root-toggle.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"root-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/layout/root-toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAQ/E,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAEnB,KAAK,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;CACrC;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,WAAW,EACX,GAAG,KAAK,EACT,EAAE;IACD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,GAAG,cAAc,CAAC,iBAAiB,CAAC,2CAyDpC"}
1
+ {"version":3,"file":"root-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/layout/root-toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAQ/E,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAEnB,KAAK,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,WAAW,EACX,GAAG,KAAK,EACT,EAAE;IACD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,GAAG,cAAc,CAAC,QAAQ,CAAC,2CAyD3B"}
@@ -27,5 +27,5 @@ export function RootToggle({ options, placeholder, ...props }) {
27
27
  : 'hover:bg-fd-accent/50', item.props?.className), children: _jsx(Item, { ...item }) }, item.url))) })] }));
28
28
  }
29
29
  function Item(props) {
30
- return (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: props.icon }), _jsxs("div", { className: "flex-1 text-start", children: [_jsx("p", { className: "text-sm font-medium", children: props.title }), props.description ? (_jsx("p", { className: "text-xs text-fd-muted-foreground", children: props.description })) : null] })] }));
30
+ return (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: props.icon }), _jsxs("div", { className: "flex-1 text-start", children: [_jsx("p", { className: "text-[15px] font-medium md:text-sm", children: props.title }), props.description ? (_jsx("p", { className: "text-sm text-fd-muted-foreground md:text-xs", children: props.description })) : null] })] }));
31
31
  }
@@ -1,9 +1,9 @@
1
- import { type ButtonHTMLAttributes, type FC, type HTMLAttributes, type ReactNode } from 'react';
1
+ import { type ComponentProps, type FC, type ReactNode } from 'react';
2
2
  import { type LinkProps } from 'fumadocs-core/link';
3
3
  import { type ScrollAreaProps } from '@radix-ui/react-scroll-area';
4
4
  import type { CollapsibleContentProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
5
5
  import type { PageTree } from 'fumadocs-core/server';
6
- export interface SidebarProps extends HTMLAttributes<HTMLElement> {
6
+ export interface SidebarProps extends ComponentProps<'aside'> {
7
7
  /**
8
8
  * Open folders by default if their level is lower or equal to a specific level
9
9
  * (Starting from 1)
@@ -17,25 +17,28 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
17
17
  * @defaultValue true
18
18
  */
19
19
  prefetch?: boolean;
20
+ /**
21
+ * Support collapsing the sidebar on desktop mode
22
+ *
23
+ * @defaultValue true
24
+ */
25
+ collapsible?: boolean;
20
26
  }
21
- export declare function CollapsibleSidebar(props: SidebarProps): import("react/jsx-runtime").JSX.Element;
22
- export declare function Sidebar({ defaultOpenLevel, prefetch, inner, ...props }: SidebarProps & {
23
- inner?: HTMLAttributes<HTMLDivElement>;
24
- }): import("react/jsx-runtime").JSX.Element;
25
- export declare function SidebarHeader(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
26
- export declare function SidebarFooter(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
27
+ export declare function Sidebar({ defaultOpenLevel, prefetch, collapsible, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
28
+ export declare function SidebarHeader(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
29
+ export declare function SidebarFooter(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
27
30
  export declare function SidebarViewport(props: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
28
- export declare function SidebarSeparator(props: HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
31
+ export declare function SidebarSeparator(props: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
29
32
  export declare function SidebarItem({ icon, ...props }: LinkProps & {
30
33
  icon?: ReactNode;
31
34
  }): import("react/jsx-runtime").JSX.Element;
32
- export declare function SidebarFolder({ defaultOpen, ...props }: HTMLAttributes<HTMLDivElement> & {
35
+ export declare function SidebarFolder({ defaultOpen, ...props }: ComponentProps<'div'> & {
33
36
  defaultOpen?: boolean;
34
37
  }): import("react/jsx-runtime").JSX.Element;
35
38
  export declare function SidebarFolderTrigger(props: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
36
39
  export declare function SidebarFolderLink(props: LinkProps): import("react/jsx-runtime").JSX.Element;
37
40
  export declare function SidebarFolderContent(props: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;
38
- export declare function SidebarCollapseTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
41
+ export declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
39
42
  export interface SidebarComponents {
40
43
  Item: FC<{
41
44
  item: PageTree.Item;
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,EAAE,EAEP,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,2CAuDrD;AAED,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAAE,2CAwC3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CASlE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAarD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAkB3E;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAmCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAmBlE;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAiB/C;AAgBD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAuDA"}
1
+ {"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EAGP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMrD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,OAAO,CAAC;IAC3D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2BD,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,YAAY,2CAkHd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAYzD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAYzD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAarD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAkB1D;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAmCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAgBrE;AAgBD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAuDA"}
@@ -1,7 +1,6 @@
1
1
  'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { ChevronDown, ExternalLink } from '../../icons.js';
4
- import * as Base from 'fumadocs-core/sidebar';
5
4
  import { usePathname } from 'fumadocs-core/framework';
6
5
  import { createContext, Fragment, useContext, useMemo, useRef, useState, } from 'react';
7
6
  import Link from 'fumadocs-core/link';
@@ -13,7 +12,10 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../comp
13
12
  import { useSidebar } from '../../contexts/sidebar.js';
14
13
  import { cva } from 'class-variance-authority';
15
14
  import { useTreeContext, useTreePath } from '../../contexts/tree.js';
16
- const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-md p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0', {
15
+ import { useMediaQuery } from 'fumadocs-core/utils/use-media-query';
16
+ import { RemoveScroll } from 'react-remove-scroll';
17
+ import { Presence } from '@radix-ui/react-presence';
18
+ const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] md:py-1.5 [&_svg]:size-4 [&_svg]:shrink-0', {
17
19
  variants: {
18
20
  active: {
19
21
  true: 'bg-fd-primary/10 text-fd-primary',
@@ -23,24 +25,49 @@ const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-md p
23
25
  });
24
26
  const Context = createContext(null);
25
27
  const FolderContext = createContext(null);
26
- export function CollapsibleSidebar(props) {
27
- const { collapsed } = useSidebar();
28
+ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = true, ...props }) {
29
+ const { open, setOpen, collapsed } = useSidebar();
30
+ const context = useMemo(() => {
31
+ return {
32
+ defaultOpenLevel,
33
+ prefetch,
34
+ level: 1,
35
+ };
36
+ }, [defaultOpenLevel, prefetch]);
28
37
  const [hover, setHover] = useState(false);
29
38
  const timerRef = useRef(0);
30
39
  const closeTimeRef = useRef(0);
40
+ // md
41
+ const isMobile = useMediaQuery('(width < 768px)') ?? false;
31
42
  useOnChange(collapsed, () => {
32
43
  setHover(false);
33
44
  closeTimeRef.current = Date.now() + 150;
34
45
  });
35
- return (_jsx(Sidebar, { ...props, onPointerEnter: (e) => {
36
- if (!collapsed ||
46
+ if (isMobile) {
47
+ const state = open ? 'open' : 'closed';
48
+ return (_jsxs(_Fragment, { children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0 bg-black/30 backdrop-blur-sm data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsx(RemoveScroll, { as: "aside", enabled: present, id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col rounded-e-xl border-e start-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-enterFromLeft data-[state=closed]:animate-fd-exitToLeft', !present && 'invisible', props.className), children: _jsx(Context.Provider, { value: context, children: props.children }) })) })] }));
49
+ }
50
+ return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('sticky top-(--fd-sidebar-top) z-20 bg-fd-card text-sm h-(--fd-sidebar-height) max-md:hidden', collapsible && [
51
+ 'transition-all',
52
+ collapsed &&
53
+ '-me-(--fd-sidebar-width) -translate-x-(--fd-sidebar-offset) rtl:translate-x-(--fd-sidebar-offset)',
54
+ collapsed && hover && 'z-50 translate-x-0',
55
+ collapsed && !hover && 'opacity-0',
56
+ ], props.className), style: {
57
+ '--fd-sidebar-offset': 'calc(var(--fd-sidebar-width) - 6px)',
58
+ '--fd-sidebar-top': 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
59
+ '--fd-sidebar-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
60
+ ...props.style,
61
+ }, onPointerEnter: (e) => {
62
+ if (!collapsible ||
63
+ !collapsed ||
37
64
  e.pointerType === 'touch' ||
38
65
  closeTimeRef.current > Date.now())
39
66
  return;
40
67
  window.clearTimeout(timerRef.current);
41
68
  setHover(true);
42
69
  }, onPointerLeave: (e) => {
43
- if (!collapsed || e.pointerType === 'touch')
70
+ if (!collapsible || !collapsed || e.pointerType === 'touch')
44
71
  return;
45
72
  window.clearTimeout(timerRef.current);
46
73
  timerRef.current = window.setTimeout(() => {
@@ -49,31 +76,13 @@ export function CollapsibleSidebar(props) {
49
76
  }, Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
50
77
  ? 0
51
78
  : 500);
52
- }, "data-collapsed": collapsed, className: cn('md:transition-all', collapsed &&
53
- 'md:-me-(--fd-sidebar-width) md:-translate-x-(--fd-sidebar-offset) rtl:md:translate-x-(--fd-sidebar-offset)', collapsed && hover && 'z-50 md:translate-x-0', collapsed && !hover && 'md:opacity-0', props.className), style: {
54
- '--fd-sidebar-offset': 'calc(var(--fd-sidebar-width) - 6px)',
55
- ...props.style,
56
- } }));
57
- }
58
- export function Sidebar({ defaultOpenLevel = 0, prefetch = true, inner, ...props }) {
59
- const context = useMemo(() => {
60
- return {
61
- defaultOpenLevel,
62
- prefetch,
63
- level: 1,
64
- };
65
- }, [defaultOpenLevel, prefetch]);
66
- return (_jsx(Context.Provider, { value: context, children: _jsx(Base.SidebarList, { id: "nd-sidebar", removeScrollOn: "(width < 768px)" // md
67
- , ...props, className: cn('fixed top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] z-20 bg-fd-card text-sm md:sticky md:h-(--fd-sidebar-height)', 'max-md:inset-x-0 max-md:bottom-0 max-md:bg-fd-background/80 max-md:text-[15px] max-md:backdrop-blur-lg max-md:data-[open=false]:invisible', props.className), style: {
68
- ...props.style,
69
- '--fd-sidebar-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
70
- }, children: _jsx("div", { ...inner, className: cn('flex size-full max-w-full flex-col pt-2 md:ms-auto md:w-(--fd-sidebar-width) md:border-e md:pt-4', inner?.className), children: props.children }) }) }));
79
+ }, children: _jsx("div", { className: "flex w-(--fd-sidebar-width) h-full max-w-full flex-col ms-auto border-e", children: _jsx(Context.Provider, { value: context, children: props.children }) }) }));
71
80
  }
72
81
  export function SidebarHeader(props) {
73
- return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 px-4 empty:hidden', props.className), children: props.children }));
82
+ return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 px-4 pt-4 max-md:pt-6 max-md:pb-4 empty:hidden', props.className), children: props.children }));
74
83
  }
75
84
  export function SidebarFooter(props) {
76
- return (_jsx("div", { ...props, className: cn('flex flex-col border-t px-4 py-3 empty:hidden', props.className), children: props.children }));
85
+ return (_jsx("div", { ...props, className: cn('flex flex-col border-t px-4 py-3 empty:hidden max-md:pb-6', props.className), children: props.children }));
77
86
  }
78
87
  export function SidebarViewport(props) {
79
88
  return (_jsx(ScrollArea, { ...props, className: cn('h-full', props.className), children: _jsx(ScrollViewport, { className: "p-4", style: {
@@ -82,7 +91,7 @@ export function SidebarViewport(props) {
82
91
  }
83
92
  export function SidebarSeparator(props) {
84
93
  const { level } = useInternalContext();
85
- return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0', props.className), style: {
94
+ return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-2 px-2 font-medium empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0', props.className), style: {
86
95
  paddingInlineStart: getOffset(level),
87
96
  ...props.style,
88
97
  }, children: props.children }));
@@ -135,7 +144,7 @@ export function SidebarFolderContent(props) {
135
144
  return (_jsx(CollapsibleContent, { ...props, className: cn('relative', props.className), children: _jsxs(Context.Provider, { value: useMemo(() => ({
136
145
  ...ctx,
137
146
  level: ctx.level + 1,
138
- }), [ctx]), children: [_jsx("div", { className: "absolute w-px inset-y-0 bg-fd-border start-3" }), props.children] }) }));
147
+ }), [ctx]), children: [ctx.level === 1 && (_jsx("div", { className: "absolute w-px inset-y-0 bg-fd-border start-3" })), props.children] }) }));
139
148
  }
140
149
  export function SidebarCollapseTrigger(props) {
141
150
  const { collapsed, setCollapsed } = useSidebar();
@@ -189,10 +198,10 @@ function PageTreeFolder({ item, ...props }) {
189
198
  return (_jsxs(SidebarFolder, { defaultOpen: (item.defaultOpen ?? defaultOpenLevel >= level) || path.includes(item), children: [item.index ? (_jsxs(SidebarFolderLink, { href: item.index.url, external: item.index.external, ...props, children: [item.icon, item.name] })) : (_jsxs(SidebarFolderTrigger, { ...props, children: [item.icon, item.name] })), _jsx(SidebarFolderContent, { children: props.children })] }));
190
199
  }
191
200
  function getOffset(level) {
192
- return `calc(var(--spacing) * ${(level > 1 ? level : 0) * 2 + 2})`;
201
+ return `calc(var(--spacing) * ${level > 1 ? (level - 1) * 3 + 3 : 2})`;
193
202
  }
194
203
  function Border({ level, active }) {
195
204
  if (level <= 1)
196
205
  return null;
197
- return (_jsx("div", { className: cn('absolute w-px inset-y-2 z-[2] start-3', active && 'bg-fd-primary') }));
206
+ return (_jsx("div", { className: cn('absolute w-px inset-y-3 z-[2] start-3 md:inset-y-2', active && 'bg-fd-primary') }));
198
207
  }
@@ -1,7 +1,9 @@
1
1
  import type { TabsContentProps, TabsProps as BaseProps } from '@radix-ui/react-tabs';
2
+ import { type ReactNode } from 'react';
2
3
  import * as Primitive from './ui/tabs.js';
3
4
  export { Primitive };
4
5
  export interface TabsProps extends BaseProps {
6
+ label?: ReactNode;
5
7
  /**
6
8
  * Identifier for Sharing value of tabs
7
9
  */
@@ -20,7 +22,7 @@ export interface TabsProps extends BaseProps {
20
22
  */
21
23
  updateAnchor?: boolean;
22
24
  }
23
- export declare function Tabs({ groupId, items, persist, defaultIndex, updateAnchor, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
25
+ export declare function Tabs({ groupId, items, persist, label, defaultIndex, updateAnchor, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
24
26
  export type TabProps = Omit<TabsContentProps, 'value'> & {
25
27
  /**
26
28
  * Value of tab, detect from index if unspecified.
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,SAAS,IAAI,SAAS,EACvB,MAAM,sBAAsB,CAAC;AAW9B,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AAGvC,OAAO,EAAE,SAAS,EAAE,CAAC;AAmBrB,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAQD,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAU,EACV,OAAe,EACf,YAAgB,EAChB,YAAoB,EACpB,GAAG,KAAK,EACT,EAAE,SAAS,2CAgFX;AAMD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC;AAEF,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CA6B3D"}
1
+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,SAAS,IAAI,SAAS,EACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AAGvC,OAAO,EAAE,SAAS,EAAE,CAAC;AAoBrB,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAcD,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAU,EACV,OAAe,EACf,KAAK,EACL,YAAgB,EAChB,YAAoB,EACpB,GAAG,KAAK,EACT,EAAE,SAAS,2CAiFX;AAMD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC;AAEF,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CA6B3D"}