fumadocs-ui 15.2.15 → 15.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/black.css +2 -2
- package/css/neutral.css +2 -2
- package/css/ocean.css +3 -3
- package/css/preset.css +190 -1
- package/css/purple.css +10 -10
- package/css/shiki.css +24 -7
- package/dist/components/accordion.js +1 -1
- package/dist/components/codeblock.d.ts +16 -0
- package/dist/components/codeblock.d.ts.map +1 -1
- package/dist/components/codeblock.js +12 -7
- package/dist/components/layout/root-toggle.d.ts +3 -3
- package/dist/components/layout/root-toggle.d.ts.map +1 -1
- package/dist/components/layout/root-toggle.js +1 -1
- package/dist/components/layout/sidebar.d.ts +14 -11
- package/dist/components/layout/sidebar.d.ts.map +1 -1
- package/dist/components/layout/sidebar.js +42 -33
- package/dist/components/tabs.d.ts +3 -1
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +25 -36
- package/dist/components/ui/tabs.d.ts.map +1 -1
- package/dist/components/ui/tabs.js +4 -4
- package/dist/contexts/sidebar.d.ts.map +1 -1
- package/dist/contexts/sidebar.js +2 -3
- package/dist/layouts/docs/shared.d.ts +0 -1
- package/dist/layouts/docs/shared.d.ts.map +1 -1
- package/dist/layouts/docs-client.d.ts.map +1 -1
- package/dist/layouts/docs-client.js +8 -8
- package/dist/layouts/docs.d.ts.map +1 -1
- package/dist/layouts/docs.js +2 -3
- package/dist/layouts/home/menu.js +1 -1
- package/dist/layouts/home/navbar.js +1 -1
- package/dist/layouts/notebook-client.d.ts.map +1 -1
- package/dist/layouts/notebook-client.js +4 -5
- package/dist/layouts/notebook.d.ts.map +1 -1
- package/dist/layouts/notebook.js +8 -8
- package/dist/page-client.d.ts.map +1 -1
- package/dist/page-client.js +3 -5
- package/dist/page.d.ts +2 -2
- package/dist/page.d.ts.map +1 -1
- package/dist/style.css +139 -123
- package/package.json +15 -13
- package/css/animations.css +0 -199
|
@@ -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
|
-
|
|
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
|
|
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
|
-
|
|
36
|
-
|
|
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
|
-
}, "
|
|
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 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
|
|
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) * ${
|
|
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-
|
|
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;
|
|
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"}
|
package/dist/components/tabs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useState, } from 'react';
|
|
4
4
|
import { cn } from '../utils/cn.js';
|
|
5
5
|
import * as Primitive from './ui/tabs.js';
|
|
6
6
|
import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
|
|
@@ -16,12 +16,17 @@ function removeChangeListener(id, listener) {
|
|
|
16
16
|
listeners.set(id, list.filter((item) => item !== listener));
|
|
17
17
|
}
|
|
18
18
|
const TabsContext = createContext(null);
|
|
19
|
-
|
|
19
|
+
function useTabContext() {
|
|
20
|
+
const ctx = useContext(TabsContext);
|
|
21
|
+
if (!ctx)
|
|
22
|
+
throw new Error('You must wrap your component in <Tabs>');
|
|
23
|
+
return ctx;
|
|
24
|
+
}
|
|
25
|
+
export function Tabs({ groupId, items = [], persist = false, label, defaultIndex = 0, updateAnchor = false, ...props }) {
|
|
20
26
|
const values = useMemo(() => items.map((item) => toValue(item)), [items]);
|
|
21
27
|
const [value, setValue] = useState(values[defaultIndex]);
|
|
22
28
|
const valueToIdMap = useMemo(() => new Map(), []);
|
|
23
|
-
|
|
24
|
-
const collection = useMemo(() => createCollection(), [items]);
|
|
29
|
+
const collection = useMemo(() => [], []);
|
|
25
30
|
const onUpdate = useEffectEvent((v) => {
|
|
26
31
|
if (values.includes(v))
|
|
27
32
|
setValue(v);
|
|
@@ -69,26 +74,23 @@ export function Tabs({ groupId, items = [], persist = false, defaultIndex = 0, u
|
|
|
69
74
|
else {
|
|
70
75
|
setValue(v);
|
|
71
76
|
}
|
|
72
|
-
}, ...props, className: cn('my-4', props.className), children: [
|
|
77
|
+
}, ...props, className: cn('my-4', props.className), children: [_jsxs(Primitive.TabsList, { children: [label && (_jsx("span", { className: "text-sm font-medium my-auto me-auto", children: label })), values.map((v, i) => (_jsx(Primitive.TabsTrigger, { value: v, children: items[i] }, v)))] }), _jsx(TabsContext.Provider, { value: useMemo(() => ({ items, valueToIdMap, collection }), [valueToIdMap, collection, items]), children: props.children })] }));
|
|
73
78
|
}
|
|
74
79
|
function toValue(v) {
|
|
75
80
|
return v.toLowerCase().replace(/\s/, '-');
|
|
76
81
|
}
|
|
77
82
|
export function Tab({ value, className, ...props }) {
|
|
78
|
-
const
|
|
83
|
+
const { items, valueToIdMap } = useTabContext();
|
|
79
84
|
const resolvedValue = value ??
|
|
80
85
|
// eslint-disable-next-line react-hooks/rules-of-hooks -- `value` is not supposed to change
|
|
81
|
-
|
|
86
|
+
items.at(useCollectionIndex());
|
|
82
87
|
if (!resolvedValue)
|
|
83
88
|
throw new Error('Failed to resolve tab `value`, please pass a `value` prop to the Tab component.');
|
|
84
89
|
const v = toValue(resolvedValue);
|
|
85
|
-
if (props.id
|
|
86
|
-
|
|
90
|
+
if (props.id) {
|
|
91
|
+
valueToIdMap.set(v, props.id);
|
|
87
92
|
}
|
|
88
|
-
return (_jsx(Primitive.TabsContent, { value: v, className: cn('prose-no-margin [&>figure:only-child]:-m-4 [&>figure:only-child]:
|
|
89
|
-
}
|
|
90
|
-
function createCollection() {
|
|
91
|
-
return [];
|
|
93
|
+
return (_jsx(Primitive.TabsContent, { value: v, className: cn('prose-no-margin [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none', className), ...props, children: props.children }));
|
|
92
94
|
}
|
|
93
95
|
/**
|
|
94
96
|
* Inspired by Headless UI.
|
|
@@ -98,28 +100,15 @@ function createCollection() {
|
|
|
98
100
|
*/
|
|
99
101
|
function useCollectionIndex() {
|
|
100
102
|
const key = useId();
|
|
101
|
-
const
|
|
102
|
-
if (!ctx)
|
|
103
|
-
throw new Error('You must wrap your component in <Tabs>');
|
|
104
|
-
const list = ctx.collection;
|
|
105
|
-
function register() {
|
|
106
|
-
if (!list.includes(key))
|
|
107
|
-
list.push(key);
|
|
108
|
-
}
|
|
109
|
-
function unregister() {
|
|
110
|
-
const idx = list.indexOf(key);
|
|
111
|
-
if (idx !== -1)
|
|
112
|
-
list.splice(idx, 1);
|
|
113
|
-
}
|
|
114
|
-
useMemo(() => {
|
|
115
|
-
// re-order the item to the bottom if registered
|
|
116
|
-
unregister();
|
|
117
|
-
register();
|
|
118
|
-
// eslint-disable-next-line -- register
|
|
119
|
-
}, [list]);
|
|
103
|
+
const { collection } = useTabContext();
|
|
120
104
|
useEffect(() => {
|
|
121
|
-
return
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
105
|
+
return () => {
|
|
106
|
+
const idx = collection.indexOf(key);
|
|
107
|
+
if (idx !== -1)
|
|
108
|
+
collection.splice(idx, 1);
|
|
109
|
+
};
|
|
110
|
+
}, [key, collection]);
|
|
111
|
+
if (!collection.includes(key))
|
|
112
|
+
collection.push(key);
|
|
113
|
+
return collection.indexOf(key);
|
|
125
114
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,IAAI,mJAcR,CAAC;AAIH,QAAA,MAAM,QAAQ,uJAYZ,CAAC;AAGH,QAAA,MAAM,WAAW,gKAYf,CAAC;AAGH,QAAA,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,IAAI,mJAcR,CAAC;AAIH,QAAA,MAAM,QAAQ,uJAYZ,CAAC;AAGH,QAAA,MAAM,WAAW,gKAYf,CAAC;AAGH,QAAA,MAAM,WAAW,0JAYf,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -4,13 +4,13 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { cn } from '../../utils/cn.js';
|
|
6
6
|
const Tabs = React.forwardRef((props, ref) => {
|
|
7
|
-
return (_jsx(TabsPrimitive.Root, { ref: ref, ...props, className: cn('flex flex-col overflow-hidden rounded-xl border bg-fd-
|
|
7
|
+
return (_jsx(TabsPrimitive.Root, { ref: ref, ...props, className: cn('flex flex-col overflow-hidden rounded-xl border bg-fd-secondary', props.className) }));
|
|
8
8
|
});
|
|
9
9
|
Tabs.displayName = 'Tabs';
|
|
10
|
-
const TabsList = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.List, { ref: ref, ...props, className: cn('flex
|
|
10
|
+
const TabsList = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.List, { ref: ref, ...props, className: cn('flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4', props.className) })));
|
|
11
11
|
TabsList.displayName = 'TabsList';
|
|
12
|
-
const TabsTrigger = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, ...props, className: cn('whitespace-nowrap border-b border-transparent py-2 text-sm font-medium transition-colors hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-fd-primary data-[state=active]:text-fd-primary', props.className) })));
|
|
12
|
+
const TabsTrigger = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, ...props, className: cn('whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-fd-primary data-[state=active]:text-fd-primary', props.className) })));
|
|
13
13
|
TabsTrigger.displayName = 'TabsTrigger';
|
|
14
|
-
const TabsContent = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, ...props, className: cn('p-4', props.className) })));
|
|
14
|
+
const TabsContent = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, ...props, className: cn('p-4 text-[15px] bg-fd-background rounded-xl outline-none', props.className) })));
|
|
15
15
|
TabsContent.displayName = 'TabsContent';
|
|
16
16
|
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/contexts/sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/contexts/sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAIf,UAAU,cAAc;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAE5D;;OAEG;IACH,eAAe,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CACrC;AAED,QAAA,MAAM,cAAc;;;;;;CAAkD,CAAC;AAEvE,wBAAgB,UAAU,IAAI,cAAc,CAE3C;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,SAAS,CA8BZ"}
|
package/dist/contexts/sidebar.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { useMemo, useRef, useState, } from 'react';
|
|
4
4
|
import { createContext, usePathname } from 'fumadocs-core/framework';
|
|
5
|
-
import { SidebarProvider as BaseProvider } from 'fumadocs-core/sidebar';
|
|
6
5
|
import { useOnChange } from 'fumadocs-core/utils/use-on-change';
|
|
7
6
|
const SidebarContext = createContext('SidebarContext');
|
|
8
7
|
export function useSidebar() {
|
|
@@ -25,5 +24,5 @@ export function SidebarProvider({ children, }) {
|
|
|
25
24
|
collapsed,
|
|
26
25
|
setCollapsed,
|
|
27
26
|
closeOnRedirect,
|
|
28
|
-
}), [open, collapsed]), children:
|
|
27
|
+
}), [open, collapsed]), children: children }));
|
|
29
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EACL,KAAK,iBAAiB,EAMtB,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,eAAO,MAAM,eAAe;;CAE3B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,
|
|
1
|
+
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EACL,KAAK,iBAAiB,EAMtB,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,eAAO,MAAM,eAAe;;CAE3B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAEhD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAmCA;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,wBASpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"docs-client.d.ts","sourceRoot":"","sources":["../../src/layouts/docs-client.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"docs-client.d.ts","sourceRoot":"","sources":["../../src/layouts/docs-client.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAQvE,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAiBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAmB/C;AAED,wBAAgB,kBAAkB,wDAyBjC"}
|
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Menu, Sidebar as SidebarIcon
|
|
3
|
+
import { Menu, Sidebar as SidebarIcon } from '../icons.js';
|
|
4
4
|
import { cn } from '../utils/cn.js';
|
|
5
5
|
import { buttonVariants } from '../components/ui/button.js';
|
|
6
6
|
import { useSidebar } from '../contexts/sidebar.js';
|
|
7
7
|
import { useNav } from '../contexts/layout.js';
|
|
8
|
-
import { SidebarTrigger } from 'fumadocs-core/sidebar';
|
|
9
8
|
import { SidebarCollapseTrigger } from '../components/layout/sidebar.js';
|
|
10
9
|
import { SearchToggle } from '../components/layout/search-toggle.js';
|
|
11
10
|
export function Navbar(props) {
|
|
12
11
|
const { open } = useSidebar();
|
|
13
12
|
const { isTransparent } = useNav();
|
|
14
|
-
return (_jsx("header", { id: "nd-subnav", ...props, className: cn('sticky top-(--fd-banner-height) z-30 flex h-14 items-center px-4 border-b
|
|
13
|
+
return (_jsx("header", { id: "nd-subnav", ...props, className: cn('sticky top-(--fd-banner-height) z-30 flex h-14 items-center px-4 border-b transition-colors backdrop-blur-sm md:px-6', (!isTransparent || open) && 'bg-fd-background/80', props.className), children: props.children }));
|
|
15
14
|
}
|
|
16
15
|
export function NavbarSidebarTrigger(props) {
|
|
17
|
-
const {
|
|
18
|
-
return (_jsx(
|
|
16
|
+
const { setOpen } = useSidebar();
|
|
17
|
+
return (_jsx("button", { ...props, className: cn(buttonVariants({
|
|
19
18
|
color: 'ghost',
|
|
20
19
|
size: 'icon',
|
|
21
|
-
}), props.className),
|
|
20
|
+
}), props.className), onClick: () => setOpen((prev) => !prev), children: _jsx(Menu, {}) }));
|
|
22
21
|
}
|
|
23
22
|
export function CollapsibleControl() {
|
|
24
23
|
const { collapsed } = useSidebar();
|
|
25
24
|
if (!collapsed)
|
|
26
25
|
return;
|
|
27
|
-
return (_jsxs("div", { className: "fixed flex
|
|
26
|
+
return (_jsxs("div", { className: "fixed flex shadow-lg animate-fd-fade-in rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 xl:start-4 max-xl:end-4", style: {
|
|
28
27
|
top: 'calc(var(--fd-banner-height) + var(--fd-tocnav-height) + var(--spacing) * 4)',
|
|
29
28
|
}, children: [_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
30
29
|
color: 'ghost',
|
|
31
30
|
size: 'icon-sm',
|
|
32
|
-
|
|
31
|
+
className: 'rounded-lg',
|
|
32
|
+
})), children: _jsx(SidebarIcon, {}) }), _jsx(SearchToggle, { size: "icon-sm", className: "rounded-lg", hideIfDisabled: true })] }));
|
|
33
33
|
}
|
|
@@ -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;
|
|
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;AAarE,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAY/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,OAAY,EACZ,YAAY,EACZ,kBAA0B,EAC1B,WAA8C,EAC9C,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAkG7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAkB,EAClB,UAAU,EACV,GAAG,EACH,KAAU,EACV,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAChC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,2CA0CA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,WAAW,EACX,KAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;CAC9C,kDAiCA;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC"}
|
package/dist/layouts/docs.js
CHANGED
|
@@ -3,7 +3,7 @@ import { useMemo } from 'react';
|
|
|
3
3
|
import { Languages, Sidebar as SidebarIcon } from '../icons.js';
|
|
4
4
|
import { cn } from '../utils/cn.js';
|
|
5
5
|
import { buttonVariants } from '../components/ui/button.js';
|
|
6
|
-
import {
|
|
6
|
+
import { Sidebar, SidebarCollapseTrigger, SidebarFooter, SidebarHeader, SidebarPageTree, SidebarViewport, } from '../components/layout/sidebar.js';
|
|
7
7
|
import { omit, slot, slots } from '../layouts/shared.js';
|
|
8
8
|
import { BaseLinkItem, } from '../layouts/links.js';
|
|
9
9
|
import { RootToggle } from '../components/layout/root-toggle.js';
|
|
@@ -32,8 +32,7 @@ export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar = {}
|
|
|
32
32
|
}, children: [slot(sidebar, _jsx(DocsLayoutSidebar, { ...omit(sidebar, 'enabled', 'component', 'tabs'), links: links, nav: _jsxs(_Fragment, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children] }), banner: _jsxs(_Fragment, { children: [tabs.length > 0 ? _jsx(RootToggle, { options: tabs }) : null, slots('lg', searchToggle, _jsx(LargeSearchToggle, { hideIfDisabled: true, className: "rounded-lg max-md:hidden" })), sidebar.banner] }), footer: _jsxs(_Fragment, { children: [_jsx(DocsLayoutSidebarFooter, { links: links.filter((item) => item.type === 'icon'), i18n: i18n, themeSwitch: themeSwitch }), sidebar.footer] }) })), _jsx(StylesProvider, { ...pageStyles, children: children })] })] }) }));
|
|
33
33
|
}
|
|
34
34
|
export function DocsLayoutSidebar({ collapsible = true, components, nav, links = [], footer, banner, ...props }) {
|
|
35
|
-
|
|
36
|
-
return (_jsxs(_Fragment, { children: [collapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Aside, { ...props, className: cn('md:ps-(--fd-layout-offset)', props.className), children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex flex-row py-1.5 max-md:hidden", children: [nav, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
35
|
+
return (_jsxs(_Fragment, { children: [collapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...props, collapsible: collapsible, className: cn('md:ps-(--fd-layout-offset)', props.className), children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex flex-row py-1.5 max-md:hidden", children: [nav, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
37
36
|
color: 'ghost',
|
|
38
37
|
size: 'icon-sm',
|
|
39
38
|
}), 'ms-auto mb-auto -my-1.5 text-fd-muted-foreground max-md:hidden'), children: _jsx(SidebarIcon, {}) }))] }), banner] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "mb-4 empty:hidden", children: links
|
|
@@ -41,5 +41,5 @@ export function MenuTrigger({ enableHover = false, ...props }) {
|
|
|
41
41
|
}), props.className), children: props.children }));
|
|
42
42
|
}
|
|
43
43
|
export function MenuContent(props) {
|
|
44
|
-
return (_jsx(NavigationMenuContent, { ...props, className: cn('flex flex-col
|
|
44
|
+
return (_jsx(NavigationMenuContent, { ...props, className: cn('flex flex-col px-4 pb-4', props.className), children: props.children }));
|
|
45
45
|
}
|
|
@@ -12,7 +12,7 @@ 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 left-(--fd-nav-left) top-(--fd-banner-height) z-40 box-content w-full max-w-fd-container -translate-x-1/2 border-b
|
|
15
|
+
return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed left-(--fd-nav-left) top-(--fd-banner-height) z-40 box-content w-full max-w-fd-container -translate-x-1/2 border-b transition-colors lg:mt-2 lg:w-[calc(100%-1rem)] lg:rounded-2xl lg:border', value.length > 0 ? 'shadow-lg' : 'shadow-sm', (!isTransparent || value.length > 0) &&
|
|
16
16
|
'bg-fd-background/80 backdrop-blur-lg', props.className), style: {
|
|
17
17
|
'--fd-nav-left': 'calc(50% - var(--removed-body-scroll-bar-size,0px) / 2)',
|
|
18
18
|
...props.style,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notebook-client.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"notebook-client.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAQvE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAAE,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,2CAoBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAmB/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAY5D;AAUD,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,2CAkBrC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,cAAc,CAAC,WAAW,CAAC,2CAoBhD"}
|
|
@@ -3,9 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { cn } from '../utils/cn.js';
|
|
4
4
|
import { useSidebar } from '../contexts/sidebar.js';
|
|
5
5
|
import { useNav } from '../contexts/layout.js';
|
|
6
|
-
import { SidebarTrigger } from 'fumadocs-core/sidebar';
|
|
7
6
|
import { buttonVariants } from '../components/ui/button.js';
|
|
8
|
-
import { Menu
|
|
7
|
+
import { Menu } from '../icons.js';
|
|
9
8
|
import Link from 'fumadocs-core/link';
|
|
10
9
|
import { usePathname } from 'fumadocs-core/framework';
|
|
11
10
|
import { isActive } from '../utils/is-active.js';
|
|
@@ -17,11 +16,11 @@ export function Navbar({ mode, ...props }) {
|
|
|
17
16
|
'ps-[calc(var(--fd-layout-offset)+var(--fd-sidebar-width))]', props.className), children: props.children }));
|
|
18
17
|
}
|
|
19
18
|
export function NavbarSidebarTrigger(props) {
|
|
20
|
-
const {
|
|
21
|
-
return (_jsx(
|
|
19
|
+
const { setOpen } = useSidebar();
|
|
20
|
+
return (_jsx("button", { ...props, className: cn(buttonVariants({
|
|
22
21
|
color: 'ghost',
|
|
23
22
|
size: 'icon',
|
|
24
|
-
}), props.className),
|
|
23
|
+
}), props.className), onClick: () => setOpen((prev) => !prev), children: _jsx(Menu, {}) }));
|
|
25
24
|
}
|
|
26
25
|
export function LayoutTabs(props) {
|
|
27
26
|
return (_jsx("div", { ...props, className: cn('flex flex-row items-end gap-6 overflow-auto', props.className), children: props.children }));
|
|
@@ -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,EAAyB,MAAM,kBAAkB,CAAC;
|
|
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,EAAyB,MAAM,kBAAkB,CAAC;AAqB/E,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAGL,MAAM,EACN,oBAAoB,EAErB,MAAM,mBAAmB,CAAC;AAa3B,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,2CA8IhD;AAoLD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}
|
package/dist/layouts/notebook.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Fragment, useMemo } from 'react';
|
|
3
3
|
import { getLinks, slot, slots } from '../layouts/shared.js';
|
|
4
|
-
import {
|
|
4
|
+
import { Sidebar, SidebarCollapseTrigger, SidebarFooter, SidebarHeader, SidebarPageTree, SidebarViewport, } from '../components/layout/sidebar.js';
|
|
5
5
|
import { TreeContextProvider } from '../contexts/tree.js';
|
|
6
6
|
import { cn } from '../utils/cn.js';
|
|
7
7
|
import { buttonVariants } from '../components/ui/button.js';
|
|
@@ -17,11 +17,10 @@ import { RootToggle } from '../components/layout/root-toggle.js';
|
|
|
17
17
|
import Link from 'fumadocs-core/link';
|
|
18
18
|
import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
|
|
19
19
|
export function DocsLayout(props) {
|
|
20
|
-
const { tabMode = 'sidebar', nav: { transparentMode, ...nav } = {}, sidebar: {
|
|
20
|
+
const { tabMode = 'sidebar', nav: { transparentMode, ...nav } = {}, sidebar: { tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar } = {}, i18n = false, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, } = props;
|
|
21
21
|
const navMode = nav.mode ?? 'auto';
|
|
22
22
|
const links = getLinks(props.links ?? [], props.githubUrl);
|
|
23
23
|
const tabs = useMemo(() => getSidebarTabsFromOptions(tabOptions, props.tree) ?? [], [tabOptions, props.tree]);
|
|
24
|
-
const Aside = sidebarCollapsible ? CollapsibleSidebar : Sidebar;
|
|
25
24
|
const variables = cn('[--fd-nav-height:calc(var(--spacing)*14)] [--fd-tocnav-height:36px] md:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]', tabs.length > 0 &&
|
|
26
25
|
tabMode === 'navbar' &&
|
|
27
26
|
'lg:[--fd-nav-height:calc(var(--spacing)*24)]');
|
|
@@ -33,19 +32,20 @@ export function DocsLayout(props) {
|
|
|
33
32
|
return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsx(NavProvider, { transparentMode: transparentMode, children: _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex w-full flex-1 flex-row pe-(--fd-layout-offset)', variables, props.containerProps?.className), style: {
|
|
34
33
|
...layoutVariables,
|
|
35
34
|
...props.containerProps?.style,
|
|
36
|
-
}, children: [_jsxs(
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
}, children: [_jsxs(Sidebar, { ...sidebar, className: cn('md:ps-(--fd-layout-offset)', navMode === 'top'
|
|
36
|
+
? 'md:bg-transparent'
|
|
37
|
+
: 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsxs(SidebarHeader, { children: [navMode === 'auto' && (_jsxs("div", { className: "flex flex-row justify-between max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-medium", children: nav.title }), (sidebar.collapsible ?? true) && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
39
38
|
color: 'ghost',
|
|
40
39
|
size: 'icon-sm',
|
|
41
|
-
|
|
40
|
+
className: 'text-fd-muted-foreground mb-auto',
|
|
41
|
+
})), children: _jsx(SidebarIcon, {}) }))] })), nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { className: "mb-2", options: tabs })) : null] }), _jsxs(SidebarViewport, { children: [tabMode === 'navbar' &&
|
|
42
42
|
tabs.map((tab, i) => (_jsx(SidebarLayoutTab, { item: tab, className: cn('lg:hidden', i === tabs.length - 1 && 'mb-4') }, tab.url))), links.map((item, i) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === links.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsxs(SidebarFooter, { className: cn('flex flex-row items-center', !sidebarFooter && 'md:hidden'), children: [i18n ? (_jsx(LanguageToggle, { className: "me-auto md:hidden", children: _jsx(Languages, { className: "size-5 text-fd-muted-foreground" }) })) : null, slot(themeSwitch, _jsx(ThemeToggle, { className: "md:hidden", mode: themeSwitch?.mode ?? 'light-dark-system' })), sidebarFooter] })] }), _jsx(DocsNavbar, { ...props, links: links, tabs: tabMode == 'navbar' ? tabs : [] }), _jsx(StylesProvider, { ...pageStyles, children: props.children })] }) }) }));
|
|
43
43
|
}
|
|
44
44
|
function DocsNavbar({ links, tabs, ...props }) {
|
|
45
45
|
const navMode = props.nav?.mode ?? 'auto';
|
|
46
46
|
const sidebarCollapsible = props.sidebar?.collapsible ?? true;
|
|
47
47
|
const nav = (_jsx(Link, { href: props.nav?.url ?? '/', className: cn('inline-flex items-center gap-2.5 font-semibold empty:hidden', navMode === 'auto' && 'md:hidden'), children: props.nav?.title }));
|
|
48
|
-
return (_jsxs(Navbar, { mode: navMode, children: [_jsxs("div", { className: cn('flex flex-row border-b
|
|
48
|
+
return (_jsxs(Navbar, { mode: navMode, children: [_jsxs("div", { className: cn('flex flex-row border-b px-4 h-14', navMode === 'auto' && 'md:px-6'), children: [_jsxs("div", { className: cn('flex flex-row items-center', navMode === 'top' && 'flex-1 pe-4'), children: [sidebarCollapsible && navMode === 'auto' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
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] }), slots('lg', props.searchToggle, _jsx(LargeSearchToggle, { hideIfDisabled: true, className: cn('w-full my-auto rounded-xl max-md:hidden', navMode === 'top' ? 'max-w-sm px-2' : '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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-client.d.ts","sourceRoot":"","sources":["../src/page-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"page-client.d.ts","sourceRoot":"","sources":["../src/page-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAgBlC,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAgDrD;AA4DD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAU7D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAwD/D;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAY7D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAe7D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,2CAc/C;AAED,KAAK,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,KAAK,CAAC,CAAC;AAChE,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,IAAI,CAAC;QAChB,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;CACH;AAyBD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,WAAW,2CA+B5C;AA8BD,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAEhD,wBAAgB,UAAU,CAAC,OAAO,EAAE,eAAe,kDAsClD"}
|
package/dist/page-client.js
CHANGED
|
@@ -6,7 +6,6 @@ import Link from 'fumadocs-core/link';
|
|
|
6
6
|
import { cn } from './utils/cn.js';
|
|
7
7
|
import { useI18n } from './contexts/i18n.js';
|
|
8
8
|
import { useTreeContext, useTreePath } from './contexts/tree.js';
|
|
9
|
-
import { useSidebar } from './contexts/sidebar.js';
|
|
10
9
|
import { createContext, usePathname } from 'fumadocs-core/framework';
|
|
11
10
|
import { getBreadcrumbItemsFromPath, } from 'fumadocs-core/breadcrumb';
|
|
12
11
|
import { useNav, usePageStyles } from './contexts/layout.js';
|
|
@@ -21,8 +20,8 @@ export function TocPopoverTrigger({ items, ...props }) {
|
|
|
21
20
|
const active = Primitive.useActiveAnchor();
|
|
22
21
|
const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
|
|
23
22
|
const path = useTreePath().at(-1);
|
|
24
|
-
const
|
|
25
|
-
return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex flex-row items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / items.length, max: 1, className: cn(open && 'text-fd-primary') }), _jsxs("span", { className:
|
|
23
|
+
const showItem = selected !== -1 && !open;
|
|
24
|
+
return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex flex-row items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / items.length, max: 1, className: cn(open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('transition-transform', open && 'rotate-180') })] }));
|
|
26
25
|
}
|
|
27
26
|
function clamp(input, min, max) {
|
|
28
27
|
if (input < min)
|
|
@@ -51,7 +50,6 @@ export function TocPopoverContent(props) {
|
|
|
51
50
|
export function TocPopover(props) {
|
|
52
51
|
const ref = useRef(null);
|
|
53
52
|
const [open, setOpen] = useState(false);
|
|
54
|
-
const sidebar = useSidebar();
|
|
55
53
|
const { tocNav } = usePageStyles();
|
|
56
54
|
const { isTransparent } = useNav();
|
|
57
55
|
const onClick = useEffectEvent((e) => {
|
|
@@ -72,7 +70,7 @@ export function TocPopover(props) {
|
|
|
72
70
|
}, children: _jsx(TocPopoverContext.Provider, { value: useMemo(() => ({
|
|
73
71
|
open,
|
|
74
72
|
setOpen,
|
|
75
|
-
}), [setOpen, open]), children: _jsx(Collapsible, { open: open, onOpenChange: setOpen, asChild: true, children: _jsx("header", { ref: ref, id: "nd-tocnav", ...props, className: cn('border-b
|
|
73
|
+
}), [setOpen, open]), children: _jsx(Collapsible, { open: open, onOpenChange: setOpen, asChild: true, children: _jsx("header", { ref: ref, id: "nd-tocnav", ...props, className: cn('border-b backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg'), children: props.children }) }) }) }));
|
|
76
74
|
}
|
|
77
75
|
export function PageBody(props) {
|
|
78
76
|
const { page } = usePageStyles();
|
package/dist/page.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { TableOfContents } from 'fumadocs-core/server';
|
|
2
|
-
import { type
|
|
2
|
+
import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
|
|
3
3
|
import { type AnchorProviderProps } from 'fumadocs-core/toc';
|
|
4
4
|
import { type BreadcrumbProps, type FooterProps } from './page-client.js';
|
|
5
5
|
import { type TOCProps } from './components/layout/toc.js';
|
|
@@ -12,7 +12,7 @@ type TableOfContentOptions = Omit<TOCProps, 'items' | 'children'> & Pick<AnchorP
|
|
|
12
12
|
style?: 'normal' | 'clerk';
|
|
13
13
|
};
|
|
14
14
|
type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
|
|
15
|
-
interface EditOnGitHubOptions extends Omit<
|
|
15
|
+
interface EditOnGitHubOptions extends Omit<ComponentProps<'a'>, 'href' | 'children'> {
|
|
16
16
|
owner: string;
|
|
17
17
|
repo: string;
|
|
18
18
|
/**
|