@fumadocs/base-ui 16.12.0 → 16.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
4
|
variant?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
|
|
5
5
|
color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
|
|
6
|
-
size?: "
|
|
6
|
+
size?: "sm" | "icon" | "icon-sm" | "icon-xs" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
8
|
type ButtonProps = VariantProps<typeof buttonVariants>;
|
|
9
9
|
//#endregion
|
|
@@ -50,44 +50,44 @@ function DocsLayout(props) {
|
|
|
50
50
|
slots,
|
|
51
51
|
...linkItems
|
|
52
52
|
},
|
|
53
|
-
children: /* @__PURE__ */
|
|
53
|
+
children: /* @__PURE__ */ jsx(TreeContextProvider, {
|
|
54
54
|
tree,
|
|
55
|
-
children:
|
|
55
|
+
children: /* @__PURE__ */ jsxs(slots.sidebar.provider, {
|
|
56
56
|
defaultOpenLevel,
|
|
57
57
|
prefetch,
|
|
58
|
-
children: /* @__PURE__ */ jsxs(slots.container, {
|
|
58
|
+
children: [/* @__PURE__ */ jsxs(slots.container, {
|
|
59
59
|
...containerProps,
|
|
60
60
|
children: [sidebarEnabled && /* @__PURE__ */ jsx(slots.sidebar.root, { ...sidebarProps }), children]
|
|
61
|
-
})
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
tabs
|
|
67
|
-
}),
|
|
68
|
-
tool: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
69
|
-
slots.languageSelect && /* @__PURE__ */ jsx(slots.languageSelect.root, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5" }) }),
|
|
70
|
-
slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
|
|
71
|
-
hideIfDisabled: true,
|
|
72
|
-
className: "rounded-lg"
|
|
61
|
+
}), renderNavigationPanel({
|
|
62
|
+
head: /* @__PURE__ */ jsxs(Fragment, { children: [slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: "inline-flex items-center gap-2.5 text-sm font-semibold" }), nav.children] }),
|
|
63
|
+
tabDropdown: slots.tabDropdown && tabs.length > 0 && /* @__PURE__ */ jsx(slots.tabDropdown, {
|
|
64
|
+
className: "flex-1",
|
|
65
|
+
tabs
|
|
73
66
|
}),
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
})
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
67
|
+
tool: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
68
|
+
slots.languageSelect && /* @__PURE__ */ jsx(slots.languageSelect.root, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5" }) }),
|
|
69
|
+
slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
|
|
70
|
+
hideIfDisabled: true,
|
|
71
|
+
className: "rounded-lg"
|
|
72
|
+
}),
|
|
73
|
+
slots.sidebar && /* @__PURE__ */ jsx(slots.sidebar.trigger, { className: cn(buttonVariants({
|
|
74
|
+
variant: "ghost",
|
|
75
|
+
size: "icon-sm",
|
|
76
|
+
className: "overflow-hidden"
|
|
77
|
+
})) }),
|
|
78
|
+
slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: "p-1 h-full ms-1 rounded-xl bg-fd-muted *:rounded-lg" })
|
|
79
|
+
] }),
|
|
80
|
+
link: linkItems.menuItems.filter((item) => item.type === "icon").map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
|
|
81
|
+
item,
|
|
82
|
+
className: cn(buttonVariants({
|
|
83
|
+
size: "icon-sm",
|
|
84
|
+
color: "ghost"
|
|
85
|
+
})),
|
|
86
|
+
"aria-label": item.label,
|
|
87
|
+
children: item.icon
|
|
88
|
+
}, i))
|
|
89
|
+
})]
|
|
90
|
+
})
|
|
91
91
|
})
|
|
92
92
|
});
|
|
93
93
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../../../utils/cn.js";
|
|
3
3
|
import { mergeRefs } from "../../../utils/merge-refs.js";
|
|
4
|
-
import { SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider as SidebarProvider$1, SidebarSeparator as SidebarSeparator$1,
|
|
4
|
+
import { SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider as SidebarProvider$1, SidebarSeparator as SidebarSeparator$1, base_exports, useFolder, useFolderDepth } from "../../../components/sidebar/base.js";
|
|
5
5
|
import { createPageTreeRenderer } from "../../../components/sidebar/page-tree.js";
|
|
6
6
|
import { createLinkItemRenderer } from "../../../components/sidebar/link-item.js";
|
|
7
7
|
import { useFluxLayout } from "../index.js";
|
|
@@ -40,13 +40,13 @@ function Sidebar({ footer, banner, components, ...rest }) {
|
|
|
40
40
|
className: "flex flex-col gap-3 p-4 pb-2 empty:hidden",
|
|
41
41
|
children: banner
|
|
42
42
|
}),
|
|
43
|
-
/* @__PURE__ */
|
|
44
|
-
className: "flex flex-col",
|
|
43
|
+
/* @__PURE__ */ jsxs("div", {
|
|
44
|
+
className: "flex flex-col p-4",
|
|
45
45
|
children: [menuItems.filter((v) => v.type !== "icon").map((item, i, list) => /* @__PURE__ */ jsx(SidebarLinkItem, {
|
|
46
46
|
item,
|
|
47
47
|
className: cn(i === list.length - 1 && "mb-4")
|
|
48
48
|
}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })]
|
|
49
|
-
})
|
|
49
|
+
}),
|
|
50
50
|
footer
|
|
51
51
|
]
|
|
52
52
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentProps } from "react";
|
|
2
2
|
//#region src/layouts/home/slots/header.d.ts
|
|
3
3
|
declare const navItemVariants: (props?: ({
|
|
4
|
-
variant?: "
|
|
4
|
+
variant?: "button" | "main" | "icon" | null | undefined;
|
|
5
5
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
6
|
declare function Header(props: ComponentProps<'header'>): import("react").JSX.Element;
|
|
7
7
|
//#endregion
|
package/dist/provider/base.d.ts
CHANGED
|
@@ -18,6 +18,14 @@ interface ThemeOptions extends ThemeProviderProps {
|
|
|
18
18
|
* @defaultValue true
|
|
19
19
|
*/
|
|
20
20
|
enabled?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Hotkey for toggling between light/dark mode, pass `false` to disable it.
|
|
23
|
+
*
|
|
24
|
+
* It is ignored while typing in an editable element (e.g. `<input />`), or when a dialog is opened.
|
|
25
|
+
*
|
|
26
|
+
* @defaultValue `d`
|
|
27
|
+
*/
|
|
28
|
+
hotKey?: string | ((e: KeyboardEvent) => boolean) | false;
|
|
21
29
|
}
|
|
22
30
|
interface RootProviderProps {
|
|
23
31
|
/**
|
package/dist/provider/base.js
CHANGED
|
@@ -1,24 +1,65 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { I18nProvider } from "../contexts/i18n.js";
|
|
3
3
|
import { SearchProvider } from "../contexts/search.js";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
import {
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { useEffect, useEffectEvent } from "react";
|
|
6
|
+
import { ThemeProvider, useTheme, useTheme as useTheme$1 } from "next-themes";
|
|
7
|
+
import { flushSync } from "react-dom";
|
|
6
8
|
import { DirectionProvider } from "@base-ui/react/direction-provider";
|
|
7
9
|
//#region src/provider/base.tsx
|
|
10
|
+
/**
|
|
11
|
+
* Whether the event should be ignored because the user is interacting with an editable element,
|
|
12
|
+
* or an opened dialog (e.g. the search dialog).
|
|
13
|
+
*/
|
|
14
|
+
function isTypingTarget(target) {
|
|
15
|
+
if (!(target instanceof HTMLElement)) return false;
|
|
16
|
+
if (target.isContentEditable) return true;
|
|
17
|
+
if ([
|
|
18
|
+
"INPUT",
|
|
19
|
+
"TEXTAREA",
|
|
20
|
+
"SELECT"
|
|
21
|
+
].includes(target.tagName)) return true;
|
|
22
|
+
return target.closest("[role=\"dialog\"]") !== null;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Toggle between light/dark mode with a hotkey, must be placed under `next-themes` provider.
|
|
26
|
+
*/
|
|
27
|
+
function ThemeHotKey({ hotKey }) {
|
|
28
|
+
const { setTheme, resolvedTheme } = useTheme$1();
|
|
29
|
+
const onKeyDown = useEffectEvent((e) => {
|
|
30
|
+
if (e.defaultPrevented || e.isComposing) return;
|
|
31
|
+
if (isTypingTarget(e.target)) return;
|
|
32
|
+
if (!(typeof hotKey === "string" ? !e.metaKey && !e.ctrlKey && !e.altKey && e.key.toLowerCase() === hotKey.toLowerCase() : hotKey(e))) return;
|
|
33
|
+
e.preventDefault();
|
|
34
|
+
const next = resolvedTheme === "dark" ? "light" : "dark";
|
|
35
|
+
if (document?.startViewTransition) document.startViewTransition(() => flushSync(() => setTheme(next)));
|
|
36
|
+
else setTheme(next);
|
|
37
|
+
});
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
window.addEventListener("keydown", onKeyDown);
|
|
40
|
+
return () => {
|
|
41
|
+
window.removeEventListener("keydown", onKeyDown);
|
|
42
|
+
};
|
|
43
|
+
}, []);
|
|
44
|
+
return null;
|
|
45
|
+
}
|
|
8
46
|
function RootProvider({ children, dir = "ltr", theme = {}, search, i18n }) {
|
|
9
47
|
let body = children;
|
|
10
48
|
if (search?.enabled !== false) body = /* @__PURE__ */ jsx(SearchProvider, {
|
|
11
49
|
...search,
|
|
12
50
|
children: body
|
|
13
51
|
});
|
|
14
|
-
if (theme?.enabled !== false)
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
52
|
+
if (theme?.enabled !== false) {
|
|
53
|
+
const { enabled: _, hotKey = "d", ...themeProps } = theme;
|
|
54
|
+
body = /* @__PURE__ */ jsxs(ThemeProvider, {
|
|
55
|
+
attribute: "class",
|
|
56
|
+
defaultTheme: "system",
|
|
57
|
+
enableSystem: true,
|
|
58
|
+
disableTransitionOnChange: true,
|
|
59
|
+
...themeProps,
|
|
60
|
+
children: [hotKey !== false && /* @__PURE__ */ jsx(ThemeHotKey, { hotKey }), body]
|
|
61
|
+
});
|
|
62
|
+
}
|
|
22
63
|
if (i18n) body = /* @__PURE__ */ jsx(I18nProvider, {
|
|
23
64
|
...i18n,
|
|
24
65
|
children: body
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fumadocs/base-ui",
|
|
3
|
-
"version": "16.
|
|
3
|
+
"version": "16.13.0",
|
|
4
4
|
"description": "The Base UI version of Fumadocs UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Docs",
|
|
@@ -154,9 +154,9 @@
|
|
|
154
154
|
"tailwindcss": "^4.3.3",
|
|
155
155
|
"tsdown": "0.22.13",
|
|
156
156
|
"unified": "^11.0.5",
|
|
157
|
-
"fumadocs
|
|
158
|
-
"
|
|
159
|
-
"
|
|
157
|
+
"@fumadocs/cli": "1.4.1",
|
|
158
|
+
"fumadocs-core": "16.13.0",
|
|
159
|
+
"tsconfig": "0.0.0"
|
|
160
160
|
},
|
|
161
161
|
"peerDependencies": {
|
|
162
162
|
"@types/mdx": "*",
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
"react": "^19.2.0",
|
|
166
166
|
"react-dom": "^19.2.0",
|
|
167
167
|
"takumi-js": "*",
|
|
168
|
-
"fumadocs-core": "16.
|
|
168
|
+
"fumadocs-core": "16.13.0"
|
|
169
169
|
},
|
|
170
170
|
"peerDependenciesMeta": {
|
|
171
171
|
"next": {
|