fumadocs-ui 15.3.1 → 15.3.3
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/preset.css +23 -5
- package/css/shiki.css +14 -16
- package/dist/components/callout.d.ts +1 -1
- package/dist/components/callout.d.ts.map +1 -1
- package/dist/components/callout.js +6 -2
- package/dist/components/codeblock.d.ts +2 -3
- package/dist/components/codeblock.d.ts.map +1 -1
- package/dist/components/codeblock.js +8 -9
- package/dist/components/dialog/search-algolia.d.ts.map +1 -1
- package/dist/components/dialog/search-algolia.js +3 -3
- package/dist/components/dialog/search-default.d.ts.map +1 -1
- package/dist/components/dialog/search-default.js +2 -2
- package/dist/components/dialog/search-orama.d.ts.map +1 -1
- package/dist/components/dialog/search-orama.js +3 -3
- package/dist/components/dialog/search.d.ts +10 -9
- package/dist/components/dialog/search.d.ts.map +1 -1
- package/dist/components/dialog/search.js +30 -27
- package/dist/components/layout/sidebar.d.ts +1 -1
- package/dist/components/layout/sidebar.d.ts.map +1 -1
- package/dist/components/layout/sidebar.js +10 -9
- package/dist/components/layout/toc.d.ts +1 -4
- package/dist/components/layout/toc.d.ts.map +1 -1
- package/dist/components/layout/toc.js +3 -5
- package/dist/components/tabs.d.ts +18 -9
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +22 -18
- package/dist/components/ui/hide-if-empty.d.ts +10 -0
- package/dist/components/ui/hide-if-empty.d.ts.map +1 -0
- package/dist/components/ui/hide-if-empty.js +64 -0
- package/dist/components/ui/navigation-menu.js +1 -1
- package/dist/components/ui/scroll-area.d.ts.map +1 -1
- package/dist/components/ui/scroll-area.js +1 -1
- package/dist/components/ui/tabs.js +2 -2
- package/dist/layouts/docs-client.d.ts +3 -3
- package/dist/layouts/docs-client.d.ts.map +1 -1
- package/dist/layouts/docs-client.js +4 -3
- package/dist/layouts/docs.d.ts +1 -1
- package/dist/layouts/docs.d.ts.map +1 -1
- package/dist/layouts/docs.js +8 -10
- package/dist/layouts/home/navbar.js +5 -5
- package/dist/layouts/home.d.ts.map +1 -1
- package/dist/layouts/home.js +1 -1
- package/dist/layouts/notebook-client.d.ts +0 -3
- package/dist/layouts/notebook-client.d.ts.map +1 -1
- package/dist/layouts/notebook-client.js +1 -7
- package/dist/layouts/notebook.d.ts.map +1 -1
- package/dist/layouts/notebook.js +16 -7
- package/dist/mdx.d.ts +1 -1
- package/dist/page-client.js +1 -1
- package/dist/page.d.ts +7 -9
- package/dist/page.d.ts.map +1 -1
- package/dist/page.js +5 -5
- package/dist/style.css +87 -58
- package/package.json +10 -10
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import type { TabsContentProps, TabsProps as BaseProps } from '@radix-ui/react-tabs';
|
|
2
2
|
import { type ReactNode } from 'react';
|
|
3
|
-
import * as Primitive from './ui/tabs.js';
|
|
4
|
-
export { Primitive };
|
|
5
3
|
export interface TabsProps extends BaseProps {
|
|
6
|
-
label?: ReactNode;
|
|
7
4
|
/**
|
|
8
5
|
* Identifier for Sharing value of tabs
|
|
9
6
|
*/
|
|
@@ -13,21 +10,33 @@ export interface TabsProps extends BaseProps {
|
|
|
13
10
|
*/
|
|
14
11
|
persist?: boolean;
|
|
15
12
|
/**
|
|
13
|
+
* If true, updates the URL hash based on the tab's id
|
|
14
|
+
*/
|
|
15
|
+
updateAnchor?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Use simple mode instead of advanced usage as documented in https://radix-ui.com/primitives/docs/components/tabs.
|
|
18
|
+
*/
|
|
19
|
+
items?: string[];
|
|
20
|
+
/**
|
|
21
|
+
* Shortcut for `defaultValue` when `items` is provided.
|
|
22
|
+
*
|
|
16
23
|
* @defaultValue 0
|
|
17
24
|
*/
|
|
18
25
|
defaultIndex?: number;
|
|
19
|
-
items?: string[];
|
|
20
26
|
/**
|
|
21
|
-
*
|
|
27
|
+
* Additional label in tabs list when `items` is provided.
|
|
22
28
|
*/
|
|
23
|
-
|
|
29
|
+
label?: ReactNode;
|
|
24
30
|
}
|
|
25
|
-
export declare
|
|
31
|
+
export declare const TabsList: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
32
|
+
export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
33
|
+
export declare function Tabs({ groupId, items, persist, label, defaultIndex, updateAnchor, defaultValue, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
|
|
26
34
|
export type TabProps = Omit<TabsContentProps, 'value'> & {
|
|
27
35
|
/**
|
|
28
36
|
* Value of tab, detect from index if unspecified.
|
|
29
37
|
*/
|
|
30
|
-
value?:
|
|
38
|
+
value?: string;
|
|
31
39
|
};
|
|
32
|
-
export declare function Tab({ value,
|
|
40
|
+
export declare function Tab({ value, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
export declare function TabsContent({ value, className, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
|
|
33
42
|
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -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;AAC9B,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,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;AAuBf,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAcD,eAAO,MAAM,QAAQ,sMAAqB,CAAC;AAC3C,eAAO,MAAM,WAAW,+MAAwB,CAAC;AAEjD,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,OAAe,EACf,KAAK,EACL,YAAgB,EAChB,YAAoB,EACpB,YAAmE,EACnE,GAAG,KAAK,EACT,EAAE,SAAS,2CAmFX;AAED,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAgBhD;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAmB3E"}
|
package/dist/components/tabs.js
CHANGED
|
@@ -4,7 +4,6 @@ import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo,
|
|
|
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';
|
|
7
|
-
export { Primitive };
|
|
8
7
|
const listeners = new Map();
|
|
9
8
|
function addChangeListener(id, listener) {
|
|
10
9
|
const list = listeners.get(id) ?? [];
|
|
@@ -22,14 +21,16 @@ function useTabContext() {
|
|
|
22
21
|
throw new Error('You must wrap your component in <Tabs>');
|
|
23
22
|
return ctx;
|
|
24
23
|
}
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
export const TabsList = Primitive.TabsList;
|
|
25
|
+
export const TabsTrigger = Primitive.TabsTrigger;
|
|
26
|
+
export function Tabs({ groupId, items, persist = false, label, defaultIndex = 0, updateAnchor = false, defaultValue = items ? escapeValue(items[defaultIndex]) : undefined, ...props }) {
|
|
27
|
+
const [value, setValue] = useState(defaultValue);
|
|
28
28
|
const valueToIdMap = useMemo(() => new Map(), []);
|
|
29
29
|
const collection = useMemo(() => [], []);
|
|
30
30
|
const onUpdate = useEffectEvent((v) => {
|
|
31
|
-
if (
|
|
32
|
-
|
|
31
|
+
if (items && !items.some((item) => escapeValue(item) === v))
|
|
32
|
+
return;
|
|
33
|
+
setValue(v);
|
|
33
34
|
});
|
|
34
35
|
useLayoutEffect(() => {
|
|
35
36
|
if (!groupId)
|
|
@@ -74,23 +75,23 @@ export function Tabs({ groupId, items = [], persist = false, label, defaultIndex
|
|
|
74
75
|
else {
|
|
75
76
|
setValue(v);
|
|
76
77
|
}
|
|
77
|
-
}, ...props, className: cn('my-4', props.className), children: [_jsxs(
|
|
78
|
-
}
|
|
79
|
-
function toValue(v) {
|
|
80
|
-
return v.toLowerCase().replace(/\s/, '-');
|
|
78
|
+
}, ...props, className: cn('my-4', props.className), children: [items && (_jsxs(TabsList, { children: [label && (_jsx("span", { className: "text-sm font-medium my-auto me-auto", children: label })), items.map((item) => (_jsx(TabsTrigger, { value: escapeValue(item), children: item }, item)))] })), _jsx(TabsContext.Provider, { value: useMemo(() => ({ items, valueToIdMap, collection }), [valueToIdMap, collection, items]), children: props.children })] }));
|
|
81
79
|
}
|
|
82
|
-
export function Tab({ value,
|
|
83
|
-
const { items
|
|
84
|
-
const
|
|
80
|
+
export function Tab({ value, ...props }) {
|
|
81
|
+
const { items } = useTabContext();
|
|
82
|
+
const resolved = value ??
|
|
85
83
|
// eslint-disable-next-line react-hooks/rules-of-hooks -- `value` is not supposed to change
|
|
86
|
-
items
|
|
87
|
-
if (!
|
|
84
|
+
items?.at(useCollectionIndex());
|
|
85
|
+
if (!resolved)
|
|
88
86
|
throw new Error('Failed to resolve tab `value`, please pass a `value` prop to the Tab component.');
|
|
89
|
-
|
|
87
|
+
return (_jsx(TabsContent, { value: escapeValue(resolved), ...props, children: props.children }));
|
|
88
|
+
}
|
|
89
|
+
export function TabsContent({ value, className, ...props }) {
|
|
90
|
+
const { valueToIdMap } = useTabContext();
|
|
90
91
|
if (props.id) {
|
|
91
|
-
valueToIdMap.set(
|
|
92
|
+
valueToIdMap.set(value, props.id);
|
|
92
93
|
}
|
|
93
|
-
return (_jsx(Primitive.TabsContent, { value:
|
|
94
|
+
return (_jsx(Primitive.TabsContent, { value: value, className: cn('prose-no-margin [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none', className), ...props, children: props.children }));
|
|
94
95
|
}
|
|
95
96
|
/**
|
|
96
97
|
* Inspired by Headless UI.
|
|
@@ -112,3 +113,6 @@ function useCollectionIndex() {
|
|
|
112
113
|
collection.push(key);
|
|
113
114
|
return collection.indexOf(key);
|
|
114
115
|
}
|
|
116
|
+
function escapeValue(v) {
|
|
117
|
+
return v.toLowerCase().replace(/\s/, '-');
|
|
118
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The built-in CSS `:empty` selector cannot detect if the children is hidden, classes such as `md:hidden` causes it to fail.
|
|
3
|
+
* This component is an enhancement to `empty:hidden` to fix the issue described above.
|
|
4
|
+
*
|
|
5
|
+
* This can be expensive, please avoid this whenever possible.
|
|
6
|
+
*/
|
|
7
|
+
export declare function HideIfEmpty({ children }: {
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
//# sourceMappingURL=hide-if-empty.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hide-if-empty.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hide-if-empty.tsx"],"names":[],"mappings":"AAoCA;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAyCtE"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
4
|
+
import { useEffect, useId, useRef, useState } from 'react';
|
|
5
|
+
const init = `function isEmpty(node) {
|
|
6
|
+
for (let i = 0; i < node.childNodes.length; i++) {
|
|
7
|
+
const child = node.childNodes.item(i);
|
|
8
|
+
if (child.nodeType === Node.TEXT_NODE) {
|
|
9
|
+
return false
|
|
10
|
+
} else if (
|
|
11
|
+
child.nodeType === Node.ELEMENT_NODE &&
|
|
12
|
+
window.getComputedStyle(child).display !== 'none'
|
|
13
|
+
) {
|
|
14
|
+
return false
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
return true;
|
|
19
|
+
}`;
|
|
20
|
+
function isEmpty(node) {
|
|
21
|
+
for (let i = 0; i < node.childNodes.length; i++) {
|
|
22
|
+
const child = node.childNodes.item(i);
|
|
23
|
+
if (child.nodeType === Node.TEXT_NODE) {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
else if (child.nodeType === Node.ELEMENT_NODE &&
|
|
27
|
+
window.getComputedStyle(child).display !== 'none') {
|
|
28
|
+
return false;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
return true;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* The built-in CSS `:empty` selector cannot detect if the children is hidden, classes such as `md:hidden` causes it to fail.
|
|
35
|
+
* This component is an enhancement to `empty:hidden` to fix the issue described above.
|
|
36
|
+
*
|
|
37
|
+
* This can be expensive, please avoid this whenever possible.
|
|
38
|
+
*/
|
|
39
|
+
export function HideIfEmpty({ children }) {
|
|
40
|
+
const id = useId();
|
|
41
|
+
const ref = useRef(null);
|
|
42
|
+
const [empty, setEmpty] = useState();
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
const element = ref.current;
|
|
45
|
+
if (!element)
|
|
46
|
+
return;
|
|
47
|
+
const onUpdate = () => {
|
|
48
|
+
setEmpty(isEmpty(element));
|
|
49
|
+
};
|
|
50
|
+
const observer = new ResizeObserver(onUpdate);
|
|
51
|
+
observer.observe(element);
|
|
52
|
+
onUpdate();
|
|
53
|
+
return () => {
|
|
54
|
+
observer.disconnect();
|
|
55
|
+
};
|
|
56
|
+
}, []);
|
|
57
|
+
const inject = `
|
|
58
|
+
${init}
|
|
59
|
+
const element = document.querySelector('[data-hide-if-empty="${id}"]')
|
|
60
|
+
if (element) {
|
|
61
|
+
element.setAttribute('data-empty', String(isEmpty(element)))
|
|
62
|
+
}`;
|
|
63
|
+
return (_jsxs(_Fragment, { children: [empty === undefined && _jsx("script", { children: `{ ${inject} }` }), _jsx(Slot, { ref: ref, "data-hide-if-empty": id, "data-empty": empty, className: "data-[empty=true]:hidden", children: children })] }));
|
|
64
|
+
}
|
|
@@ -12,6 +12,6 @@ NavigationMenuTrigger.displayName = Primitive.Trigger.displayName;
|
|
|
12
12
|
const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(Primitive.Content, { ref: ref, className: cn('absolute inset-x-0 top-0 data-[motion=from-end]:animate-fd-enterFromRight data-[motion=from-start]:animate-fd-enterFromLeft data-[motion=to-end]:animate-fd-exitToRight data-[motion=to-start]:animate-fd-exitToLeft', className), ...props })));
|
|
13
13
|
NavigationMenuContent.displayName = Primitive.Content.displayName;
|
|
14
14
|
const NavigationMenuLink = Primitive.Link;
|
|
15
|
-
const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: "flex w-full justify-center", children: _jsx(Primitive.Viewport, { ...props, className: cn('relative h-(--radix-navigation-menu-viewport-height) w-full origin-[top_center] overflow-
|
|
15
|
+
const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: "flex w-full justify-center", children: _jsx(Primitive.Viewport, { ...props, className: cn('relative h-(--radix-navigation-menu-viewport-height) max-h-[80svh] w-full origin-[top_center] overflow-auto [scrollbar-width:none] text-fd-popover-foreground transition-[width,height] duration-300 data-[state=closed]:animate-fd-nav-menu-out data-[state=open]:animate-fd-nav-menu-in', className) }) })));
|
|
16
16
|
NavigationMenuViewport.displayName = Primitive.Viewport.displayName;
|
|
17
17
|
export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuViewport, };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,UAAU,+
|
|
1
|
+
{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,UAAU,+JAcd,CAAC;AAIH,QAAA,MAAM,cAAc,uKAWlB,CAAC;AAIH,QAAA,MAAM,SAAS,wKAiBb,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { cn } from '../../utils/cn.js';
|
|
5
|
-
const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn('overflow-hidden', className), ...props, children: [children, _jsx(ScrollAreaPrimitive.Corner, {}), _jsx(ScrollBar, { orientation: "vertical" })] })));
|
|
5
|
+
const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, type: "scroll", className: cn('overflow-hidden', className), ...props, children: [children, _jsx(ScrollAreaPrimitive.Corner, {}), _jsx(ScrollBar, { orientation: "vertical" })] })));
|
|
6
6
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
7
7
|
const ScrollViewport = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(ScrollAreaPrimitive.Viewport, { ref: ref, className: cn('size-full rounded-[inherit]', className), ...props, children: children })));
|
|
8
8
|
ScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
|
|
@@ -7,9 +7,9 @@ const Tabs = React.forwardRef((props, ref) => {
|
|
|
7
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 gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4', props.className) })));
|
|
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 not-prose', props.className) })));
|
|
11
11
|
TabsList.displayName = 'TabsList';
|
|
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) })));
|
|
12
|
+
const TabsTrigger = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, ...props, className: cn('inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 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
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';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
export declare function Navbar(props:
|
|
3
|
-
export declare function NavbarSidebarTrigger(props:
|
|
1
|
+
import { type ComponentProps } from 'react';
|
|
2
|
+
export declare function Navbar(props: ComponentProps<'header'>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare function NavbarSidebarTrigger({ className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export declare function CollapsibleControl(): import("react/jsx-runtime").JSX.Element | undefined;
|
|
5
5
|
//# sourceMappingURL=docs-client.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"docs-client.d.ts","sourceRoot":"","sources":["../../src/layouts/docs-client.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"docs-client.d.ts","sourceRoot":"","sources":["../../src/layouts/docs-client.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAiBrD;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAmB1B;AAED,wBAAgB,kBAAkB,wDAyBjC"}
|
|
@@ -12,12 +12,13 @@ export function Navbar(props) {
|
|
|
12
12
|
const { isTransparent } = useNav();
|
|
13
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 }));
|
|
14
14
|
}
|
|
15
|
-
export function NavbarSidebarTrigger(props) {
|
|
15
|
+
export function NavbarSidebarTrigger({ className, ...props }) {
|
|
16
16
|
const { setOpen } = useSidebar();
|
|
17
|
-
return (_jsx("button", { ...props, className: cn(buttonVariants({
|
|
17
|
+
return (_jsx("button", { ...props, "aria-label": "Open Sidebar", className: cn(buttonVariants({
|
|
18
18
|
color: 'ghost',
|
|
19
19
|
size: 'icon',
|
|
20
|
-
|
|
20
|
+
className,
|
|
21
|
+
})), onClick: () => setOpen((prev) => !prev), children: _jsx(Menu, {}) }));
|
|
21
22
|
}
|
|
22
23
|
export function CollapsibleControl() {
|
|
23
24
|
const { collapsed } = useSidebar();
|
package/dist/layouts/docs.d.ts
CHANGED
|
@@ -24,7 +24,7 @@ export declare function DocsLayoutSidebarFooter({ i18n, themeSwitch, links, }: {
|
|
|
24
24
|
i18n?: DocsLayoutProps['i18n'];
|
|
25
25
|
links?: IconItemType[];
|
|
26
26
|
themeSwitch?: DocsLayoutProps['themeSwitch'];
|
|
27
|
-
}): import("react/jsx-runtime").JSX.Element
|
|
27
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
28
28
|
export { CollapsibleControl, Navbar, NavbarSidebarTrigger, type LinkItemType };
|
|
29
29
|
export { getSidebarTabsFromOptions } from './docs/shared.js';
|
|
30
30
|
//# sourceMappingURL=docs.d.ts.map
|
|
@@ -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;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;
|
|
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;AAa/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,2CAgDA;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,2CAgCA;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
|
@@ -16,6 +16,7 @@ import { getSidebarTabsFromOptions, layoutVariables, SidebarLinkItem, } from '..
|
|
|
16
16
|
import { NavProvider, StylesProvider, } from '../contexts/layout.js';
|
|
17
17
|
import Link from 'fumadocs-core/link';
|
|
18
18
|
import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
|
|
19
|
+
import { HideIfEmpty } from '../components/ui/hide-if-empty.js';
|
|
19
20
|
export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar = {}, searchToggle, disableThemeSwitch = false, themeSwitch = { enabled: !disableThemeSwitch }, i18n = false, children, ...props }) {
|
|
20
21
|
const tabs = useMemo(() => getSidebarTabsFromOptions(sidebar.tabs, props.tree) ?? [], [sidebar.tabs, props.tree]);
|
|
21
22
|
const links = getLinks(props.links ?? [], props.githubUrl);
|
|
@@ -32,18 +33,15 @@ export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar = {}
|
|
|
32
33
|
}, 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
34
|
}
|
|
34
35
|
export function DocsLayoutSidebar({ collapsible = true, components, nav, links = [], footer, banner, ...props }) {
|
|
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
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
return (_jsxs(_Fragment, { children: [collapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...props, collapsible: collapsible, className: cn('md:ps-(--fd-layout-offset)', props.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex py-1.5 max-md:hidden", children: [nav, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
37
|
+
color: 'ghost',
|
|
38
|
+
size: 'icon-sm',
|
|
39
|
+
}), 'ms-auto mb-auto -my-1.5 text-fd-muted-foreground max-md:hidden'), children: _jsx(SidebarIcon, {}) }))] }), banner] }) }), _jsxs(SidebarViewport, { children: [links
|
|
40
|
+
.filter((v) => v.type !== 'icon')
|
|
41
|
+
.map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: components })] }), _jsx(HideIfEmpty, { children: _jsx(SidebarFooter, { children: footer }) })] })] }));
|
|
41
42
|
}
|
|
42
43
|
export function DocsLayoutSidebarFooter({ i18n, themeSwitch, links = [], }) {
|
|
43
|
-
|
|
44
|
-
if (links.length === 0 && !i18n && themeSwitch?.enabled === false)
|
|
45
|
-
return null;
|
|
46
|
-
return (_jsxs("div", { className: "flex flex-row items-center", children: [links.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:[&_svg]:size-4.5'), "aria-label": item.label, children: item.icon }, i))), _jsx("div", { role: "separator", className: "flex-1" }), i18n ? (_jsxs(LanguageToggle, { className: "me-1.5", children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, slot(themeSwitch, _jsx(ThemeToggle, { className: "p-0", mode: themeSwitch?.mode }))] }));
|
|
44
|
+
return (_jsx(HideIfEmpty, { children: _jsxs("div", { className: "flex items-center justify-end", children: [_jsx("div", { className: "flex items-center flex-1 empty:hidden", children: links.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:[&_svg]:size-4.5'), "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, slot(themeSwitch, _jsx(ThemeToggle, { className: "p-0", mode: themeSwitch?.mode }))] }) }));
|
|
47
45
|
}
|
|
48
46
|
export { CollapsibleControl, Navbar, NavbarSidebarTrigger };
|
|
49
47
|
export { getSidebarTabsFromOptions } from './docs/shared.js';
|
|
@@ -12,15 +12,15 @@ 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
|
|
16
|
-
'
|
|
17
|
-
|
|
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 box-content backdrop-blur-lg max-w-fd-container -translate-x-1/2 border-b transition-colors lg:mt-2 lg:[--fd-padding:1rem] lg:rounded-2xl lg:border', value.length > 0 ? 'shadow-lg' : 'shadow-sm', (!isTransparent || value.length > 0) && 'bg-fd-background/80', props.className), style: {
|
|
16
|
+
width: 'calc(100% - var(--fd-padding,0px) - var(--removed-body-scroll-bar-size,0px))',
|
|
17
|
+
left: 'calc(50% - var(--removed-body-scroll-bar-size,0px) / 2)',
|
|
18
18
|
...props.style,
|
|
19
|
-
}, children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full
|
|
19
|
+
}, children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full items-center px-4 lg:h-12", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }));
|
|
20
20
|
}
|
|
21
21
|
export const NavbarMenu = NavigationMenuItem;
|
|
22
22
|
export function NavbarMenuContent(props) {
|
|
23
|
-
return (_jsx(NavigationMenuContent, { ...props, className: cn('grid grid-cols-1 gap-
|
|
23
|
+
return (_jsx(NavigationMenuContent, { ...props, className: cn('grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3', props.className), children: props.children }));
|
|
24
24
|
}
|
|
25
25
|
export function NavbarMenuTrigger(props) {
|
|
26
26
|
return (_jsx(NavigationMenuTrigger, { ...props, className: cn(navItemVariants(), 'rounded-md', props.className), children: props.children }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../src/layouts/home.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,UAAU,EAAe,MAAM,kBAAkB,CAAC;AAEhE,OAAO,
|
|
1
|
+
{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../src/layouts/home.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,UAAU,EAAe,MAAM,kBAAkB,CAAC;AAEhE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AA6B1D,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,GAAG,CAAC,EAAE,OAAO,CACX,UAAU,GAAG;QACX;;WAEG;QACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CACF,CAAC;CACH;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,2CAmCrD;AAED,wBAAgB,MAAM,CAAC,EACrB,GAAQ,EACR,IAAY,EACZ,KAAK,EACL,SAAS,EACT,WAAW,EACX,YAAY,GACb,EAAE,eAAe,2CA8FjB"}
|
package/dist/layouts/home.js
CHANGED
|
@@ -33,7 +33,7 @@ function NavbarLinkItem({ item, ...props }) {
|
|
|
33
33
|
if (child.type === 'custom')
|
|
34
34
|
return _jsx(Fragment, { children: child.children }, j);
|
|
35
35
|
const { banner = child.icon ? (_jsx("div", { className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4", children: child.icon })) : null, ...rest } = child.menu ?? {};
|
|
36
|
-
return (_jsx(NavbarMenuLink, { href: child.url, ...rest, children: rest.children ?? (_jsxs(_Fragment, { children: [banner, _jsx("p", { className: "
|
|
36
|
+
return (_jsx(NavbarMenuLink, { href: child.url, external: child.external, ...rest, children: rest.children ?? (_jsxs(_Fragment, { children: [banner, _jsx("p", { className: "text-[15px] font-medium", children: child.text }), _jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden", children: child.description })] })) }, j));
|
|
37
37
|
});
|
|
38
38
|
return (_jsxs(NavbarMenu, { children: [_jsx(NavbarMenuTrigger, { ...props, children: item.url ? _jsx(Link, { href: item.url, children: item.text }) : item.text }), _jsx(NavbarMenuContent, { children: children })] }));
|
|
39
39
|
}
|
|
@@ -6,7 +6,4 @@ export declare function Navbar({ mode, ...props }: HTMLAttributes<HTMLElement> &
|
|
|
6
6
|
export declare function NavbarSidebarTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export declare function LayoutTabs(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export declare function LayoutTab(item: Option): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export declare function SidebarLayoutTab({ item, ...props }: {
|
|
10
|
-
item: Option;
|
|
11
|
-
} & HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
|
|
12
9
|
//# 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,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
|
|
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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx
|
|
2
|
+
import { jsx as _jsx } 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';
|
|
@@ -38,9 +38,3 @@ export function LayoutTab(item) {
|
|
|
38
38
|
closeOnRedirect.current = false;
|
|
39
39
|
}, children: item.title }));
|
|
40
40
|
}
|
|
41
|
-
export function SidebarLayoutTab({ item, ...props }) {
|
|
42
|
-
const selected = useIsSelected(item);
|
|
43
|
-
return (_jsxs(Link, { ...props, className: cn('flex flex-row items-center px-2 -mx-2 py-1.5 gap-2.5 text-fd-muted-foreground [&_svg]:!size-4.5', selected
|
|
44
|
-
? 'text-fd-primary font-medium'
|
|
45
|
-
: 'hover:text-fd-accent-foreground', props.className), "data-active": selected, href: item.url, children: [item.icon, item.title] }));
|
|
46
|
-
}
|
|
@@ -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;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,
|
|
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,EACrB,MAAM,mBAAmB,CAAC;AAc3B,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,2CAmKhD;AAoLD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}
|
package/dist/layouts/notebook.js
CHANGED
|
@@ -11,11 +11,12 @@ 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, layoutVariables, SidebarLinkItem, } from '../layouts/docs/shared.js';
|
|
14
|
-
import { LayoutTab, LayoutTabs, Navbar, NavbarSidebarTrigger,
|
|
14
|
+
import { LayoutTab, LayoutTabs, Navbar, NavbarSidebarTrigger, } from './notebook-client.js';
|
|
15
15
|
import { NavProvider, StylesProvider, } from '../contexts/layout.js';
|
|
16
16
|
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
|
+
import { HideIfEmpty } from '../components/ui/hide-if-empty.js';
|
|
19
20
|
export function DocsLayout(props) {
|
|
20
21
|
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
22
|
const navMode = nav.mode ?? 'auto';
|
|
@@ -29,17 +30,25 @@ export function DocsLayout(props) {
|
|
|
29
30
|
toc: cn('max-xl:hidden'),
|
|
30
31
|
page: cn('mt-(--fd-nav-height)'),
|
|
31
32
|
};
|
|
33
|
+
const sidebarHeader = navMode === 'auto' && (_jsxs("div", { className: "flex 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({
|
|
34
|
+
color: 'ghost',
|
|
35
|
+
size: 'icon-sm',
|
|
36
|
+
className: 'mb-auto text-fd-muted-foreground',
|
|
37
|
+
})), children: _jsx(SidebarIcon, {}) }))] }));
|
|
32
38
|
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: {
|
|
33
39
|
...layoutVariables,
|
|
34
40
|
...props.containerProps?.style,
|
|
35
41
|
}, children: [_jsxs(Sidebar, { ...sidebar, className: cn('md:ps-(--fd-layout-offset)', navMode === 'top'
|
|
36
42
|
? 'md:bg-transparent'
|
|
37
|
-
: 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsxs(SidebarHeader, { children: [
|
|
38
|
-
|
|
43
|
+
: 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [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
|
|
44
|
+
.filter((item) => item.type !== 'icon')
|
|
45
|
+
.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
|
|
46
|
+
.filter((item) => item.type === 'icon')
|
|
47
|
+
.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({
|
|
39
48
|
size: 'icon-sm',
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
49
|
+
color: 'ghost',
|
|
50
|
+
className: 'text-fd-muted-foreground',
|
|
51
|
+
})), "aria-label": item.label, children: item.icon }, i))) }), i18n ? (_jsx(LanguageToggle, { className: "me-auto md:hidden", children: _jsx(Languages, { className: "size-4.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
52
|
}
|
|
44
53
|
function DocsNavbar({ links, tabs, ...props }) {
|
|
45
54
|
const navMode = props.nav?.mode ?? 'auto';
|
|
@@ -55,7 +64,7 @@ function DocsNavbar({ links, tabs, ...props }) {
|
|
|
55
64
|
.map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }), 'text-fd-muted-foreground max-lg:hidden'), "aria-label": item.label, children: item.icon }, i))), props.i18n ? (_jsx(LanguageToggle, { className: "max-md:hidden", children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })) : null, slot(props.themeSwitch, _jsx(ThemeToggle, { className: "ms-2 max-md:hidden", mode: props.themeSwitch?.mode ?? 'light-dark-system' })), sidebarCollapsible && navMode === 'top' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
|
|
56
65
|
color: 'secondary',
|
|
57
66
|
size: 'icon-sm',
|
|
58
|
-
}), '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
|
|
67
|
+
}), '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", children: tabs.map((tab) => (_jsx(LayoutTab, { ...tab }, tab.url))) })) : null] }));
|
|
59
68
|
}
|
|
60
69
|
function NavbarLinkItem({ item, ...props }) {
|
|
61
70
|
if (item.type === 'menu') {
|
package/dist/mdx.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ declare const defaultMdxComponents: {
|
|
|
19
19
|
table: typeof Table;
|
|
20
20
|
Callout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
|
|
21
21
|
title?: import("react").ReactNode;
|
|
22
|
-
type?: "info" | "warn" | "error";
|
|
22
|
+
type?: "info" | "warn" | "error" | "success" | "warning";
|
|
23
23
|
icon?: import("react").ReactNode;
|
|
24
24
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
25
25
|
};
|
package/dist/page-client.js
CHANGED
|
@@ -21,7 +21,7 @@ export function TocPopoverTrigger({ items, ...props }) {
|
|
|
21
21
|
const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
|
|
22
22
|
const path = useTreePath().at(-1);
|
|
23
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') })] }));
|
|
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 *:my-auto *: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') })] }));
|
|
25
25
|
}
|
|
26
26
|
function clamp(input, min, max) {
|
|
27
27
|
if (input < min)
|
package/dist/page.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { TableOfContents } from 'fumadocs-core/server';
|
|
2
|
-
import { type ComponentProps, type
|
|
2
|
+
import { type ComponentProps, 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';
|
|
@@ -61,8 +61,8 @@ export interface DocsPageProps {
|
|
|
61
61
|
footer?: Partial<FooterOptions>;
|
|
62
62
|
editOnGithub?: EditOnGitHubOptions;
|
|
63
63
|
lastUpdate?: Date | string | number;
|
|
64
|
-
container?:
|
|
65
|
-
article?:
|
|
64
|
+
container?: ComponentProps<'div'>;
|
|
65
|
+
article?: ComponentProps<'article'>;
|
|
66
66
|
children: ReactNode;
|
|
67
67
|
}
|
|
68
68
|
export declare function DocsPage({ toc, full, editOnGithub, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopoverReplace, ...tocPopoverOptions }, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions }, ...props }: DocsPageProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -70,14 +70,12 @@ export declare function EditOnGitHub(props: ComponentProps<'a'>): import("react/
|
|
|
70
70
|
/**
|
|
71
71
|
* Add typography styles
|
|
72
72
|
*/
|
|
73
|
-
export declare const DocsBody: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
74
|
-
export declare const DocsDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
75
|
-
export declare const DocsTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
73
|
+
export declare const DocsBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
74
|
+
export declare const DocsDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
75
|
+
export declare const DocsTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
76
76
|
/**
|
|
77
77
|
* For separate MDX page
|
|
78
78
|
*/
|
|
79
|
-
export declare function withArticle(
|
|
80
|
-
children: ReactNode;
|
|
81
|
-
}): ReactNode;
|
|
79
|
+
export declare function withArticle(props: ComponentProps<'main'>): ReactNode;
|
|
82
80
|
export {};
|
|
83
81
|
//# sourceMappingURL=page.d.ts.map
|
package/dist/page.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,
|
|
1
|
+
{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,KAAK,cAAc,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7E,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,WAAW,EAOjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAGL,KAAK,QAAQ,EAEd,MAAM,yBAAyB,CAAC;AAOjC,KAAK,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,UAAU,CAAC,GAC/D,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,GAAG;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEJ,KAAK,4BAA4B,GAAG,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;AAE1E,UAAU,mBACR,SAAQ,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,iBAAkB,SAAQ,eAAe;IACjD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,aAAc,SAAQ,WAAW;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,eAAe,CAAC;IAEtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,cAAc,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAE9D;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhC,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,UAAU,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAEpC,SAAS,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EACvB,GAAQ,EACR,IAAY,EACZ,YAAY,EACZ,qBAAqB,EAAE,EACrB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,iBAAiB,EAC5B,GAAG,iBAAiB,EAChB,EACN,cAAc,EAAE,EACd,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,UAAU,EACrB,GAAG,UAAU,EACT,EACN,GAAG,KAAK,EACT,EAAE,aAAa,2CA8Ff;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAuBtD;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,2MAMpB,CAAC;AAIF,eAAO,MAAM,eAAe,6NAgB1B,CAAC;AAIH,eAAO,MAAM,SAAS,uNAYrB,CAAC;AAIF;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAMpE"}
|