fumadocs-ui 15.5.3 → 15.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/neutral.css +4 -4
- package/css/shiki.css +1 -2
- package/dist/components/banner.d.ts +8 -2
- package/dist/components/banner.d.ts.map +1 -1
- package/dist/components/banner.js +24 -29
- package/dist/components/codeblock.d.ts.map +1 -1
- package/dist/components/codeblock.js +2 -2
- package/dist/components/dialog/search.d.ts.map +1 -1
- package/dist/components/dialog/search.js +22 -17
- package/dist/components/layout/root-toggle.d.ts.map +1 -1
- package/dist/components/layout/root-toggle.js +12 -11
- package/dist/components/layout/sidebar.d.ts.map +1 -1
- package/dist/components/layout/sidebar.js +3 -4
- package/dist/components/ui/popover.js +1 -1
- package/dist/layouts/docs/page-client.js +1 -1
- package/dist/layouts/docs/page.js +1 -1
- package/dist/layouts/docs.d.ts.map +1 -1
- package/dist/layouts/docs.js +5 -5
- package/dist/layouts/home/navbar.d.ts.map +1 -1
- package/dist/layouts/home/navbar.js +3 -1
- package/dist/layouts/notebook-client.d.ts +3 -2
- package/dist/layouts/notebook-client.d.ts.map +1 -1
- package/dist/layouts/notebook-client.js +15 -11
- package/dist/layouts/notebook.d.ts.map +1 -1
- package/dist/layouts/notebook.js +4 -4
- package/dist/style.css +152 -63
- package/dist/utils/get-sidebar-tabs.js +1 -1
- package/package.json +8 -8
package/css/neutral.css
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
--color-fd-primary-foreground: hsl(0, 0%, 98%);
|
|
13
13
|
--color-fd-secondary: hsl(0, 0%, 93.1%);
|
|
14
14
|
--color-fd-secondary-foreground: hsl(0, 0%, 9%);
|
|
15
|
-
--color-fd-accent:
|
|
15
|
+
--color-fd-accent: hsla(0, 0%, 82%, 50%);
|
|
16
16
|
--color-fd-accent-foreground: hsl(0, 0%, 9%);
|
|
17
17
|
--color-fd-ring: hsl(0, 0%, 63.9%);
|
|
18
18
|
}
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
--color-fd-background: hsl(0, 0%, 7.04%);
|
|
22
22
|
--color-fd-foreground: hsl(0, 0%, 92%);
|
|
23
23
|
--color-fd-muted: hsl(0, 0%, 12.9%);
|
|
24
|
-
--color-fd-muted-foreground:
|
|
25
|
-
--color-fd-popover: hsl(0, 0%,
|
|
26
|
-
--color-fd-popover-foreground: hsl(0, 0%,
|
|
24
|
+
--color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
|
|
25
|
+
--color-fd-popover: hsl(0, 0%, 10.6%);
|
|
26
|
+
--color-fd-popover-foreground: hsl(0, 0%, 86.9%);
|
|
27
27
|
--color-fd-card: hsl(0, 0%, 9.8%);
|
|
28
28
|
--color-fd-card-foreground: hsl(0, 0%, 98%);
|
|
29
29
|
--color-fd-border: hsla(0, 0%, 40%, 20%);
|
package/css/shiki.css
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type HTMLAttributes } from 'react';
|
|
2
|
-
|
|
2
|
+
type BannerVariant = 'rainbow' | 'normal';
|
|
3
|
+
export declare function Banner({ id, variant, changeLayout, height, rainbowColors, ...props }: HTMLAttributes<HTMLDivElement> & {
|
|
3
4
|
/**
|
|
4
5
|
* @defaultValue 3rem
|
|
5
6
|
*/
|
|
@@ -7,7 +8,11 @@ export declare function Banner({ id, variant, changeLayout, height, ...props }:
|
|
|
7
8
|
/**
|
|
8
9
|
* @defaultValue 'normal'
|
|
9
10
|
*/
|
|
10
|
-
variant?:
|
|
11
|
+
variant?: BannerVariant;
|
|
12
|
+
/**
|
|
13
|
+
* For rainbow variant only, customise the colors
|
|
14
|
+
*/
|
|
15
|
+
rainbowColors?: string[];
|
|
11
16
|
/**
|
|
12
17
|
* Change Fumadocs layout styles
|
|
13
18
|
*
|
|
@@ -15,4 +20,5 @@ export declare function Banner({ id, variant, changeLayout, height, ...props }:
|
|
|
15
20
|
*/
|
|
16
21
|
changeLayout?: boolean;
|
|
17
22
|
}): import("react/jsx-runtime").JSX.Element | null;
|
|
23
|
+
export {};
|
|
18
24
|
//# sourceMappingURL=banner.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/components/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAKjE,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,OAAkB,EAClB,YAAmB,EACnB,MAAe,EACf,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/components/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAKjE,KAAK,aAAa,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1C,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,OAAkB,EAClB,YAAmB,EACnB,MAAe,EACf,aAKC,EACD,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,kDAuEA"}
|
|
@@ -4,7 +4,12 @@ import { useEffect, useState } from 'react';
|
|
|
4
4
|
import { X } from '../icons.js';
|
|
5
5
|
import { cn } from '../utils/cn.js';
|
|
6
6
|
import { buttonVariants } from '../components/ui/button.js';
|
|
7
|
-
export function Banner({ id, variant = 'normal', changeLayout = true, height = '3rem',
|
|
7
|
+
export function Banner({ id, variant = 'normal', changeLayout = true, height = '3rem', rainbowColors = [
|
|
8
|
+
'rgba(0,149,255,0.56)',
|
|
9
|
+
'rgba(231,77,255,0.77)',
|
|
10
|
+
'rgba(255,0,0,0.73)',
|
|
11
|
+
'rgba(131,255,166,0.66)',
|
|
12
|
+
], ...props }) {
|
|
8
13
|
const [open, setOpen] = useState(true);
|
|
9
14
|
const globalKey = id ? `nd-banner-${id}` : null;
|
|
10
15
|
useEffect(() => {
|
|
@@ -13,47 +18,37 @@ export function Banner({ id, variant = 'normal', changeLayout = true, height = '
|
|
|
13
18
|
}, [globalKey]);
|
|
14
19
|
if (!open)
|
|
15
20
|
return null;
|
|
16
|
-
return (_jsxs("div", { id: id, ...props, className: cn('sticky top-0 z-40 flex flex-row items-center justify-center
|
|
21
|
+
return (_jsxs("div", { id: id, ...props, className: cn('sticky top-0 z-40 flex flex-row items-center justify-center px-4 text-center text-sm font-medium', variant === 'normal' && 'bg-fd-secondary', variant === 'rainbow' && 'bg-fd-background', !open && 'hidden', props.className), style: {
|
|
17
22
|
height,
|
|
18
23
|
}, children: [changeLayout && open ? (_jsx("style", { children: globalKey
|
|
19
24
|
? `:root:not(.${globalKey}) { --fd-banner-height: ${height}; }`
|
|
20
25
|
: `:root { --fd-banner-height: ${height}; }` })) : null, globalKey ? (_jsx("style", { children: `.${globalKey} #${id} { display: none; }` })) : null, globalKey ? (_jsx("script", { dangerouslySetInnerHTML: {
|
|
21
26
|
__html: `if (localStorage.getItem('${globalKey}') === 'true') document.documentElement.classList.add('${globalKey}');`,
|
|
22
|
-
} })) : null, variant === 'rainbow'
|
|
27
|
+
} })) : null, variant === 'rainbow'
|
|
28
|
+
? flow({
|
|
29
|
+
colors: rainbowColors,
|
|
30
|
+
})
|
|
31
|
+
: null, props.children, id ? (_jsx("button", { type: "button", "aria-label": "Close Banner", onClick: () => {
|
|
23
32
|
setOpen(false);
|
|
24
33
|
if (globalKey)
|
|
25
34
|
localStorage.setItem(globalKey, 'true');
|
|
26
35
|
}, className: cn(buttonVariants({
|
|
27
36
|
color: 'ghost',
|
|
28
|
-
className: 'absolute end-2 top-1/2 -translate-y-1/2 text-fd-muted-foreground',
|
|
29
|
-
size: 'icon',
|
|
37
|
+
className: 'absolute end-2 top-1/2 -translate-y-1/2 text-fd-muted-foreground/50',
|
|
38
|
+
size: 'icon-sm',
|
|
30
39
|
})), children: _jsx(X, {}) })) : null] }));
|
|
31
40
|
}
|
|
32
41
|
const maskImage = 'linear-gradient(to bottom,white,transparent), radial-gradient(circle at top center, white, transparent)';
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
backgroundImage: 'repeating-linear-gradient(60deg, var(--end), var(--start) 2%, var(--start) 5%, transparent 8%, transparent 14%, var(--via) 18%, var(--via) 22%, var(--mid) 28%, var(--mid) 30%, var(--via) 34%, var(--via) 36%, transparent, var(--end) calc(50% - 12px))',
|
|
43
|
-
backgroundSize: '200% 100%',
|
|
44
|
-
mixBlendMode: 'difference',
|
|
45
|
-
} }), _jsx("div", { className: "absolute inset-0 z-[-1]", style: {
|
|
46
|
-
maskImage,
|
|
47
|
-
maskComposite: 'intersect',
|
|
48
|
-
animation: 'fd-moving-banner 20s linear infinite',
|
|
49
|
-
'--start': 'rgba(255,120,120,0.5)',
|
|
50
|
-
'--mid': 'rgba(36,188,255,0.4)',
|
|
51
|
-
'--end': 'rgba(64,0,255,0.51)',
|
|
52
|
-
'--via': 'rgba(255,89,0,0.56)',
|
|
53
|
-
backgroundImage: 'repeating-linear-gradient(45deg, var(--end), var(--start) 4%, var(--start) 8%, transparent 9%, transparent 14%, var(--mid) 16%, var(--mid) 20%, transparent, var(--via) 36%, var(--via) 40%, transparent 42%, var(--end) 46%, var(--end) calc(50% - 16.8px))',
|
|
54
|
-
backgroundSize: '200% 100%',
|
|
55
|
-
mixBlendMode: 'color-dodge',
|
|
56
|
-
} }), _jsx("style", { children: `@keyframes fd-moving-banner {
|
|
42
|
+
function flow({ colors }) {
|
|
43
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 z-[-1]", style: {
|
|
44
|
+
maskImage,
|
|
45
|
+
maskComposite: 'intersect',
|
|
46
|
+
animation: 'fd-moving-banner 20s linear infinite',
|
|
47
|
+
backgroundImage: `repeating-linear-gradient(70deg, ${[...colors, colors[0]].map((color, i) => `${color} ${(i * 50) / colors.length}%`).join(', ')})`,
|
|
48
|
+
backgroundSize: '200% 100%',
|
|
49
|
+
filter: 'saturate(2)',
|
|
50
|
+
} }), _jsx("style", { children: `@keyframes fd-moving-banner {
|
|
57
51
|
from { background-position: 0% 0; }
|
|
58
52
|
to { background-position: 100% 0; }
|
|
59
53
|
}` })] }));
|
|
54
|
+
}
|
|
@@ -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,EAEf,MAAM,OAAO,CAAC;AAKf,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,cAAc,CAAC,WAAW,CAAC,CAAC;IAE5C;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAlDpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,cAAc,CAAC,WAAW,CAAC;IAE3C;;OAEG;0BACmB,OAAO;IAE7B;;OAEG;gCACyB,MAAM;+
|
|
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;AAKf,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,cAAc,CAAC,WAAW,CAAC,CAAC;IAE5C;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAlDpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,cAAc,CAAC,WAAW,CAAC;IAE3C;;OAEG;0BACmB,OAAO;IAE7B;;OAEG;gCACyB,MAAM;+CAyGnC,CAAC"}
|
|
@@ -17,7 +17,7 @@ export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground =
|
|
|
17
17
|
return;
|
|
18
18
|
const clone = pre.cloneNode(true);
|
|
19
19
|
clone.querySelectorAll('.nd-copy-ignore').forEach((node) => {
|
|
20
|
-
node.
|
|
20
|
+
node.replaceWith('\n');
|
|
21
21
|
});
|
|
22
22
|
void navigator.clipboard.writeText(clone.textContent ?? '');
|
|
23
23
|
};
|
|
@@ -25,7 +25,7 @@ export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground =
|
|
|
25
25
|
? {
|
|
26
26
|
__html: icon,
|
|
27
27
|
}
|
|
28
|
-
: undefined, children: typeof icon !== 'string' ? icon : null })) : null, _jsx("figcaption", { className: "flex-1 truncate text-fd-muted-foreground", children: title }), allowCopy
|
|
28
|
+
: undefined, children: typeof icon !== 'string' ? icon : null })) : null, _jsx("figcaption", { className: "flex-1 truncate text-fd-muted-foreground", children: title }), allowCopy && _jsx(CopyButton, { className: "-me-2", onCopy: onCopy })] })) : (allowCopy && (_jsx(CopyButton, { className: "absolute right-2 top-2 z-[2] backdrop-blur-md", onCopy: onCopy }))), _jsx("div", { ref: areaRef, ...viewportProps, className: cn('text-[13px] py-3.5 overflow-auto [&_.line]:px-4 max-h-[600px] fd-scroll-container', props['data-line-numbers'] && '[&_.line]:pl-3', viewportProps?.className), style: {
|
|
29
29
|
counterSet: props['data-line-numbers']
|
|
30
30
|
? `line ${Number(props['data-line-numbers-start'] ?? 1) - 1}`
|
|
31
31
|
: undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAIf,OAAO,EAEL,aAAa,EACb,aAAa,EAEd,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAIf,OAAO,EAEL,aAAa,EACb,aAAa,EAEd,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,KAAK,iBAAiB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,GAAG;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAGF,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAsBD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,cAAc,EACd,SAAiB,EACjB,QAAQ,GACT,EAAE,iBAAiB,2CAuBnB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAU9D;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,2CAa/D;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAoB1B;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAO9D;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,2CAW5C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,2CAgBtC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAY,EACZ,KAIC,EACD,IAAqD,EACrD,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3C,KAAK,EAAE,iBAAiB,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,iBAAiB,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC;CAC/E,2CAoGA;AAUD,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC5B,IAAI,EAAE,iBAAiB,CAAC;CACzB,2CA8CA;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAa5D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAaD,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,WAAW,EACX,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,aAAa,2CAoBf;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf,2CAkBA;AAED,wBAAgB,SAAS;UAjajB,OAAO;kBACC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;YAC7B,MAAM;oBACE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;eAExB,OAAO;EAganB;AAED,wBAAgB,WAAW;YAzZjB,MAAM;mBACC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI;gBACtC,OAAO;EA2ZpB;AAED,wBAAgB,aAAa;YApanB,MAAM,GAAG,IAAI;eACV,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;EAuatC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { FileText, Hash, Search as SearchIcon
|
|
3
|
+
import { FileText, Hash, Search as SearchIcon } from '../../icons.js';
|
|
4
4
|
import { createContext, Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
|
|
5
5
|
import { I18nLabel, useI18n } from '../../contexts/i18n.js';
|
|
6
6
|
import { cn } from '../../utils/cn.js';
|
|
@@ -10,6 +10,7 @@ import { cva } from 'class-variance-authority';
|
|
|
10
10
|
import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
|
|
11
11
|
import { useRouter } from 'fumadocs-core/framework';
|
|
12
12
|
import { useOnChange } from 'fumadocs-core/utils/use-on-change';
|
|
13
|
+
import scrollIntoView from 'scroll-into-view-if-needed';
|
|
13
14
|
const Context = createContext(null);
|
|
14
15
|
const ListContext = createContext(null);
|
|
15
16
|
const TagsListContext = createContext(null);
|
|
@@ -26,30 +27,30 @@ export function SearchDialog({ open, onOpenChange, search, onSearchChange, isLoa
|
|
|
26
27
|
}), [active, isLoading, onOpenChange, onSearchChange, open, search]), children: children }) }));
|
|
27
28
|
}
|
|
28
29
|
export function SearchDialogHeader(props) {
|
|
29
|
-
return (_jsx("div", { ...props, className: cn('flex flex-row items-center gap-2
|
|
30
|
+
return (_jsx("div", { ...props, className: cn('flex flex-row items-center gap-2 p-3 pb-2', props.className) }));
|
|
30
31
|
}
|
|
31
32
|
export function SearchDialogInput(props) {
|
|
32
33
|
const { text } = useI18n();
|
|
33
34
|
const { search, onSearchChange } = useSearch();
|
|
34
|
-
return (_jsx("input", { ...props, value: search, onChange: (e) => onSearchChange(e.target.value), placeholder: text.search, className: "w-0 flex-1 bg-transparent
|
|
35
|
+
return (_jsx("input", { ...props, value: search, onChange: (e) => onSearchChange(e.target.value), placeholder: text.search, className: "w-0 flex-1 bg-transparent text-lg placeholder:text-fd-muted-foreground focus-visible:outline-none" }));
|
|
35
36
|
}
|
|
36
|
-
export function SearchDialogClose({ children =
|
|
37
|
+
export function SearchDialogClose({ children = 'ESC', className, ...props }) {
|
|
37
38
|
const { onOpenChange } = useSearch();
|
|
38
|
-
return (_jsx("button", { type: "button",
|
|
39
|
-
color: '
|
|
40
|
-
size: '
|
|
41
|
-
className: 'text-fd-muted-foreground
|
|
39
|
+
return (_jsx("button", { type: "button", onClick: () => onOpenChange(false), className: cn(buttonVariants({
|
|
40
|
+
color: 'outline',
|
|
41
|
+
size: 'sm',
|
|
42
|
+
className: 'font-mono text-fd-muted-foreground',
|
|
42
43
|
}), className), ...props, children: children }));
|
|
43
44
|
}
|
|
44
45
|
export function SearchDialogFooter(props) {
|
|
45
|
-
return (_jsx("div", { ...props, className: cn('
|
|
46
|
+
return (_jsx("div", { ...props, className: cn('bg-fd-secondary/50 p-3 empty:hidden', props.className) }));
|
|
46
47
|
}
|
|
47
48
|
export function SearchDialogOverlay(props) {
|
|
48
|
-
return (_jsx(DialogOverlay, { ...props, className: cn('fixed inset-0 z-50 max-md:backdrop-blur-
|
|
49
|
+
return (_jsx(DialogOverlay, { ...props, className: cn('fixed inset-0 z-50 max-md:backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out', props.className) }));
|
|
49
50
|
}
|
|
50
51
|
export function SearchDialogContent({ children, ...props }) {
|
|
51
52
|
const { text } = useI18n();
|
|
52
|
-
return (_jsxs(DialogContent, { "aria-describedby": undefined, ...props, className: cn('fixed left-1/2 top-[
|
|
53
|
+
return (_jsxs(DialogContent, { "aria-describedby": undefined, ...props, className: cn('fixed divide-y divide-fd-border left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-2*var(--spacing))] max-w-screen-sm -translate-x-1/2 rounded-2xl border bg-fd-popover/60 backdrop-blur-xl text-fd-popover-foreground shadow-2xl shadow-black/40 overflow-hidden data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in', props.className), children: [_jsx(DialogTitle, { className: "hidden", children: text.search }), children] }));
|
|
53
54
|
}
|
|
54
55
|
export function SearchDialogList({ items = null, Empty = () => (_jsx("div", { className: "py-12 text-center text-sm text-fd-muted-foreground", children: _jsx(I18nLabel, { label: "searchNoResult" }) })), Item = (props) => _jsx(SearchDialogListItem, { ...props }), ...props }) {
|
|
55
56
|
const ref = useRef(null);
|
|
@@ -106,30 +107,34 @@ export function SearchDialogList({ items = null, Empty = () => (_jsx("div", { cl
|
|
|
106
107
|
setActive(items[0].id);
|
|
107
108
|
}
|
|
108
109
|
});
|
|
109
|
-
return (_jsx("div", { ...props, ref: ref, className: cn('overflow-hidden h-(--fd-animated-height) transition-[height]', items && 'border-
|
|
110
|
+
return (_jsx("div", { ...props, ref: ref, className: cn('overflow-hidden h-(--fd-animated-height) transition-[height]', !items && 'border-b-0', props.className), children: _jsx("div", { className: cn('w-full flex flex-col overflow-y-auto max-h-[460px] p-1', !items && 'hidden'), children: _jsxs(ListContext.Provider, { value: useMemo(() => ({
|
|
110
111
|
active,
|
|
111
112
|
setActive,
|
|
112
113
|
}), [active]), children: [items?.length === 0 && Empty(), items?.map((item) => (_jsx(Fragment, { children: Item({ item, onClick: () => onOpen(item) }) }, item.id)))] }) }) }));
|
|
113
114
|
}
|
|
114
115
|
const icons = {
|
|
115
|
-
text:
|
|
116
|
+
text: null,
|
|
116
117
|
heading: _jsx(Hash, { className: "size-4 shrink-0 text-fd-muted-foreground" }),
|
|
117
|
-
page: _jsx(FileText, { className: "size-
|
|
118
|
+
page: (_jsx(FileText, { className: "size-6 text-fd-muted-foreground bg-fd-muted border p-0.5 rounded-sm shadow-sm shrink-0" })),
|
|
118
119
|
};
|
|
119
120
|
export function SearchDialogListItem({ item, className, children, ...props }) {
|
|
120
121
|
const { active: activeId, setActive } = useSearchList();
|
|
121
122
|
const active = item.id === activeId;
|
|
122
123
|
return (_jsx("button", { type: "button", ref: useCallback((element) => {
|
|
123
124
|
if (active && element) {
|
|
124
|
-
|
|
125
|
+
scrollIntoView(element, {
|
|
126
|
+
scrollMode: 'if-needed',
|
|
125
127
|
block: 'nearest',
|
|
128
|
+
boundary: element.parentElement,
|
|
126
129
|
});
|
|
127
130
|
}
|
|
128
|
-
}, [active]), "aria-selected": active, className: cn('relative flex select-none flex-row items-center gap-2
|
|
131
|
+
}, [active]), "aria-selected": active, className: cn('relative flex select-none flex-row items-center gap-2 p-2 text-start text-sm rounded-lg', item.type !== 'page' && 'ps-8', item.type === 'page' || item.type === 'heading'
|
|
132
|
+
? 'font-medium'
|
|
133
|
+
: 'text-fd-popover-foreground/80', active && 'bg-fd-accent text-fd-accent-foreground', className), onPointerMove: () => setActive(item.id), ...props, children: children ?? (_jsxs(_Fragment, { children: [item.type !== 'page' && (_jsx("div", { role: "none", className: "absolute start-4.5 inset-y-0 w-px bg-fd-border" })), icons[item.type], _jsx("p", { className: "min-w-0 truncate", children: item.content })] })) }));
|
|
129
134
|
}
|
|
130
135
|
export function SearchDialogIcon(props) {
|
|
131
136
|
const { isLoading } = useSearch();
|
|
132
|
-
return (_jsx(SearchIcon, { ...props, className: cn('size-
|
|
137
|
+
return (_jsx(SearchIcon, { ...props, className: cn('size-5 text-fd-muted-foreground', isLoading && 'animate-pulse duration-400', props.className) }));
|
|
133
138
|
}
|
|
134
139
|
const itemVariants = cva('rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors', {
|
|
135
140
|
variants: {
|
|
@@ -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,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,
|
|
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,2CAqF3B"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { ChevronsUpDown } from '../../icons.js';
|
|
3
|
+
import { Check, ChevronsUpDown } from '../../icons.js';
|
|
4
4
|
import { useMemo, useState } from 'react';
|
|
5
5
|
import Link from 'fumadocs-core/link';
|
|
6
6
|
import { usePathname } from 'fumadocs-core/framework';
|
|
@@ -13,19 +13,20 @@ export function RootToggle({ options, placeholder, ...props }) {
|
|
|
13
13
|
const { closeOnRedirect } = useSidebar();
|
|
14
14
|
const pathname = usePathname();
|
|
15
15
|
const selected = useMemo(() => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
const lookup = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
|
|
17
|
+
return options.findLast((item) => {
|
|
18
|
+
if (item.urls)
|
|
19
|
+
return item.urls.has(lookup);
|
|
20
|
+
return isActive(item.url, pathname, true);
|
|
21
|
+
});
|
|
19
22
|
}, [options, pathname]);
|
|
20
23
|
const onClick = () => {
|
|
21
24
|
closeOnRedirect.current = false;
|
|
22
25
|
setOpen(false);
|
|
23
26
|
};
|
|
24
|
-
const item = selected ? _jsx(
|
|
25
|
-
return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [item
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
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-[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] })] }));
|
|
27
|
+
const item = selected ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "size-9 md:size-5", children: selected.icon }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: selected.title }), _jsx("p", { className: "text-[13px] text-fd-muted-foreground empty:hidden md:hidden", children: selected.description })] })] })) : (placeholder);
|
|
28
|
+
return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [item && (_jsxs(PopoverTrigger, { ...props, className: cn('flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground', props.className), children: [item, _jsx(ChevronsUpDown, { className: "ms-auto size-4 text-fd-muted-foreground" })] })), _jsx(PopoverContent, { className: "flex flex-col gap-1 min-w-(--radix-popover-trigger-width) overflow-hidden p-1", children: options.map((item) => {
|
|
29
|
+
const isActive = item === selected;
|
|
30
|
+
return (_jsxs(Link, { href: item.url, onClick: onClick, ...item.props, className: cn('flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground', item.props?.className), children: [_jsx("div", { className: "size-9 md:size-5 md:mt-1 md:mb-auto", children: item.icon }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: item.title }), _jsx("p", { className: "text-[13px] text-fd-muted-foreground empty:hidden", children: item.description })] }), _jsx(Check, { className: cn('ms-auto size-3.5 text-fd-primary', !isActive && 'invisible') })] }, item.url));
|
|
31
|
+
}) })] }));
|
|
31
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EAEP,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;
|
|
1
|
+
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EAEP,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;AAKrD,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,2CA+Gd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAcrD;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,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAqBzB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAsCjD;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"}
|
|
@@ -13,9 +13,8 @@ import { useSidebar } from '../../contexts/sidebar.js';
|
|
|
13
13
|
import { cva } from 'class-variance-authority';
|
|
14
14
|
import { useTreeContext, useTreePath } from '../../contexts/tree.js';
|
|
15
15
|
import { useMediaQuery } from 'fumadocs-core/utils/use-media-query';
|
|
16
|
-
import { RemoveScroll } from 'react-remove-scroll';
|
|
17
16
|
import { Presence } from '@radix-ui/react-presence';
|
|
18
|
-
const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-
|
|
17
|
+
const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-xl p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] [&_svg]:size-4 [&_svg]:shrink-0', {
|
|
19
18
|
variants: {
|
|
20
19
|
active: {
|
|
21
20
|
true: 'bg-fd-primary/10 text-fd-primary',
|
|
@@ -45,7 +44,7 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
|
|
|
45
44
|
});
|
|
46
45
|
if (isMobile) {
|
|
47
46
|
const state = open ? 'open' : 'closed';
|
|
48
|
-
return (_jsxs(Context.Provider, { value: context, children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0
|
|
47
|
+
return (_jsxs(Context.Provider, { value: context, children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsx("aside", { id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col shadow-lg rounded-2xl border start-2 inset-y-2 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out', !present && 'invisible', props.className), children: props.children })) })] }));
|
|
49
48
|
}
|
|
50
49
|
return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('fixed start-0 flex flex-col items-end top-(--fd-sidebar-top) bottom-(--fd-sidebar-margin) z-20 bg-fd-card text-sm border-e max-md:hidden *:w-(--fd-sidebar-width)', collapsed && [
|
|
51
50
|
'rounded-xl border',
|
|
@@ -96,7 +95,7 @@ export function SidebarViewport(props) {
|
|
|
96
95
|
}
|
|
97
96
|
export function SidebarSeparator(props) {
|
|
98
97
|
const { level } = useInternalContext();
|
|
99
|
-
return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-1.5 px-2
|
|
98
|
+
return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-1.5 px-2 empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0', props.className), style: {
|
|
100
99
|
paddingInlineStart: getOffset(level),
|
|
101
100
|
...props.style,
|
|
102
101
|
}, children: props.children }));
|
|
@@ -5,7 +5,7 @@ import * as React from 'react';
|
|
|
5
5
|
import { cn } from '../../utils/cn.js';
|
|
6
6
|
const Popover = PopoverPrimitive.Root;
|
|
7
7
|
const PopoverTrigger = PopoverPrimitive.Trigger;
|
|
8
|
-
const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, side: "bottom", className: cn('z-50 origin-(--radix-popover-content-transform-origin) min-w-[240px] max-w-[98vw] rounded-xl border bg-fd-popover/
|
|
8
|
+
const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, side: "bottom", className: cn('z-50 origin-(--radix-popover-content-transform-origin) min-w-[240px] max-w-[98vw] rounded-xl border bg-fd-popover/60 backdrop-blur-lg p-2 text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in', className), ...props }) })));
|
|
9
9
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
10
10
|
const PopoverClose = PopoverPrimitive.PopoverClose;
|
|
11
11
|
export { Popover, PopoverTrigger, PopoverContent, PopoverClose };
|
|
@@ -150,7 +150,7 @@ export function PageBreadcrumb({ includeRoot = false, includeSeparator, includeP
|
|
|
150
150
|
}, [includePage, includeRoot, includeSeparator, path, root]);
|
|
151
151
|
if (items.length === 0)
|
|
152
152
|
return null;
|
|
153
|
-
return (_jsx("div", { ...props, className: cn('flex items-center gap-1.5 text-
|
|
153
|
+
return (_jsx("div", { ...props, className: cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className), children: items.map((item, i) => {
|
|
154
154
|
const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');
|
|
155
155
|
return (_jsxs(Fragment, { children: [i !== 0 && _jsx("span", { className: "text-fd-foreground/30", children: "/" }), item.url ? (_jsx(Link, { href: item.url, className: cn(className, 'transition-opacity hover:opacity-80'), children: item.name })) : (_jsx("span", { className: className, children: item.name }))] }, i));
|
|
156
156
|
}) }));
|
|
@@ -21,6 +21,6 @@ export function PageTOCPopoverItems({ variant = 'normal', ...props }) {
|
|
|
21
21
|
return (_jsx(TOCScrollArea, { ...props, children: variant === 'clerk' ? _jsx(ClerkTOCItems, {}) : _jsx(TOCItems, {}) }));
|
|
22
22
|
}
|
|
23
23
|
export function PageArticle(props) {
|
|
24
|
-
return (_jsx("article", { ...props, className: cn('flex min-w-0 w-full flex-col gap-
|
|
24
|
+
return (_jsx("article", { ...props, className: cn('flex min-w-0 w-full flex-col gap-4 px-4 pt-8 md:px-6 md:mx-auto xl:pt-12 xl:px-12', props.className), children: props.children }));
|
|
25
25
|
}
|
|
26
26
|
export { PageRoot, PageBreadcrumb, PageFooter, PageLastUpdate, PageTOC, PageTOCPopover, PageTOCPopoverTrigger, PageTOCPopoverContent, };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAYrE,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAElB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAS/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IAEF;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAO,EAAE,EACP,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,OAAO,EAAE,cAAqB,EAC9B,WAAW,EAAE,kBAAyB,EACtC,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,iBAAiB,EAC7B,GAAG,YAAY,EACX,EACN,YAAiB,EACjB,kBAA0B,EAC1B,WAA8C,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/layouts/docs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAYrE,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAElB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAS/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IAEF;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAO,EAAE,EACP,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,OAAO,EAAE,cAAqB,EAC9B,WAAW,EAAE,kBAAyB,EACtC,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,iBAAiB,EAC7B,GAAG,YAAY,EACX,EACN,YAAiB,EACjB,kBAA0B,EAC1B,WAA8C,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,2CAmIjB;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,CAAC"}
|
package/dist/layouts/docs.js
CHANGED
|
@@ -22,16 +22,16 @@ export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { t
|
|
|
22
22
|
const variables = cn('md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px]', !nav.component && nav.enabled !== false
|
|
23
23
|
? '[--fd-nav-height:56px] md:[--fd-nav-height:0px]'
|
|
24
24
|
: undefined);
|
|
25
|
-
const sidebar = sidebarComponent ?? (_jsxs(_Fragment, { children: [sidebarCollapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...sidebarProps, collapsible: sidebarCollapsible, children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children, sidebarCollapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
25
|
+
const sidebar = sidebarComponent ?? (_jsxs(_Fragment, { children: [sidebarCollapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...sidebarProps, collapsible: sidebarCollapsible, children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, sidebarCollapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
26
26
|
color: 'ghost',
|
|
27
27
|
size: 'icon-sm',
|
|
28
|
-
className: '
|
|
29
|
-
})), children: _jsx(SidebarIcon, {}) }))] }),
|
|
30
|
-
(searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: "max-md:hidden" }))), sidebarBanner] }) }), _jsxs(SidebarViewport, { children: [links
|
|
28
|
+
className: 'mb-auto text-fd-muted-foreground max-md:hidden',
|
|
29
|
+
})), children: _jsx(SidebarIcon, {}) }))] }), searchToggle.enabled !== false &&
|
|
30
|
+
(searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: "max-md:hidden" }))), tabs.length > 0 && _jsx(RootToggle, { options: tabs }), sidebarBanner] }) }), _jsxs(SidebarViewport, { children: [links
|
|
31
31
|
.filter((v) => v.type !== 'icon')
|
|
32
32
|
.map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsxs(SidebarFooter, { className: "empty:hidden", children: [_jsx(HideIfEmpty, { children: _jsxs("div", { className: "flex items-center justify-end", children: [links
|
|
33
33
|
.filter((item) => item.type === 'icon')
|
|
34
|
-
.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:[&_svg]:size-4.5', i ===
|
|
34
|
+
.map((item, i, arr) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:[&_svg]:size-4.5', i === arr.length - 1 && 'me-auto'), "aria-label": item.label, children: item.icon }, i))), i18n ? (_jsxs(LanguageToggle, { className: "me-1.5", children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, themeSwitch.enabled !== false &&
|
|
35
35
|
(themeSwitch.component ?? (_jsx(ThemeToggle, { className: "p-0", mode: themeSwitch.mode })))] }) }), sidebarFooter] })] })] }));
|
|
36
36
|
return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [nav.enabled !== false &&
|
|
37
37
|
(nav.component ?? (_jsxs(Navbar, { className: "h-14 md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), _jsx("div", { className: "flex-1", children: nav.children }), searchToggle?.enabled !== false &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/navbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAW/C,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC3B,MAAM,iCAAiC,CAAC;AAOzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/navbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAW/C,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC3B,MAAM,iCAAiC,CAAC;AAOzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CA8BlD;AAED,eAAO,MAAM,UAAU,yNAAqB,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CAYlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CASlE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,2CAc9C;AAED,QAAA,MAAM,YAAY;;8EAiBhB,CAAC;AAEH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,2CAczE"}
|
|
@@ -12,7 +12,9 @@ const navItemVariants = cva('inline-flex items-center gap-1 p-2 text-fd-muted-fo
|
|
|
12
12
|
export function Navbar(props) {
|
|
13
13
|
const [value, setValue] = useState('');
|
|
14
14
|
const { isTransparent } = useNav();
|
|
15
|
-
return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed top-(--fd-banner-height) z-40
|
|
15
|
+
return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed top-(--fd-banner-height) z-40 left-0 backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-fd-container', value.length > 0 && 'max-lg:shadow-lg max-lg:rounded-b-2xl', (!isTransparent || value.length > 0) && 'bg-fd-background/80', props.className), style: {
|
|
16
|
+
right: 'var(--removed-body-scroll-bar-size, 0px)',
|
|
17
|
+
}, children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full items-center px-4", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }));
|
|
16
18
|
}
|
|
17
19
|
export const NavbarMenu = NavigationMenuItem;
|
|
18
20
|
export function NavbarMenuContent(props) {
|
|
@@ -5,6 +5,7 @@ export declare function Navbar({ mode, ...props }: ComponentProps<'header'> & {
|
|
|
5
5
|
}): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export declare function LayoutBody(props: ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export declare function NavbarSidebarTrigger({ className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export declare function LayoutTabs(props: ComponentProps<'div'>
|
|
9
|
-
|
|
8
|
+
export declare function LayoutTabs({ options, ...props }: ComponentProps<'div'> & {
|
|
9
|
+
options: Option[];
|
|
10
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
11
|
//# sourceMappingURL=notebook-client.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notebook-client.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,
|
|
1
|
+
{"version":3,"file":"notebook-client.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAQrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,2CAoBrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,2CAqBvD;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAkB1B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,2CA+BA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { cn } from '../utils/cn.js';
|
|
4
|
+
import { useMemo } from 'react';
|
|
4
5
|
import { useSidebar } from '../contexts/sidebar.js';
|
|
5
6
|
import { useNav } from '../contexts/layout.js';
|
|
6
7
|
import { buttonVariants } from '../components/ui/button.js';
|
|
@@ -32,16 +33,19 @@ export function NavbarSidebarTrigger({ className, ...props }) {
|
|
|
32
33
|
className,
|
|
33
34
|
})), onClick: () => setOpen((prev) => !prev), children: _jsx(SidebarIcon, {}) }));
|
|
34
35
|
}
|
|
35
|
-
export function LayoutTabs(props) {
|
|
36
|
-
return (_jsx("div", { ...props, className: cn('flex flex-row items-end gap-6 overflow-auto', props.className), children: props.children }));
|
|
37
|
-
}
|
|
38
|
-
export function LayoutTab(item) {
|
|
39
|
-
const { closeOnRedirect } = useSidebar();
|
|
36
|
+
export function LayoutTabs({ options, ...props }) {
|
|
40
37
|
const pathname = usePathname();
|
|
41
|
-
const selected =
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
38
|
+
const selected = useMemo(() => {
|
|
39
|
+
const url = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
|
|
40
|
+
return options.findLast((option) => {
|
|
41
|
+
if (option.urls) {
|
|
42
|
+
return option.urls.has(url);
|
|
43
|
+
}
|
|
44
|
+
return isActive(option.url, pathname, true);
|
|
45
|
+
});
|
|
46
|
+
}, [options, pathname]);
|
|
47
|
+
return (_jsx("div", { ...props, className: cn('flex flex-row items-end gap-6 overflow-auto', props.className), children: options.map((option) => (_jsx(LayoutTab, { selected: selected === option, option: option }, option.url))) }));
|
|
48
|
+
}
|
|
49
|
+
function LayoutTab({ option, selected = false, }) {
|
|
50
|
+
return (_jsx(Link, { className: cn('inline-flex items-center py-2.5 border-b border-transparent gap-2 text-fd-muted-foreground text-sm text-nowrap', selected && 'text-fd-foreground font-medium border-fd-primary'), href: option.url, children: option.title }));
|
|
47
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,kBAAkB,CAAC;AAqBlE,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,
|
|
1
|
+
{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,kBAAkB,CAAC;AAqBlE,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAGL,MAAM,EACN,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAU3B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;QAC7B,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;KACvB,CAAC;IAEF,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAiJhD;AA8LD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}
|
package/dist/layouts/notebook.js
CHANGED
|
@@ -11,7 +11,7 @@ import { LanguageToggle } from '../components/layout/language-toggle.js';
|
|
|
11
11
|
import { ThemeToggle } from '../components/layout/theme-toggle.js';
|
|
12
12
|
import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover.js';
|
|
13
13
|
import { getSidebarTabsFromOptions, SidebarLinkItem, } from '../layouts/docs/shared.js';
|
|
14
|
-
import { LayoutBody,
|
|
14
|
+
import { LayoutBody, LayoutTabs, Navbar, NavbarSidebarTrigger, } from './notebook-client.js';
|
|
15
15
|
import { NavProvider } from '../contexts/layout.js';
|
|
16
16
|
import { RootToggle } from '../components/layout/root-toggle.js';
|
|
17
17
|
import Link from 'fumadocs-core/link';
|
|
@@ -29,7 +29,7 @@ export function DocsLayout(props) {
|
|
|
29
29
|
className: 'mt-px mb-auto text-fd-muted-foreground',
|
|
30
30
|
})), children: _jsx(SidebarIcon, {}) }))] }));
|
|
31
31
|
return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsx(NavProvider, { transparentMode: transparentMode, children: _jsxs(LayoutBody, { ...props.containerProps, className: cn(variables, props.containerProps?.className), children: [_jsxs(Sidebar, { ...sidebar, className: cn(navMode === 'top'
|
|
32
|
-
? 'md:bg-transparent'
|
|
32
|
+
? 'border-e-0 md:bg-transparent'
|
|
33
33
|
: 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [navMode === 'auto' && sidebarHeader, nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { className: "mb-2", options: tabs })) : null, tabMode === 'navbar' && tabs.length > 0 && (_jsx(RootToggle, { options: tabs, className: "lg:hidden" }))] }) }), _jsxs(SidebarViewport, { children: [links
|
|
34
34
|
.filter((item) => item.type !== 'icon')
|
|
35
35
|
.map((item, i) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === links.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsx(HideIfEmpty, { children: _jsxs(SidebarFooter, { className: "flex flex-row items-center justify-end", children: [_jsx("div", { className: "flex items-center flex-1 empty:hidden lg:hidden", children: links
|
|
@@ -49,7 +49,7 @@ function DocsNavbar({ links, tabs, searchToggle = {}, themeSwitch = {}, ...props
|
|
|
49
49
|
color: 'ghost',
|
|
50
50
|
size: 'icon-sm',
|
|
51
51
|
}), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null, nav] }), searchToggle.enabled !== false &&
|
|
52
|
-
(searchToggle.components?.lg
|
|
52
|
+
(searchToggle.components?.lg ? (_jsx("div", { className: cn('w-full my-auto max-md:hidden', navMode === 'top' ? 'rounded-xl max-w-sm' : 'max-w-[240px]'), children: searchToggle.components?.lg })) : (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: cn('w-full my-auto max-md:hidden', navMode === 'top'
|
|
53
53
|
? 'rounded-xl max-w-sm ps-2.5'
|
|
54
54
|
: 'max-w-[240px]') }))), _jsxs("div", { className: "flex flex-1 flex-row items-center justify-end", children: [_jsx("div", { className: "flex flex-row items-center gap-6 px-4 empty:hidden max-lg:hidden", children: links
|
|
55
55
|
.filter((item) => item.type !== 'icon')
|
|
@@ -60,7 +60,7 @@ function DocsNavbar({ links, tabs, searchToggle = {}, themeSwitch = {}, ...props
|
|
|
60
60
|
(themeSwitch.component ?? (_jsx(ThemeToggle, { className: "ms-2 max-md:hidden", mode: themeSwitch.mode ?? 'light-dark-system' }))), sidebarCollapsible && navMode === 'top' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
61
61
|
color: 'secondary',
|
|
62
62
|
size: 'icon-sm',
|
|
63
|
-
}), 'ms-2 text-fd-muted-foreground rounded-full max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null] })] }), tabs.length > 0
|
|
63
|
+
}), 'ms-2 text-fd-muted-foreground rounded-full max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null] })] }), tabs.length > 0 && (_jsx(LayoutTabs, { className: "px-6 border-b h-10 max-lg:hidden", options: tabs }))] }));
|
|
64
64
|
}
|
|
65
65
|
function NavbarLinkItem({ item, ...props }) {
|
|
66
66
|
if (item.type === 'menu') {
|
package/dist/style.css
CHANGED
|
@@ -19,8 +19,6 @@
|
|
|
19
19
|
--text-xs--line-height: calc(1 / 0.75);
|
|
20
20
|
--text-sm: 0.875rem;
|
|
21
21
|
--text-sm--line-height: calc(1.25 / 0.875);
|
|
22
|
-
--text-base: 1rem;
|
|
23
|
-
--text-base--line-height: calc(1.5 / 1);
|
|
24
22
|
--text-lg: 1.125rem;
|
|
25
23
|
--text-lg--line-height: calc(1.75 / 1.125);
|
|
26
24
|
--text-2xl: 1.5rem;
|
|
@@ -28,14 +26,17 @@
|
|
|
28
26
|
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
29
27
|
--font-weight-medium: 500;
|
|
30
28
|
--font-weight-semibold: 600;
|
|
29
|
+
--radius-sm: 0.25rem;
|
|
31
30
|
--radius-md: 0.375rem;
|
|
32
31
|
--radius-lg: 0.5rem;
|
|
33
32
|
--radius-xl: 0.75rem;
|
|
34
33
|
--radius-2xl: 1rem;
|
|
35
34
|
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
35
|
+
--blur-xs: 4px;
|
|
36
36
|
--blur-sm: 8px;
|
|
37
37
|
--blur-md: 12px;
|
|
38
38
|
--blur-lg: 16px;
|
|
39
|
+
--blur-xl: 24px;
|
|
39
40
|
--default-transition-duration: 150ms;
|
|
40
41
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
41
42
|
--default-font-family: var(--font-sans);
|
|
@@ -53,7 +54,7 @@
|
|
|
53
54
|
--color-fd-primary-foreground: hsl(0, 0%, 98%);
|
|
54
55
|
--color-fd-secondary: hsl(0, 0%, 93.1%);
|
|
55
56
|
--color-fd-secondary-foreground: hsl(0, 0%, 9%);
|
|
56
|
-
--color-fd-accent:
|
|
57
|
+
--color-fd-accent: hsla(0, 0%, 82%, 50%);
|
|
57
58
|
--color-fd-accent-foreground: hsl(0, 0%, 9%);
|
|
58
59
|
--spacing-fd-container: 1400px;
|
|
59
60
|
--fd-page-width: 1200px;
|
|
@@ -309,17 +310,23 @@
|
|
|
309
310
|
.inset-y-1 {
|
|
310
311
|
inset-block: calc(var(--spacing) * 1);
|
|
311
312
|
}
|
|
313
|
+
.inset-y-2 {
|
|
314
|
+
inset-block: calc(var(--spacing) * 2);
|
|
315
|
+
}
|
|
312
316
|
.inset-y-3 {
|
|
313
317
|
inset-block: calc(var(--spacing) * 3);
|
|
314
318
|
}
|
|
315
319
|
.start-0 {
|
|
316
320
|
inset-inline-start: calc(var(--spacing) * 0);
|
|
317
321
|
}
|
|
322
|
+
.start-2 {
|
|
323
|
+
inset-inline-start: calc(var(--spacing) * 2);
|
|
324
|
+
}
|
|
318
325
|
.start-2\.5 {
|
|
319
326
|
inset-inline-start: calc(var(--spacing) * 2.5);
|
|
320
327
|
}
|
|
321
|
-
.start-5 {
|
|
322
|
-
inset-inline-start: calc(var(--spacing) * 5);
|
|
328
|
+
.start-4\.5 {
|
|
329
|
+
inset-inline-start: calc(var(--spacing) * 4.5);
|
|
323
330
|
}
|
|
324
331
|
.end-2 {
|
|
325
332
|
inset-inline-end: calc(var(--spacing) * 2);
|
|
@@ -351,12 +358,12 @@
|
|
|
351
358
|
.top-2 {
|
|
352
359
|
top: calc(var(--spacing) * 2);
|
|
353
360
|
}
|
|
361
|
+
.top-4 {
|
|
362
|
+
top: calc(var(--spacing) * 4);
|
|
363
|
+
}
|
|
354
364
|
.top-14 {
|
|
355
365
|
top: calc(var(--spacing) * 14);
|
|
356
366
|
}
|
|
357
|
-
.top-\[10vh\] {
|
|
358
|
-
top: 10vh;
|
|
359
|
-
}
|
|
360
367
|
.right-2 {
|
|
361
368
|
right: calc(var(--spacing) * 2);
|
|
362
369
|
}
|
|
@@ -366,6 +373,9 @@
|
|
|
366
373
|
.bottom-1\.5 {
|
|
367
374
|
bottom: calc(var(--spacing) * 1.5);
|
|
368
375
|
}
|
|
376
|
+
.left-0 {
|
|
377
|
+
left: calc(var(--spacing) * 0);
|
|
378
|
+
}
|
|
369
379
|
.left-1\/2 {
|
|
370
380
|
left: calc(1/2 * 100%);
|
|
371
381
|
}
|
|
@@ -929,10 +939,18 @@
|
|
|
929
939
|
width: calc(var(--spacing) * 5);
|
|
930
940
|
height: calc(var(--spacing) * 5);
|
|
931
941
|
}
|
|
942
|
+
.size-6 {
|
|
943
|
+
width: calc(var(--spacing) * 6);
|
|
944
|
+
height: calc(var(--spacing) * 6);
|
|
945
|
+
}
|
|
932
946
|
.size-6\.5 {
|
|
933
947
|
width: calc(var(--spacing) * 6.5);
|
|
934
948
|
height: calc(var(--spacing) * 6.5);
|
|
935
949
|
}
|
|
950
|
+
.size-9 {
|
|
951
|
+
width: calc(var(--spacing) * 9);
|
|
952
|
+
height: calc(var(--spacing) * 9);
|
|
953
|
+
}
|
|
936
954
|
.size-full {
|
|
937
955
|
width: 100%;
|
|
938
956
|
height: 100%;
|
|
@@ -991,9 +1009,6 @@
|
|
|
991
1009
|
.w-\(--fd-toc-width\) {
|
|
992
1010
|
width: var(--fd-toc-width);
|
|
993
1011
|
}
|
|
994
|
-
.w-\(--radix-popover-trigger-width\) {
|
|
995
|
-
width: var(--radix-popover-trigger-width);
|
|
996
|
-
}
|
|
997
1012
|
.w-0 {
|
|
998
1013
|
width: calc(var(--spacing) * 0);
|
|
999
1014
|
}
|
|
@@ -1015,8 +1030,8 @@
|
|
|
1015
1030
|
.w-\[286px\] {
|
|
1016
1031
|
width: 286px;
|
|
1017
1032
|
}
|
|
1018
|
-
.w-\[calc\(
|
|
1019
|
-
width: calc(
|
|
1033
|
+
.w-\[calc\(100\%-2\*var\(--spacing\)\)\] {
|
|
1034
|
+
width: calc(100% - 2 * var(--spacing));
|
|
1020
1035
|
}
|
|
1021
1036
|
.w-fit {
|
|
1022
1037
|
width: fit-content;
|
|
@@ -1054,6 +1069,9 @@
|
|
|
1054
1069
|
.max-w-sm {
|
|
1055
1070
|
max-width: var(--container-sm);
|
|
1056
1071
|
}
|
|
1072
|
+
.min-w-\(--radix-popover-trigger-width\) {
|
|
1073
|
+
min-width: var(--radix-popover-trigger-width);
|
|
1074
|
+
}
|
|
1057
1075
|
.min-w-0 {
|
|
1058
1076
|
min-width: calc(var(--spacing) * 0);
|
|
1059
1077
|
}
|
|
@@ -1241,13 +1259,12 @@
|
|
|
1241
1259
|
.rounded-md {
|
|
1242
1260
|
border-radius: var(--radius-md);
|
|
1243
1261
|
}
|
|
1262
|
+
.rounded-sm {
|
|
1263
|
+
border-radius: var(--radius-sm);
|
|
1264
|
+
}
|
|
1244
1265
|
.rounded-xl {
|
|
1245
1266
|
border-radius: var(--radius-xl);
|
|
1246
1267
|
}
|
|
1247
|
-
.rounded-e-2xl {
|
|
1248
|
-
border-start-end-radius: var(--radius-2xl);
|
|
1249
|
-
border-end-end-radius: var(--radius-2xl);
|
|
1250
|
-
}
|
|
1251
1268
|
.border {
|
|
1252
1269
|
border-style: var(--tw-border-style);
|
|
1253
1270
|
border-width: 1px;
|
|
@@ -1264,6 +1281,10 @@
|
|
|
1264
1281
|
border-inline-end-style: var(--tw-border-style);
|
|
1265
1282
|
border-inline-end-width: 1px;
|
|
1266
1283
|
}
|
|
1284
|
+
.border-e-0 {
|
|
1285
|
+
border-inline-end-style: var(--tw-border-style);
|
|
1286
|
+
border-inline-end-width: 0px;
|
|
1287
|
+
}
|
|
1267
1288
|
.border-t {
|
|
1268
1289
|
border-top-style: var(--tw-border-style);
|
|
1269
1290
|
border-top-width: 1px;
|
|
@@ -1272,6 +1293,10 @@
|
|
|
1272
1293
|
border-bottom-style: var(--tw-border-style);
|
|
1273
1294
|
border-bottom-width: 1px;
|
|
1274
1295
|
}
|
|
1296
|
+
.border-b-0 {
|
|
1297
|
+
border-bottom-style: var(--tw-border-style);
|
|
1298
|
+
border-bottom-width: 0px;
|
|
1299
|
+
}
|
|
1275
1300
|
.border-l {
|
|
1276
1301
|
border-left-style: var(--tw-border-style);
|
|
1277
1302
|
border-left-width: 1px;
|
|
@@ -1315,12 +1340,6 @@
|
|
|
1315
1340
|
.bg-\(--shiki-light-bg\) {
|
|
1316
1341
|
background-color: var(--shiki-light-bg);
|
|
1317
1342
|
}
|
|
1318
|
-
.bg-black\/30 {
|
|
1319
|
-
background-color: color-mix(in srgb, #000 30%, transparent);
|
|
1320
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
1321
|
-
background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
|
|
1322
|
-
}
|
|
1323
|
-
}
|
|
1324
1343
|
.bg-fd-accent {
|
|
1325
1344
|
background-color: var(--color-fd-accent);
|
|
1326
1345
|
}
|
|
@@ -1348,10 +1367,10 @@
|
|
|
1348
1367
|
.bg-fd-muted {
|
|
1349
1368
|
background-color: var(--color-fd-muted);
|
|
1350
1369
|
}
|
|
1351
|
-
.bg-fd-popover\/
|
|
1352
|
-
background-color: color-mix(in srgb, hsl(0, 0%, 98%)
|
|
1370
|
+
.bg-fd-popover\/60 {
|
|
1371
|
+
background-color: color-mix(in srgb, hsl(0, 0%, 98%) 60%, transparent);
|
|
1353
1372
|
@supports (color: color-mix(in lab, red, red)) {
|
|
1354
|
-
background-color: color-mix(in oklab, var(--color-fd-popover)
|
|
1373
|
+
background-color: color-mix(in oklab, var(--color-fd-popover) 60%, transparent);
|
|
1355
1374
|
}
|
|
1356
1375
|
}
|
|
1357
1376
|
.bg-fd-primary {
|
|
@@ -1486,9 +1505,6 @@
|
|
|
1486
1505
|
.ps-\[calc\(var\(--fd-layout-offset\)\+var\(--fd-sidebar-width\)\)\] {
|
|
1487
1506
|
padding-inline-start: calc(var(--fd-layout-offset) + var(--fd-sidebar-width));
|
|
1488
1507
|
}
|
|
1489
|
-
.pe-2 {
|
|
1490
|
-
padding-inline-end: calc(var(--spacing) * 2);
|
|
1491
|
-
}
|
|
1492
1508
|
.pe-4 {
|
|
1493
1509
|
padding-inline-end: calc(var(--spacing) * 4);
|
|
1494
1510
|
}
|
|
@@ -1522,14 +1538,13 @@
|
|
|
1522
1538
|
.text-start {
|
|
1523
1539
|
text-align: start;
|
|
1524
1540
|
}
|
|
1541
|
+
.font-mono {
|
|
1542
|
+
font-family: var(--font-mono);
|
|
1543
|
+
}
|
|
1525
1544
|
.text-3xl {
|
|
1526
1545
|
font-size: var(--text-3xl);
|
|
1527
1546
|
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
|
1528
1547
|
}
|
|
1529
|
-
.text-base {
|
|
1530
|
-
font-size: var(--text-base);
|
|
1531
|
-
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
1532
|
-
}
|
|
1533
1548
|
.text-lg {
|
|
1534
1549
|
font-size: var(--text-lg);
|
|
1535
1550
|
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
@@ -1592,9 +1607,21 @@
|
|
|
1592
1607
|
.text-fd-muted-foreground {
|
|
1593
1608
|
color: var(--color-fd-muted-foreground);
|
|
1594
1609
|
}
|
|
1610
|
+
.text-fd-muted-foreground\/50 {
|
|
1611
|
+
color: color-mix(in srgb, hsl(0, 0%, 45.1%) 50%, transparent);
|
|
1612
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1613
|
+
color: color-mix(in oklab, var(--color-fd-muted-foreground) 50%, transparent);
|
|
1614
|
+
}
|
|
1615
|
+
}
|
|
1595
1616
|
.text-fd-popover-foreground {
|
|
1596
1617
|
color: var(--color-fd-popover-foreground);
|
|
1597
1618
|
}
|
|
1619
|
+
.text-fd-popover-foreground\/80 {
|
|
1620
|
+
color: color-mix(in srgb, hsl(0, 0%, 15.1%) 80%, transparent);
|
|
1621
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1622
|
+
color: color-mix(in oklab, var(--color-fd-popover-foreground) 80%, transparent);
|
|
1623
|
+
}
|
|
1624
|
+
}
|
|
1598
1625
|
.text-fd-primary {
|
|
1599
1626
|
color: var(--color-fd-primary);
|
|
1600
1627
|
}
|
|
@@ -1638,10 +1665,10 @@
|
|
|
1638
1665
|
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
1639
1666
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1640
1667
|
}
|
|
1641
|
-
.shadow-black\/
|
|
1642
|
-
--tw-shadow-color: color-mix(in srgb, #000
|
|
1668
|
+
.shadow-black\/40 {
|
|
1669
|
+
--tw-shadow-color: color-mix(in srgb, #000 40%, transparent);
|
|
1643
1670
|
@supports (color: color-mix(in lab, red, red)) {
|
|
1644
|
-
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black)
|
|
1671
|
+
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent);
|
|
1645
1672
|
}
|
|
1646
1673
|
}
|
|
1647
1674
|
.outline {
|
|
@@ -1666,6 +1693,16 @@
|
|
|
1666
1693
|
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
1667
1694
|
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
1668
1695
|
}
|
|
1696
|
+
.backdrop-blur-xl {
|
|
1697
|
+
--tw-backdrop-blur: blur(var(--blur-xl));
|
|
1698
|
+
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
1699
|
+
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
1700
|
+
}
|
|
1701
|
+
.backdrop-blur-xs {
|
|
1702
|
+
--tw-backdrop-blur: blur(var(--blur-xs));
|
|
1703
|
+
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
1704
|
+
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
1705
|
+
}
|
|
1669
1706
|
.transition {
|
|
1670
1707
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
|
|
1671
1708
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
@@ -1840,7 +1877,7 @@
|
|
|
1840
1877
|
.hover\:bg-fd-accent\/50 {
|
|
1841
1878
|
&:hover {
|
|
1842
1879
|
@media (hover: hover) {
|
|
1843
|
-
background-color: color-mix(in srgb,
|
|
1880
|
+
background-color: color-mix(in srgb, hsla(0, 0%, 82%, 50%) 50%, transparent);
|
|
1844
1881
|
@supports (color: color-mix(in lab, red, red)) {
|
|
1845
1882
|
background-color: color-mix(in oklab, var(--color-fd-accent) 50%, transparent);
|
|
1846
1883
|
}
|
|
@@ -1850,7 +1887,7 @@
|
|
|
1850
1887
|
.hover\:bg-fd-accent\/80 {
|
|
1851
1888
|
&:hover {
|
|
1852
1889
|
@media (hover: hover) {
|
|
1853
|
-
background-color: color-mix(in srgb,
|
|
1890
|
+
background-color: color-mix(in srgb, hsla(0, 0%, 82%, 50%) 80%, transparent);
|
|
1854
1891
|
@supports (color: color-mix(in lab, red, red)) {
|
|
1855
1892
|
background-color: color-mix(in oklab, var(--color-fd-accent) 80%, transparent);
|
|
1856
1893
|
}
|
|
@@ -2055,14 +2092,24 @@
|
|
|
2055
2092
|
animation: var(--animate-fd-sidebar-in);
|
|
2056
2093
|
}
|
|
2057
2094
|
}
|
|
2095
|
+
.data-\[state\=open\]\:bg-fd-accent {
|
|
2096
|
+
&[data-state="open"] {
|
|
2097
|
+
background-color: var(--color-fd-accent);
|
|
2098
|
+
}
|
|
2099
|
+
}
|
|
2058
2100
|
.data-\[state\=open\]\:bg-fd-accent\/50 {
|
|
2059
2101
|
&[data-state="open"] {
|
|
2060
|
-
background-color: color-mix(in srgb,
|
|
2102
|
+
background-color: color-mix(in srgb, hsla(0, 0%, 82%, 50%) 50%, transparent);
|
|
2061
2103
|
@supports (color: color-mix(in lab, red, red)) {
|
|
2062
2104
|
background-color: color-mix(in oklab, var(--color-fd-accent) 50%, transparent);
|
|
2063
2105
|
}
|
|
2064
2106
|
}
|
|
2065
2107
|
}
|
|
2108
|
+
.data-\[state\=open\]\:text-fd-accent-foreground {
|
|
2109
|
+
&[data-state="open"] {
|
|
2110
|
+
color: var(--color-fd-accent-foreground);
|
|
2111
|
+
}
|
|
2112
|
+
}
|
|
2066
2113
|
.max-xl\:end-4 {
|
|
2067
2114
|
@media (width < 80rem) {
|
|
2068
2115
|
inset-inline-end: calc(var(--spacing) * 4);
|
|
@@ -2078,6 +2125,18 @@
|
|
|
2078
2125
|
display: none;
|
|
2079
2126
|
}
|
|
2080
2127
|
}
|
|
2128
|
+
.max-lg\:rounded-b-2xl {
|
|
2129
|
+
@media (width < 64rem) {
|
|
2130
|
+
border-bottom-right-radius: var(--radius-2xl);
|
|
2131
|
+
border-bottom-left-radius: var(--radius-2xl);
|
|
2132
|
+
}
|
|
2133
|
+
}
|
|
2134
|
+
.max-lg\:shadow-lg {
|
|
2135
|
+
@media (width < 64rem) {
|
|
2136
|
+
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
2137
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2138
|
+
}
|
|
2139
|
+
}
|
|
2081
2140
|
.max-md\:invisible {
|
|
2082
2141
|
@media (width < 48rem) {
|
|
2083
2142
|
visibility: hidden;
|
|
@@ -2098,14 +2157,35 @@
|
|
|
2098
2157
|
display: none;
|
|
2099
2158
|
}
|
|
2100
2159
|
}
|
|
2160
|
+
.max-md\:rounded-md {
|
|
2161
|
+
@media (width < 48rem) {
|
|
2162
|
+
border-radius: var(--radius-md);
|
|
2163
|
+
}
|
|
2164
|
+
}
|
|
2165
|
+
.max-md\:border {
|
|
2166
|
+
@media (width < 48rem) {
|
|
2167
|
+
border-style: var(--tw-border-style);
|
|
2168
|
+
border-width: 1px;
|
|
2169
|
+
}
|
|
2170
|
+
}
|
|
2101
2171
|
.max-md\:bg-fd-background {
|
|
2102
2172
|
@media (width < 48rem) {
|
|
2103
2173
|
background-color: var(--color-fd-background);
|
|
2104
2174
|
}
|
|
2105
2175
|
}
|
|
2106
|
-
.max-md\:
|
|
2176
|
+
.max-md\:bg-fd-secondary {
|
|
2177
|
+
@media (width < 48rem) {
|
|
2178
|
+
background-color: var(--color-fd-secondary);
|
|
2179
|
+
}
|
|
2180
|
+
}
|
|
2181
|
+
.max-md\:p-1\.5 {
|
|
2182
|
+
@media (width < 48rem) {
|
|
2183
|
+
padding: calc(var(--spacing) * 1.5);
|
|
2184
|
+
}
|
|
2185
|
+
}
|
|
2186
|
+
.max-md\:backdrop-blur-xs {
|
|
2107
2187
|
@media (width < 48rem) {
|
|
2108
|
-
--tw-backdrop-blur: blur(var(--blur-
|
|
2188
|
+
--tw-backdrop-blur: blur(var(--blur-xs));
|
|
2109
2189
|
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
2110
2190
|
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
2111
2191
|
}
|
|
@@ -2150,16 +2230,37 @@
|
|
|
2150
2230
|
inset-block: calc(var(--spacing) * 2);
|
|
2151
2231
|
}
|
|
2152
2232
|
}
|
|
2233
|
+
.md\:top-\[calc\(50\%-250px\)\] {
|
|
2234
|
+
@media (width >= 48rem) {
|
|
2235
|
+
top: calc(50% - 250px);
|
|
2236
|
+
}
|
|
2237
|
+
}
|
|
2153
2238
|
.md\:mx-auto {
|
|
2154
2239
|
@media (width >= 48rem) {
|
|
2155
2240
|
margin-inline: auto;
|
|
2156
2241
|
}
|
|
2157
2242
|
}
|
|
2243
|
+
.md\:mt-1 {
|
|
2244
|
+
@media (width >= 48rem) {
|
|
2245
|
+
margin-top: calc(var(--spacing) * 1);
|
|
2246
|
+
}
|
|
2247
|
+
}
|
|
2248
|
+
.md\:mb-auto {
|
|
2249
|
+
@media (width >= 48rem) {
|
|
2250
|
+
margin-bottom: auto;
|
|
2251
|
+
}
|
|
2252
|
+
}
|
|
2158
2253
|
.md\:hidden {
|
|
2159
2254
|
@media (width >= 48rem) {
|
|
2160
2255
|
display: none;
|
|
2161
2256
|
}
|
|
2162
2257
|
}
|
|
2258
|
+
.md\:size-5 {
|
|
2259
|
+
@media (width >= 48rem) {
|
|
2260
|
+
width: calc(var(--spacing) * 5);
|
|
2261
|
+
height: calc(var(--spacing) * 5);
|
|
2262
|
+
}
|
|
2263
|
+
}
|
|
2163
2264
|
.md\:h-\[calc\(100dvh-56px\)\] {
|
|
2164
2265
|
@media (width >= 48rem) {
|
|
2165
2266
|
height: calc(100dvh - 56px);
|
|
@@ -2185,23 +2286,6 @@
|
|
|
2185
2286
|
padding-inline: calc(var(--spacing) * 6);
|
|
2186
2287
|
}
|
|
2187
2288
|
}
|
|
2188
|
-
.md\:py-1\.5 {
|
|
2189
|
-
@media (width >= 48rem) {
|
|
2190
|
-
padding-block: calc(var(--spacing) * 1.5);
|
|
2191
|
-
}
|
|
2192
|
-
}
|
|
2193
|
-
.md\:text-sm {
|
|
2194
|
-
@media (width >= 48rem) {
|
|
2195
|
-
font-size: var(--text-sm);
|
|
2196
|
-
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
2197
|
-
}
|
|
2198
|
-
}
|
|
2199
|
-
.md\:text-xs {
|
|
2200
|
-
@media (width >= 48rem) {
|
|
2201
|
-
font-size: var(--text-xs);
|
|
2202
|
-
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
2203
|
-
}
|
|
2204
|
-
}
|
|
2205
2289
|
.md\:\[--fd-nav-height\:0px\] {
|
|
2206
2290
|
@media (width >= 48rem) {
|
|
2207
2291
|
--fd-nav-height: 0px;
|
|
@@ -2338,6 +2422,12 @@
|
|
|
2338
2422
|
height: calc(var(--spacing) * 5);
|
|
2339
2423
|
}
|
|
2340
2424
|
}
|
|
2425
|
+
.\[\&_svg\]\:size-full {
|
|
2426
|
+
& svg {
|
|
2427
|
+
width: 100%;
|
|
2428
|
+
height: 100%;
|
|
2429
|
+
}
|
|
2430
|
+
}
|
|
2341
2431
|
.\[\&_svg\]\:shrink-0 {
|
|
2342
2432
|
& svg {
|
|
2343
2433
|
flex-shrink: 0;
|
|
@@ -2372,9 +2462,9 @@
|
|
|
2372
2462
|
--color-fd-background: hsl(0, 0%, 7.04%);
|
|
2373
2463
|
--color-fd-foreground: hsl(0, 0%, 92%);
|
|
2374
2464
|
--color-fd-muted: hsl(0, 0%, 12.9%);
|
|
2375
|
-
--color-fd-muted-foreground:
|
|
2376
|
-
--color-fd-popover: hsl(0, 0%,
|
|
2377
|
-
--color-fd-popover-foreground: hsl(0, 0%,
|
|
2465
|
+
--color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
|
|
2466
|
+
--color-fd-popover: hsl(0, 0%, 10.6%);
|
|
2467
|
+
--color-fd-popover-foreground: hsl(0, 0%, 86.9%);
|
|
2378
2468
|
--color-fd-card: hsl(0, 0%, 9.8%);
|
|
2379
2469
|
--color-fd-card-foreground: hsl(0, 0%, 98%);
|
|
2380
2470
|
--color-fd-border: hsla(0, 0%, 40%, 20%);
|
|
@@ -2396,8 +2486,7 @@
|
|
|
2396
2486
|
color: var(--shiki-light);
|
|
2397
2487
|
}
|
|
2398
2488
|
code .line {
|
|
2399
|
-
|
|
2400
|
-
min-height: 1.45em;
|
|
2489
|
+
min-height: 1lh;
|
|
2401
2490
|
position: relative;
|
|
2402
2491
|
}
|
|
2403
2492
|
&.has-focused code .line:not(.focused) {
|
|
@@ -4,7 +4,7 @@ const defaultTransform = (option, node) => {
|
|
|
4
4
|
return option;
|
|
5
5
|
return {
|
|
6
6
|
...option,
|
|
7
|
-
icon: (_jsx("div", { className: "
|
|
7
|
+
icon: (_jsx("div", { className: "size-full [&_svg]:size-full max-md:p-1.5 max-md:rounded-md max-md:border max-md:bg-fd-secondary", children: node.icon })),
|
|
8
8
|
};
|
|
9
9
|
};
|
|
10
10
|
export function getSidebarTabs(pageTree, { transform = defaultTransform } = {}) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fumadocs-ui",
|
|
3
|
-
"version": "15.5.
|
|
3
|
+
"version": "15.5.5",
|
|
4
4
|
"description": "The framework for building a documentation website in Next.js",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"NextJs",
|
|
@@ -87,30 +87,30 @@
|
|
|
87
87
|
"next-themes": "^0.4.6",
|
|
88
88
|
"postcss-selector-parser": "^7.1.0",
|
|
89
89
|
"react-medium-image-zoom": "^5.2.14",
|
|
90
|
-
"
|
|
90
|
+
"scroll-into-view-if-needed": "^3.1.0",
|
|
91
91
|
"tailwind-merge": "^3.3.1",
|
|
92
|
-
"fumadocs-core": "15.5.
|
|
92
|
+
"fumadocs-core": "15.5.5"
|
|
93
93
|
},
|
|
94
94
|
"devDependencies": {
|
|
95
|
-
"@next/eslint-plugin-next": "^15.3.
|
|
95
|
+
"@next/eslint-plugin-next": "^15.3.4",
|
|
96
96
|
"@tailwindcss/cli": "^4.1.10",
|
|
97
97
|
"@types/lodash.merge": "^4.6.9",
|
|
98
98
|
"@types/react": "^19.1.8",
|
|
99
99
|
"@types/react-dom": "^19.1.6",
|
|
100
|
-
"next": "15.3.
|
|
100
|
+
"next": "15.3.4",
|
|
101
101
|
"tailwindcss": "^4.1.10",
|
|
102
102
|
"tsc-alias": "^1.8.16",
|
|
103
103
|
"@fumadocs/cli": "0.2.1",
|
|
104
|
+
"fumadocs-core": "15.5.5",
|
|
104
105
|
"eslint-config-custom": "0.0.0",
|
|
105
|
-
"fumadocs-core": "15.5.3",
|
|
106
106
|
"tsconfig": "0.0.0"
|
|
107
107
|
},
|
|
108
108
|
"peerDependencies": {
|
|
109
|
+
"@types/react": "*",
|
|
109
110
|
"next": "14.x.x || 15.x.x",
|
|
110
111
|
"react": "18.x.x || 19.x.x",
|
|
111
112
|
"react-dom": "18.x.x || 19.x.x",
|
|
112
|
-
"tailwindcss": "^3.4.14 || ^4.0.0"
|
|
113
|
-
"@types/react": "*"
|
|
113
|
+
"tailwindcss": "^3.4.14 || ^4.0.0"
|
|
114
114
|
},
|
|
115
115
|
"peerDependenciesMeta": {
|
|
116
116
|
"next": {
|