fumadocs-ui 15.1.1 → 15.1.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.
Files changed (40) hide show
  1. package/dist/components/card.js +1 -1
  2. package/dist/components/layout/root-toggle.js +1 -1
  3. package/dist/components/layout/search-toggle.d.ts +2 -1
  4. package/dist/components/layout/search-toggle.d.ts.map +1 -1
  5. package/dist/components/layout/search-toggle.js +3 -3
  6. package/dist/components/layout/sidebar.d.ts.map +1 -0
  7. package/dist/{layouts/docs → components/layout}/sidebar.js +27 -25
  8. package/dist/components/ui/button.d.ts +2 -0
  9. package/dist/components/ui/button.d.ts.map +1 -1
  10. package/dist/contexts/layout.d.ts +16 -0
  11. package/dist/contexts/layout.d.ts.map +1 -1
  12. package/dist/contexts/layout.js +23 -1
  13. package/dist/layouts/docs/shared.d.ts +1 -1
  14. package/dist/layouts/docs/shared.d.ts.map +1 -1
  15. package/dist/layouts/docs/shared.js +7 -7
  16. package/dist/layouts/docs.client.d.ts +1 -0
  17. package/dist/layouts/docs.client.d.ts.map +1 -1
  18. package/dist/layouts/docs.client.js +14 -3
  19. package/dist/layouts/docs.d.ts +5 -1
  20. package/dist/layouts/docs.d.ts.map +1 -1
  21. package/dist/layouts/docs.js +8 -11
  22. package/dist/layouts/home/navbar.js +1 -1
  23. package/dist/layouts/home.js +2 -2
  24. package/dist/layouts/notebook.client.d.ts +3 -1
  25. package/dist/layouts/notebook.client.d.ts.map +1 -1
  26. package/dist/layouts/notebook.client.js +5 -8
  27. package/dist/layouts/notebook.d.ts +2 -0
  28. package/dist/layouts/notebook.d.ts.map +1 -1
  29. package/dist/layouts/notebook.js +8 -14
  30. package/dist/layouts/shared.d.ts +9 -4
  31. package/dist/layouts/shared.d.ts.map +1 -1
  32. package/dist/page.client.d.ts.map +1 -1
  33. package/dist/page.client.js +1 -2
  34. package/dist/style.css +51 -39
  35. package/package.json +7 -7
  36. package/dist/components/layout/nav.d.ts +0 -28
  37. package/dist/components/layout/nav.d.ts.map +0 -1
  38. package/dist/components/layout/nav.js +0 -32
  39. package/dist/layouts/docs/sidebar.d.ts.map +0 -1
  40. /package/dist/{layouts/docs → components/layout}/sidebar.d.ts +0 -0
@@ -6,5 +6,5 @@ export function Cards(props) {
6
6
  }
7
7
  export function Card({ icon, title, description, ...props }) {
8
8
  const E = props.href ? Link : 'div';
9
- return (_jsxs(E, { ...props, "data-card": true, className: cn('block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full', props.href && 'hover:bg-fd-accent/80', props.className), children: [icon ? (_jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon })) : null, _jsx("h3", { className: "not-prose mb-1 text-sm font-medium", children: title }), description ? (_jsx("p", { className: "my-0 text-sm text-fd-muted-foreground", children: description })) : null, props.children ? (_jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children })) : null] }));
9
+ return (_jsxs(E, { ...props, "data-card": true, className: cn('block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full', props.href && 'hover:bg-fd-accent/80', props.className), children: [icon ? (_jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon })) : null, _jsx("h3", { className: "not-prose mb-1 text-sm font-medium", children: title }), description ? (_jsx("p", { className: "!my-0 text-sm text-fd-muted-foreground", children: description })) : null, props.children ? (_jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children })) : null] }));
10
10
  }
@@ -22,7 +22,7 @@ export function RootToggle({ options, placeholder, ...props }) {
22
22
  setOpen(false);
23
23
  };
24
24
  const item = selected ? _jsx(Item, { ...selected }) : placeholder;
25
- return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [item ? (_jsxs(PopoverTrigger, { ...props, className: cn('flex flex-row items-center gap-2.5 rounded-lg ps-2 pe-4 py-1.5 hover:bg-fd-accent/50 hover:text-fd-accent-foreground', props.className), children: [item, _jsx(ChevronsUpDown, { className: "size-4 text-fd-muted-foreground" })] })) : null, _jsx(PopoverContent, { className: "w-(--radix-popover-trigger-width) overflow-hidden p-0", children: options.map((item) => (_jsx(Link, { href: item.url, onClick: onClick, ...item.props, className: cn('flex w-full flex-row items-center gap-2 px-2 py-1.5', selected === item
25
+ return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [item ? (_jsxs(PopoverTrigger, { ...props, className: cn('flex flex-row items-center gap-2.5 rounded-lg ps-2 pe-4 py-1.5 hover:text-fd-accent-foreground', props.className), children: [item, _jsx(ChevronsUpDown, { className: "size-4 text-fd-muted-foreground" })] })) : null, _jsx(PopoverContent, { className: "w-(--radix-popover-trigger-width) overflow-hidden p-0", children: options.map((item) => (_jsx(Link, { href: item.url, onClick: onClick, ...item.props, className: cn('flex w-full flex-row items-center gap-2 px-2 py-1.5', selected === item
26
26
  ? 'bg-fd-accent text-fd-accent-foreground'
27
27
  : 'hover:bg-fd-accent/50', item.props?.className), children: _jsx(Item, { ...item }) }, item.url))) })] }));
28
28
  }
@@ -1,5 +1,6 @@
1
1
  import { type ButtonHTMLAttributes } from 'react';
2
- export declare function SearchToggle({ hideIfDisabled, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
2
+ import { type ButtonProps } from '../../components/ui/button.js';
3
+ export declare function SearchToggle({ hideIfDisabled, size, color, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & ButtonProps & {
3
4
  hideIfDisabled?: boolean;
4
5
  }): import("react/jsx-runtime").JSX.Element | null;
5
6
  export declare function LargeSearchToggle({ hideIfDisabled, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -1 +1 @@
1
- {"version":3,"file":"search-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/layout/search-toggle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAOlD,wBAAgB,YAAY,CAAC,EAC3B,cAAc,EACd,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,kDAuBA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,kDA6BA"}
1
+ {"version":3,"file":"search-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/layout/search-toggle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,wBAAwB,CAAC;AAE1E,wBAAgB,YAAY,CAAC,EAC3B,cAAc,EACd,IAAa,EACb,KAAe,EACf,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,GACxC,WAAW,GAAG;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,kDAuBF;AAED,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,kDA6BA"}
@@ -5,13 +5,13 @@ import { useSearchContext } from '../../contexts/search.js';
5
5
  import { useI18n } from '../../contexts/i18n.js';
6
6
  import { cn } from '../../utils/cn.js';
7
7
  import { buttonVariants } from '../../components/ui/button.js';
8
- export function SearchToggle({ hideIfDisabled, ...props }) {
8
+ export function SearchToggle({ hideIfDisabled, size = 'icon', color = 'ghost', ...props }) {
9
9
  const { setOpenSearch, enabled } = useSearchContext();
10
10
  if (hideIfDisabled && !enabled)
11
11
  return null;
12
12
  return (_jsx("button", { type: "button", className: cn(buttonVariants({
13
- size: 'icon',
14
- color: 'ghost',
13
+ size,
14
+ color,
15
15
  }), props.className), "data-search": "", "aria-label": "Open Search", onClick: () => {
16
16
  setOpenSearch(true);
17
17
  }, children: _jsx(SearchIcon, {}) }));
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,oBAAoB,EAGzB,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,2CAuDrD;AAED,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAAE,2CAwC3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CASlE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAarD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAkB3E;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAmCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAmBlE;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAiB/C;AAgBD;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAwDA"}
@@ -1,9 +1,9 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { ChevronDown, ExternalLink, SidebarIcon } from 'lucide-react';
3
+ import { ChevronDown, ExternalLink } from 'lucide-react';
4
4
  import * as Base from 'fumadocs-core/sidebar';
5
5
  import { usePathname } from 'next/navigation';
6
- import { createContext, Fragment, useCallback, useContext, useMemo, useRef, useState, } from 'react';
6
+ import { createContext, Fragment, useContext, useMemo, useRef, useState, } from 'react';
7
7
  import Link from 'fumadocs-core/link';
8
8
  import { useOnChange } from 'fumadocs-core/utils/use-on-change';
9
9
  import { cn } from '../../utils/cn.js';
@@ -32,26 +32,27 @@ export function CollapsibleSidebar(props) {
32
32
  setHover(false);
33
33
  closeTimeRef.current = Date.now() + 150;
34
34
  });
35
- const onEnter = useCallback((e) => {
36
- if (e.pointerType === 'touch' || closeTimeRef.current > Date.now())
37
- return;
38
- window.clearTimeout(timerRef.current);
39
- setHover(true);
40
- }, []);
41
- const onLeave = useCallback((e) => {
42
- if (e.pointerType === 'touch')
43
- return;
44
- window.clearTimeout(timerRef.current);
45
- timerRef.current = window.setTimeout(() => {
46
- setHover(false);
47
- closeTimeRef.current = Date.now() + 150;
48
- }, Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
49
- ? 0
50
- : 500);
51
- }, []);
52
- return (_jsx(Sidebar, { ...props, onPointerEnter: collapsed ? onEnter : undefined, onPointerLeave: collapsed ? onLeave : undefined, "data-collapsed": collapsed, className: cn('md:transition-all', collapsed &&
53
- 'md:-me-(--fd-sidebar-width) md:translate-x-[calc(var(--fd-sidebar-offset)*-1)] 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) - 20px)',
35
+ return (_jsx(Sidebar, { ...props, onPointerEnter: (e) => {
36
+ if (!collapsed ||
37
+ e.pointerType === 'touch' ||
38
+ closeTimeRef.current > Date.now())
39
+ return;
40
+ window.clearTimeout(timerRef.current);
41
+ setHover(true);
42
+ }, onPointerLeave: (e) => {
43
+ if (!collapsed || e.pointerType === 'touch')
44
+ return;
45
+ window.clearTimeout(timerRef.current);
46
+ timerRef.current = window.setTimeout(() => {
47
+ setHover(false);
48
+ closeTimeRef.current = Date.now() + 150;
49
+ }, Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
50
+ ? 0
51
+ : 500);
52
+ }, "data-collapsed": collapsed, className: cn('md:transition-all', collapsed &&
53
+ 'md:-me-(--fd-sidebar-width) md:-translate-x-(--fd-sidebar-offset) rtl:md:translate-x-(--fd-sidebar-offset)', collapsed && hover && 'z-50 md:translate-x-0', collapsed && !hover && 'md:opacity-0', props.className), style: {
54
+ '--fd-sidebar-offset': 'calc(var(--fd-sidebar-width) - 6px)',
55
+ ...props.style,
55
56
  } }));
56
57
  }
57
58
  export function Sidebar({ defaultOpenLevel = 0, prefetch = true, inner, ...props }) {
@@ -62,7 +63,7 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, inner, ...props
62
63
  level: 1,
63
64
  };
64
65
  }, [defaultOpenLevel, prefetch]);
65
- return (_jsx(Context.Provider, { value: context, children: _jsx(Base.SidebarList, { id: "nd-sidebar", blockScrollingWidth: 768, ...props, className: cn('fixed top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] z-30 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: {
66
+ return (_jsx(Context.Provider, { value: context, children: _jsx(Base.SidebarList, { id: "nd-sidebar", blockScrollingWidth: 768, ...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: {
66
67
  ...props.style,
67
68
  '--fd-sidebar-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
68
69
  }, 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 }) }) }));
@@ -139,7 +140,7 @@ export function SidebarCollapseTrigger(props) {
139
140
  const { collapsed, setCollapsed } = useSidebar();
140
141
  return (_jsx("button", { type: "button", "aria-label": "Collapse Sidebar", "data-collapsed": collapsed, ...props, onClick: () => {
141
142
  setCollapsed((prev) => !prev);
142
- }, children: props.children ?? _jsx(SidebarIcon, {}) }));
143
+ }, children: props.children }));
143
144
  }
144
145
  function useFolderContext() {
145
146
  const ctx = useContext(FolderContext);
@@ -185,7 +186,8 @@ export function SidebarPageTree(props) {
185
186
  function PageTreeFolder({ item, ...props }) {
186
187
  const { defaultOpenLevel, level } = useInternalContext();
187
188
  const path = useTreePath();
188
- 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 })] }));
189
+ return (_jsxs(SidebarFolder, { defaultOpen: (item.defaultOpen ?? defaultOpenLevel >= level) ||
190
+ path.some((pathItem) => pathItem.$id === item.$id || pathItem === 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 })] }));
189
191
  }
190
192
  function getOffset(level) {
191
193
  return `calc(var(--spacing) * ${(level > 1 ? level : 0) * 2 + 2})`;
@@ -1,5 +1,7 @@
1
+ import { type VariantProps } from 'class-variance-authority';
1
2
  export declare const buttonVariants: (props?: ({
2
3
  color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
3
4
  size?: "icon" | "sm" | "icon-sm" | null | undefined;
4
5
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
6
+ export type ButtonProps = VariantProps<typeof buttonVariants>;
5
7
  //# sourceMappingURL=button.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;8EAmB1B,CAAC"}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}
@@ -9,4 +9,20 @@ export declare function usePageStyles(): PageStyles;
9
9
  export declare function StylesProvider({ children, ...value }: PageStyles & {
10
10
  children: ReactNode;
11
11
  }): import("react/jsx-runtime").JSX.Element;
12
+ export interface NavProviderProps {
13
+ /**
14
+ * Use transparent background
15
+ *
16
+ * @defaultValue none
17
+ */
18
+ transparentMode?: 'always' | 'top' | 'none';
19
+ }
20
+ interface NavContextType {
21
+ isTransparent: boolean;
22
+ }
23
+ export declare function NavProvider({ transparentMode, children, }: NavProviderProps & {
24
+ children: ReactNode;
25
+ }): import("react/jsx-runtime").JSX.Element;
26
+ export declare function useNav(): NavContextType;
27
+ export {};
12
28
  //# sourceMappingURL=layout.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/contexts/layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAElE,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAUD,wBAAgB,aAAa,eAE5B;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAItC"}
1
+ {"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/contexts/layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAUD,wBAAgB,aAAa,eAE5B;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAItC;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CAC7C;AAED,UAAU,cAAc;IACtB,aAAa,EAAE,OAAO,CAAC;CACxB;AAMD,wBAAgB,WAAW,CAAC,EAC1B,eAAwB,EACxB,QAAQ,GACT,EAAE,gBAAgB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAwB5C;AAED,wBAAgB,MAAM,IAAI,cAAc,CAEvC"}
@@ -1,6 +1,6 @@
1
1
  'use client';
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
- import { createContext, useContext } from 'react';
3
+ import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
4
4
  /**
5
5
  * applied styles to different layout components in `Page` from layouts
6
6
  */
@@ -14,3 +14,25 @@ export function usePageStyles() {
14
14
  export function StylesProvider({ children, ...value }) {
15
15
  return (_jsx(StylesContext.Provider, { value: value, children: children }));
16
16
  }
17
+ const NavContext = createContext({
18
+ isTransparent: false,
19
+ });
20
+ export function NavProvider({ transparentMode = 'none', children, }) {
21
+ const [transparent, setTransparent] = useState(transparentMode !== 'none');
22
+ useEffect(() => {
23
+ if (transparentMode !== 'top')
24
+ return;
25
+ const listener = () => {
26
+ setTransparent(window.scrollY < 10);
27
+ };
28
+ listener();
29
+ window.addEventListener('scroll', listener);
30
+ return () => {
31
+ window.removeEventListener('scroll', listener);
32
+ };
33
+ }, [transparentMode]);
34
+ return (_jsx(NavContext.Provider, { value: useMemo(() => ({ isTransparent: transparent }), [transparent]), children: children }));
35
+ }
36
+ export function useNav() {
37
+ return useContext(NavContext);
38
+ }
@@ -1,5 +1,5 @@
1
1
  import { type LinkItemType } from '../../layouts/links.js';
2
- import { type SidebarProps } from '../../layouts/docs/sidebar.js';
2
+ import { type SidebarProps } from '../../components/layout/sidebar.js';
3
3
  import type { PageTree } from 'fumadocs-core/server';
4
4
  import type { FC, ReactNode } from 'react';
5
5
  import type { Option } from '../../components/layout/root-toggle.js';
@@ -1 +1 @@
1
- {"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAML,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAG9D,eAAO,MAAM,eAAe;;CAE3B,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;CACtE;AAED,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,UAAU,GAAG,KAAK,CAAC;IAErC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAsDA;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,OAAO,QAY5C;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,wBASpB"}
1
+ {"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAML,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAG9D,eAAO,MAAM,eAAe;;CAE3B,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;CACtE;AAED,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,UAAU,GAAG,KAAK,CAAC;IAErC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAsDA;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,OAAO,QAY5C;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,wBASpB"}
@@ -1,6 +1,6 @@
1
1
  import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
2
  import { BaseLinkItem } from '../../layouts/links.js';
3
- import { SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, } from '../../layouts/docs/sidebar.js';
3
+ import { SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, } from '../../components/layout/sidebar.js';
4
4
  import { cn } from '../../utils/cn.js';
5
5
  import { buttonVariants } from '../../components/ui/button.js';
6
6
  import { notFound } from 'next/navigation';
@@ -51,14 +51,14 @@ function getSidebarTabs(pageTree, { transform = defaultTransform } = {}) {
51
51
  function findOptions(node) {
52
52
  const results = [];
53
53
  if (node.root) {
54
- const index = node.index ?? node.children.at(0);
55
- if (index?.type === 'page') {
54
+ const urls = getFolderUrls(node);
55
+ if (urls.size > 0) {
56
56
  const option = {
57
- url: index.url,
57
+ url: urls.values().next().value ?? '',
58
58
  title: node.name,
59
59
  icon: node.icon,
60
60
  description: node.description,
61
- urls: getFolderUrls(node, new Set()),
61
+ urls,
62
62
  };
63
63
  const mapped = transform ? transform(option, node) : option;
64
64
  if (mapped)
@@ -73,11 +73,11 @@ function getSidebarTabs(pageTree, { transform = defaultTransform } = {}) {
73
73
  }
74
74
  return findOptions(pageTree);
75
75
  }
76
- function getFolderUrls(folder, output) {
76
+ function getFolderUrls(folder, output = new Set()) {
77
77
  if (folder.index)
78
78
  output.add(folder.index.url);
79
79
  for (const child of folder.children) {
80
- if (child.type === 'page')
80
+ if (child.type === 'page' && !child.external)
81
81
  output.add(child.url);
82
82
  if (child.type === 'folder')
83
83
  getFolderUrls(child, output);
@@ -1,4 +1,5 @@
1
1
  import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
2
2
  export declare function Navbar(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
3
3
  export declare function NavbarSidebarTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
4
+ export declare function CollapsibleControl(): import("react/jsx-runtime").JSX.Element | undefined;
4
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,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAOvE,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAiBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAkB/C"}
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;AASvE,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAiBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAkB/C;AAED,wBAAgB,kBAAkB,wDAoBjC"}
@@ -1,11 +1,13 @@
1
1
  'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import { Menu, X } from 'lucide-react';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { Menu, SidebarIcon, X } from 'lucide-react';
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
- import { useNav } from '../components/layout/nav.js';
7
+ import { useNav } from '../contexts/layout.js';
8
8
  import { SidebarTrigger } from 'fumadocs-core/sidebar';
9
+ import { SidebarCollapseTrigger } from '../components/layout/sidebar.js';
10
+ import { SearchToggle } from '../components/layout/search-toggle.js';
9
11
  export function Navbar(props) {
10
12
  const { open } = useSidebar();
11
13
  const { isTransparent } = useNav();
@@ -18,3 +20,12 @@ export function NavbarSidebarTrigger(props) {
18
20
  size: 'icon',
19
21
  }), props.className), children: open ? _jsx(X, {}) : _jsx(Menu, {}) }));
20
22
  }
23
+ export function CollapsibleControl() {
24
+ const { collapsed } = useSidebar();
25
+ if (!collapsed)
26
+ return;
27
+ return (_jsxs("div", { className: "fixed flex flex-row items-center animate-fd-fade-in rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 top-12 shadow-md max-md:hidden xl:top-4 xl:start-4 max-xl:end-4", children: [_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
28
+ color: 'ghost',
29
+ size: 'icon-sm',
30
+ }), 'rounded-lg'), children: _jsx(SidebarIcon, {}) }), _jsx(SearchToggle, { size: "icon-sm", className: "rounded-lg" })] }));
31
+ }
@@ -2,13 +2,17 @@ import type { PageTree } from 'fumadocs-core/server';
2
2
  import { type ReactNode, type HTMLAttributes } from 'react';
3
3
  import { type LinkItemType } from '../layouts/links.js';
4
4
  import { type BaseLayoutProps } from './shared.js';
5
+ import { CollapsibleControl, Navbar, NavbarSidebarTrigger } from '../layouts/docs.client.js';
5
6
  import { type SidebarOptions } from '../layouts/docs/shared.js';
6
7
  export interface DocsLayoutProps extends BaseLayoutProps {
7
8
  tree: PageTree.Root;
8
9
  sidebar?: Partial<SidebarOptions>;
10
+ /**
11
+ * Props for the `div` container
12
+ */
9
13
  containerProps?: HTMLAttributes<HTMLDivElement>;
10
14
  }
11
15
  export declare function DocsLayout({ nav: { enabled: navEnabled, component: navReplace, transparentMode, ...nav }, themeSwitch, sidebar: { enabled: sidebarEnabled, collapsible, component: sidebarReplace, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, hideSearch: sidebarHideSearch, ...sidebar }, i18n, children, ...props }: DocsLayoutProps): ReactNode;
16
+ export { CollapsibleControl, Navbar, NavbarSidebarTrigger, type LinkItemType };
12
17
  export { getSidebarTabsFromOptions, type TabOptions } from './docs/shared.js';
13
- export { type LinkItemType };
14
18
  //# 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,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAe5D,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAa1D,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EACH,OAAO,EAAE,UAAiB,EAC1B,SAAS,EAAE,UAAU,EACrB,eAAe,EACf,GAAG,GAAG,EACF,EACN,WAAW,EACX,OAAO,EAAE,EACP,OAAO,EAAE,cAAqB,EAC9B,WAAkB,EAClB,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,iBAAiB,EAC7B,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CA8H7B;AA+CD,OAAO,EAAE,yBAAyB,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,KAAK,YAAY,EAAE,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,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAe5D,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,UAAU,CAAC;AAK1D,OAAO,EACL,kBAAkB,EAClB,MAAM,EACN,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAO/B,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,GAAG,EAAE,EACH,OAAO,EAAE,UAAiB,EAC1B,SAAS,EAAE,UAAU,EACrB,eAAe,EACf,GAAG,GAAG,EACF,EACN,WAAW,EACX,OAAO,EAAE,EACP,OAAO,EAAE,cAAqB,EAC9B,WAAkB,EAClB,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,iBAAiB,EAC7B,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,SAAS,CAyH7B;AA+CD,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,CAAC;AAC/E,OAAO,EAAE,yBAAyB,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC"}
@@ -1,21 +1,20 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import Link from 'next/link';
3
- import { ChevronRight, Languages } from 'lucide-react';
3
+ import { Languages, SidebarIcon } from 'lucide-react';
4
4
  import { cn } from '../utils/cn.js';
5
5
  import { buttonVariants } from '../components/ui/button.js';
6
- import { CollapsibleSidebar, Sidebar, SidebarFooter, SidebarHeader, SidebarCollapseTrigger, SidebarViewport, SidebarPageTree, } from '../layouts/docs/sidebar.js';
6
+ import { CollapsibleSidebar, Sidebar, SidebarFooter, SidebarHeader, SidebarCollapseTrigger, SidebarViewport, SidebarPageTree, } from '../components/layout/sidebar.js';
7
7
  import { replaceOrDefault } from '../layouts/shared.js';
8
8
  import { BaseLinkItem } from '../layouts/links.js';
9
9
  import { RootToggle } from '../components/layout/root-toggle.js';
10
10
  import { getLinks } from './shared.js';
11
11
  import { LanguageToggle, LanguageToggleText, } from '../components/layout/language-toggle.js';
12
- import { Navbar, NavbarSidebarTrigger } from '../layouts/docs.client.js';
12
+ import { CollapsibleControl, Navbar, NavbarSidebarTrigger, } from '../layouts/docs.client.js';
13
13
  import { TreeContextProvider } from '../contexts/tree.js';
14
- import { NavProvider, Title } from '../components/layout/nav.js';
15
14
  import { ThemeToggle } from '../components/layout/theme-toggle.js';
16
15
  import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
17
16
  import { checkPageTree, getSidebarTabsFromOptions, layoutVariables, SidebarLinkItem, } from '../layouts/docs/shared.js';
18
- import { StylesProvider } from '../contexts/layout.js';
17
+ import { StylesProvider, NavProvider, } from '../contexts/layout.js';
19
18
  export function DocsLayout({ nav: { enabled: navEnabled = true, component: navReplace, transparentMode, ...nav } = {}, themeSwitch, sidebar: { enabled: sidebarEnabled = true, collapsible = true, component: sidebarReplace, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, hideSearch: sidebarHideSearch, ...sidebar } = {}, i18n = false, children, ...props }) {
20
19
  checkPageTree(props.tree);
21
20
  const links = getLinks(props.links ?? [], props.githubUrl);
@@ -28,16 +27,13 @@ export function DocsLayout({ nav: { enabled: navEnabled = true, component: navRe
28
27
  tocNav: cn('xl:hidden'),
29
28
  toc: cn('max-xl:hidden'),
30
29
  };
31
- return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [replaceOrDefault({ enabled: navEnabled, component: navReplace }, _jsxs(Navbar, { className: "md:hidden", children: [_jsx(Title, { url: nav.url, title: nav.title }), _jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children: nav.children }), _jsx(SearchToggle, { hideIfDisabled: true }), _jsx(NavbarSidebarTrigger, { className: "-me-2 md:hidden" })] }), nav), _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex flex-1 flex-row pe-(--fd-layout-offset)', variables, props.containerProps?.className), style: {
30
+ return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [replaceOrDefault({ enabled: navEnabled, component: navReplace }, _jsxs(Navbar, { className: "md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), _jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children: nav.children }), _jsx(SearchToggle, { hideIfDisabled: true }), _jsx(NavbarSidebarTrigger, { className: "-me-2 md:hidden" })] }), nav), _jsxs("main", { id: "nd-docs-layout", ...props.containerProps, className: cn('flex flex-1 flex-row pe-(--fd-layout-offset)', variables, props.containerProps?.className), style: {
32
31
  ...layoutVariables,
33
32
  ...props.containerProps?.style,
34
- }, children: [collapsible ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
35
- color: 'secondary',
36
- size: 'icon',
37
- }), 'fixed top-1/2 -translate-y-1/2 start-0 z-40 text-fd-muted-foreground border-s-0 rounded-s-none shadow-md data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(ChevronRight, {}) })) : null, replaceOrDefault({ enabled: sidebarEnabled, component: sidebarReplace }, _jsxs(Aside, { ...sidebar, className: cn('md:ps-(--fd-layout-offset)', sidebar.className), children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex flex-row pt-1 max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
33
+ }, children: [collapsible ? _jsx(CollapsibleControl, {}) : null, replaceOrDefault({ enabled: sidebarEnabled, component: sidebarReplace }, _jsxs(Aside, { ...sidebar, className: cn('md:ps-(--fd-layout-offset)', sidebar.className), children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex flex-row pt-1 max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium", children: nav.title }), nav.children, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
38
34
  color: 'ghost',
39
35
  size: 'icon-sm',
40
- }), 'ms-auto mb-auto text-fd-muted-foreground max-md:hidden') }))] }), sidebarBanner, tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null, !sidebarHideSearch ? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: "rounded-lg max-md:hidden" })) : null] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "mb-4 empty:hidden", children: links
36
+ }), 'ms-auto mb-auto text-fd-muted-foreground max-md:hidden'), children: _jsx(SidebarIcon, {}) }))] }), sidebarBanner, tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null, !sidebarHideSearch ? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: "rounded-lg max-md:hidden" })) : null] }), _jsxs(SidebarViewport, { children: [_jsx("div", { className: "mb-4 empty:hidden", children: links
41
37
  .filter((v) => v.type !== 'icon')
42
38
  .map((item, i) => (_jsx(SidebarLinkItem, { item: item }, i))) }), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsxs(SidebarFooter, { children: [_jsx(SidebarFooterItems, { links: links, i18n: i18n, themeSwitch: themeSwitch }), sidebarFooter] })] }), {
43
39
  ...sidebar,
@@ -51,4 +47,5 @@ function SidebarFooterItems({ i18n, themeSwitch, links, }) {
51
47
  return null;
52
48
  return (_jsxs("div", { className: "flex flex-row items-center", children: [iconItems.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, replaceOrDefault(themeSwitch, _jsx(ThemeToggle, { className: "p-0", mode: themeSwitch?.mode }))] }));
53
49
  }
50
+ export { CollapsibleControl, Navbar, NavbarSidebarTrigger };
54
51
  export { getSidebarTabsFromOptions } from './docs/shared.js';
@@ -6,7 +6,7 @@ import Link from 'fumadocs-core/link';
6
6
  import { cn } from '../../utils/cn.js';
7
7
  import { BaseLinkItem } from '../../layouts/links.js';
8
8
  import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from '../../components/ui/navigation-menu.js';
9
- import { useNav } from '../../components/layout/nav.js';
9
+ import { useNav } from '../../contexts/layout.js';
10
10
  import { buttonVariants } from '../../components/ui/button.js';
11
11
  const navItemVariants = cva('inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary [&_svg]:size-4');
12
12
  export function Navbar(props) {
@@ -3,7 +3,7 @@ import { Fragment } from 'react';
3
3
  import { replaceOrDefault } from '../layouts/shared.js';
4
4
  import { cn } from '../utils/cn.js';
5
5
  import { getLinks } from './shared.js';
6
- import { NavProvider, Title } from '../components/layout/nav.js';
6
+ import { NavProvider } from '../contexts/layout.js';
7
7
  import { Navbar, NavbarLink, NavbarMenu, NavbarMenuContent, NavbarMenuLink, NavbarMenuTrigger, } from '../layouts/home/navbar.js';
8
8
  import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
9
9
  import { ThemeToggle } from '../components/layout/theme-toggle.js';
@@ -21,7 +21,7 @@ export function HomeLayout(props) {
21
21
  function Header({ nav: { enableSearch = true, ...nav } = {}, i18n = false, finalLinks, themeSwitch, }) {
22
22
  const navItems = finalLinks.filter((item) => ['nav', 'all'].includes(item.on ?? 'all'));
23
23
  const menuItems = finalLinks.filter((item) => ['menu', 'all'].includes(item.on ?? 'all'));
24
- return (_jsxs(Navbar, { children: [_jsx(Title, { title: nav.title, url: nav.url }), nav.children, _jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
24
+ return (_jsxs(Navbar, { children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, _jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
25
25
  .filter((item) => !isSecondary(item))
26
26
  .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1", children: [enableSearch ? (_jsxs(_Fragment, { children: [_jsx(SearchToggle, { className: "lg:hidden", hideIfDisabled: true }), _jsx(LargeSearchToggle, { className: "w-full max-w-[240px] max-lg:hidden", hideIfDisabled: true })] })) : null, replaceOrDefault(themeSwitch, _jsx(ThemeToggle, { className: "max-lg:hidden", mode: themeSwitch?.mode })), i18n ? (_jsx(LanguageToggle, { className: "max-lg:hidden", children: _jsx(Languages, { className: "size-5" }) })) : null] }), _jsxs("ul", { className: "flex flex-row items-center", children: [navItems.filter(isSecondary).map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "-me-1.5 max-lg:hidden" }, i))), _jsxs(Menu, { className: "lg:hidden", children: [_jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: "group -me-2", enableHover: nav.enableHoverToOpen, children: _jsx(ChevronDown, { className: "size-3 transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), _jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [menuItems
27
27
  .filter((item) => !isSecondary(item))
@@ -1,6 +1,8 @@
1
1
  import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
2
2
  import type { Option } from '../components/layout/root-toggle.js';
3
- export declare function Navbar(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
3
+ export declare function Navbar({ mode, ...props }: HTMLAttributes<HTMLElement> & {
4
+ mode: 'top' | 'auto';
5
+ }): import("react/jsx-runtime").JSX.Element;
4
6
  export declare function NavbarSidebarTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
5
7
  export declare function LayoutTabs(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
6
8
  export declare function LayoutTab(item: Option): import("react/jsx-runtime").JSX.Element;
@@ -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;AASvE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CAyBxD;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAkB/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"}
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;AASvE,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,2CAkB/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"}
@@ -2,22 +2,19 @@
2
2
  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
- import { useNav } from '../components/layout/nav.js';
5
+ import { useNav } from '../contexts/layout.js';
6
6
  import { SidebarTrigger } from 'fumadocs-core/sidebar';
7
7
  import { buttonVariants } from '../components/ui/button.js';
8
8
  import { Menu, X } from 'lucide-react';
9
9
  import Link from 'fumadocs-core/link';
10
10
  import { usePathname } from 'next/navigation';
11
11
  import { isActive } from '../utils/is-active.js';
12
- export function Navbar(props) {
12
+ export function Navbar({ mode, ...props }) {
13
13
  const { open, collapsed } = useSidebar();
14
14
  const { isTransparent } = useNav();
15
- return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed inset-x-0 top-(--fd-banner-height) z-10 pe-(--fd-layout-offset) backdrop-blur-lg transition-colors', (!isTransparent || open) && 'bg-fd-background/80', props.className), style: {
16
- paddingInlineStart: collapsed
17
- ? 'var(--fd-layout-offset)'
18
- : 'calc(var(--fd-layout-offset) + var(--fd-sidebar-width))',
19
- ...props.style,
20
- }, children: props.children }));
15
+ return (_jsx("header", { id: "nd-subnav", ...props, className: cn('fixed inset-x-0 top-(--fd-banner-height) z-10 px-(--fd-layout-offset) backdrop-blur-lg transition-colors', (!isTransparent || open) && 'bg-fd-background/80', mode === 'auto' &&
16
+ !collapsed &&
17
+ 'ps-[calc(var(--fd-layout-offset)+var(--fd-sidebar-width))]', props.className), children: props.children }));
21
18
  }
22
19
  export function NavbarSidebarTrigger(props) {
23
20
  const { open } = useSidebar();
@@ -2,6 +2,7 @@ import { type HTMLAttributes } from 'react';
2
2
  import { type BaseLayoutProps } from '../layouts/shared.js';
3
3
  import { type SidebarOptions } from '../layouts/docs/shared.js';
4
4
  import type { PageTree } from 'fumadocs-core/server';
5
+ import { Navbar, NavbarSidebarTrigger } from './notebook.client.js';
5
6
  export interface DocsLayoutProps extends BaseLayoutProps {
6
7
  tree: PageTree.Root;
7
8
  tabMode?: 'sidebar' | 'navbar';
@@ -12,4 +13,5 @@ export interface DocsLayoutProps extends BaseLayoutProps {
12
13
  containerProps?: HTMLAttributes<HTMLDivElement>;
13
14
  }
14
15
  export declare function DocsLayout({ tabMode, nav: { transparentMode, ...nav }, sidebar: { collapsible: sidebarCollapsible, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar }, i18n, themeSwitch, ...props }: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
16
+ export { Navbar, NavbarSidebarTrigger };
15
17
  //# sourceMappingURL=notebook.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAC;AA4B1B,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAWrD,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,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC,CAAC;IAEjE,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAmB,EACnB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAO,EAAE,EACP,WAAW,EAAE,kBAAyB,EACtC,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,WAAW,EACX,GAAG,KAAK,EACT,EAAE,eAAe,2CAgIjB"}
1
+ {"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAC;AA2B1B,OAAO,EAKL,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;AAQ3B,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,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC,CAAC;IAEjE,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAmB,EACnB,GAAG,EAAE,EAAE,eAAe,EAAE,GAAG,GAAG,EAAO,EACrC,OAAO,EAAE,EACP,WAAW,EAAE,kBAAyB,EACtC,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,iBAAiB,EAC7B,GAAG,OAAO,EACN,EACN,IAAY,EACZ,WAAW,EACX,GAAG,KAAK,EACT,EAAE,eAAe,2CAkIjB;AA4KD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}
@@ -1,21 +1,20 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Fragment } from 'react';
3
3
  import { getLinks, replaceOrDefault, } from '../layouts/shared.js';
4
- import { CollapsibleSidebar, Sidebar, SidebarCollapseTrigger, SidebarFooter, SidebarHeader, SidebarViewport, SidebarPageTree, } from '../layouts/docs/sidebar.js';
4
+ import { CollapsibleSidebar, Sidebar, SidebarCollapseTrigger, SidebarFooter, SidebarHeader, SidebarViewport, SidebarPageTree, } from '../components/layout/sidebar.js';
5
5
  import { TreeContextProvider } from '../contexts/tree.js';
6
- import { NavProvider, Title } from '../components/layout/nav.js';
7
6
  import { LargeSearchToggle, SearchToggle, } from '../components/layout/search-toggle.js';
8
7
  import { cn } from '../utils/cn.js';
9
8
  import Link from 'next/link';
10
9
  import { buttonVariants } from '../components/ui/button.js';
11
- import { ChevronDown, Languages } from 'lucide-react';
10
+ import { ChevronDown, Languages, SidebarIcon } from 'lucide-react';
12
11
  import { BaseLinkItem } from '../layouts/links.js';
13
12
  import { LanguageToggle } from '../components/layout/language-toggle.js';
14
13
  import { ThemeToggle } from '../components/layout/theme-toggle.js';
15
14
  import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover.js';
16
15
  import { checkPageTree, getSidebarTabsFromOptions, layoutVariables, SidebarLinkItem, } from '../layouts/docs/shared.js';
17
16
  import { LayoutTab, LayoutTabs, Navbar, NavbarSidebarTrigger, SidebarLayoutTab, } from './notebook.client.js';
18
- import { StylesProvider } from '../contexts/layout.js';
17
+ import { StylesProvider, NavProvider, } from '../contexts/layout.js';
19
18
  import { RootToggle } from '../components/layout/root-toggle.js';
20
19
  export function DocsLayout({ tabMode = 'sidebar', nav: { transparentMode, ...nav } = {}, sidebar: { collapsible: sidebarCollapsible = true, tabs: tabOptions, banner: sidebarBanner, footer: sidebarFooter, components: sidebarComponents, ...sidebar } = {}, i18n = false, themeSwitch, ...props }) {
21
20
  checkPageTree(props.tree);
@@ -39,28 +38,22 @@ export function DocsLayout({ tabMode = 'sidebar', nav: { transparentMode, ...nav
39
38
  }, 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 }), _jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
40
39
  color: 'ghost',
41
40
  size: 'icon-sm',
42
- }), 'text-fd-muted-foreground mb-auto') })] })), nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null] }), _jsxs(SidebarViewport, { children: [tabMode === 'navbar' &&
41
+ }), 'text-fd-muted-foreground mb-auto'), children: _jsx(SidebarIcon, {}) })] })), nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { options: tabs, className: "-mx-2" })) : null] }), _jsxs(SidebarViewport, { children: [tabMode === 'navbar' &&
43
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, replaceOrDefault(themeSwitch, _jsx(ThemeToggle, { className: "md:hidden", mode: themeSwitch?.mode ?? 'light-dark-system' })), sidebarFooter] })] }), _jsx(DocsNavbar, { nav: nav, links: links, i18n: i18n, sidebarCollapsible: sidebarCollapsible, tabs: tabMode == 'navbar' ? tabs : [] }), _jsx(StylesProvider, { ...pageStyles, children: props.children })] }) }) }));
44
43
  }
45
44
  function DocsNavbar({ sidebarCollapsible, links, nav = {}, i18n, tabs, }) {
46
45
  const navMode = nav.mode ?? 'auto';
47
- return (_jsxs(Navbar, { style: navMode === 'top'
48
- ? {
49
- paddingInlineStart: 'var(--fd-layout-offset)',
50
- }
51
- : undefined, children: [_jsxs("div", { className: cn('flex flex-row border-b border-fd-foreground/10 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({
46
+ return (_jsxs(Navbar, { mode: navMode, children: [_jsxs("div", { className: cn('flex flex-row border-b border-fd-foreground/10 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({
52
47
  color: 'ghost',
53
48
  size: 'icon-sm',
54
- }), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden') })) : null, _jsx(Title, { url: nav.url, title: nav.title, className: cn(
55
- // show on sidebar on above md
56
- navMode === 'auto' && 'md:hidden') })] }), _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
49
+ }), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null, _jsx(Link, { href: nav.url ?? '/', className: cn('inline-flex items-center gap-2.5 font-semibold', navMode === 'auto' && 'md:hidden'), children: nav.title })] }), _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
57
50
  .filter((item) => item.type !== 'icon')
58
51
  .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground" }, i))) }), nav.children, _jsx(SearchToggle, { hideIfDisabled: true, className: "md:hidden" }), _jsx(NavbarSidebarTrigger, { className: "md:hidden" }), links
59
52
  .filter((item) => item.type === 'icon')
60
53
  .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))), i18n ? (_jsx(LanguageToggle, { className: "max-md:hidden", children: _jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) })) : null, _jsx(ThemeToggle, { className: "ms-2 max-md:hidden", mode: "light-dark-system" }), sidebarCollapsible && navMode === 'top' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
61
54
  color: 'secondary',
62
55
  size: 'icon-sm',
63
- }), 'ms-2 text-fd-muted-foreground rounded-full max-md:hidden') })) : null] })] }), tabs.length > 0 ? (_jsx(LayoutTabs, { className: "px-6 border-b border-fd-foreground/10 h-10 max-lg:hidden", children: tabs.map((tab) => (_jsx(LayoutTab, { ...tab }, tab.url))) })) : null] }));
56
+ }), '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 border-fd-foreground/10 h-10 max-lg:hidden", children: tabs.map((tab) => (_jsx(LayoutTab, { ...tab }, tab.url))) })) : null] }));
64
57
  }
65
58
  function NavbarLinkItem({ item, ...props }) {
66
59
  if (item.type === 'menu') {
@@ -74,3 +67,4 @@ function NavbarLinkItem({ item, ...props }) {
74
67
  return item.children;
75
68
  return (_jsx(BaseLinkItem, { item: item, ...props, children: item.text }));
76
69
  }
70
+ export { Navbar, NavbarSidebarTrigger };
@@ -1,12 +1,16 @@
1
1
  import type { ReactNode } from 'react';
2
2
  import type { LinkItemType } from '../layouts/links.js';
3
- import type { NavProviderProps, TitleProps } from '../components/layout/nav.js';
3
+ import type { NavProviderProps } from '../contexts/layout.js';
4
4
  import type { I18nConfig } from 'fumadocs-core/i18n';
5
- export interface NavOptions extends SharedNavProps {
5
+ export interface NavOptions extends NavProviderProps {
6
6
  enabled: boolean;
7
7
  component: ReactNode;
8
- }
9
- export interface SharedNavProps extends TitleProps, NavProviderProps {
8
+ title?: ReactNode;
9
+ /**
10
+ * Redirect url of title
11
+ * @defaultValue '/'
12
+ */
13
+ url?: string;
10
14
  /**
11
15
  * Show/hide search toggle
12
16
  *
@@ -44,6 +48,7 @@ export interface BaseLayoutProps {
44
48
  nav?: Partial<NavOptions>;
45
49
  children?: ReactNode;
46
50
  }
51
+ export { type LinkItemType };
47
52
  /**
48
53
  * Get Links Items with shortcuts
49
54
  */
@@ -1 +1 @@
1
- {"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/layouts/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,cAAe,SAAQ,UAAU,EAAE,gBAAgB;IAClE;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE;QACZ,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,IAAI,CAAC,EAAE,YAAY,GAAG,mBAAmB,CAAC;KAC3C,CAAC;IAEF;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CACtB,KAAK,CAAC,EAAE,YAAY,EAAE,EACtB,SAAS,CAAC,EAAE,MAAM,GACjB,YAAY,EAAE,CAqBhB;AAED,wBAAgB,gBAAgB,CAC9B,GAAG,EACC;IACE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,GACD,SAAS,EACb,GAAG,EAAE,SAAS,EACd,oBAAoB,CAAC,EAAE,MAAM,EAC7B,QAAQ,CAAC,EAAE,SAAS,GACnB,SAAS,CAMX"}
1
+ {"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/layouts/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,gBAAgB;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IAErB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE;QACZ,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,IAAI,CAAC,EAAE,YAAY,GAAG,mBAAmB,CAAC;KAC3C,CAAC;IAEF;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,OAAO,EAAE,KAAK,YAAY,EAAE,CAAC;AAE7B;;GAEG;AACH,wBAAgB,QAAQ,CACtB,KAAK,CAAC,EAAE,YAAY,EAAE,EACtB,SAAS,CAAC,EAAE,MAAM,GACjB,YAAY,EAAE,CAqBhB;AAED,wBAAgB,gBAAgB,CAC9B,GAAG,EACC;IACE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,GACD,SAAS,EACb,GAAG,EAAE,SAAS,EACd,oBAAoB,CAAC,EAAE,MAAM,EAC7B,QAAQ,CAAC,EAAE,SAAS,GACnB,SAAS,CAMX"}
@@ -1 +1 @@
1
- {"version":3,"file":"page.client.d.ts","sourceRoot":"","sources":["../src/page.client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAMlC,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CA8CrE;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;AAuCD,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAEhD,wBAAgB,UAAU,CAAC,OAAO,EAAE,eAAe,kDAsClD"}
1
+ {"version":3,"file":"page.client.d.ts","sourceRoot":"","sources":["../src/page.client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAMlC,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CA8CrE;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;AAuCD,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAEhD,wBAAgB,UAAU,CAAC,OAAO,EAAE,eAAe,kDAsClD"}
@@ -8,9 +8,8 @@ import { useI18n } from './contexts/i18n.js';
8
8
  import { useTreeContext, useTreePath } from './contexts/tree.js';
9
9
  import { useSidebar } from './contexts/sidebar.js';
10
10
  import { usePathname } from 'next/navigation';
11
- import { useNav } from './components/layout/nav.js';
12
11
  import { getBreadcrumbItemsFromPath, } from 'fumadocs-core/breadcrumb';
13
- import { usePageStyles } from './contexts/layout.js';
12
+ import { usePageStyles, useNav } from './contexts/layout.js';
14
13
  import { isActive } from './utils/is-active.js';
15
14
  import { TocPopover } from './components/layout/toc.js';
16
15
  import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
package/dist/style.css CHANGED
@@ -1,11 +1,7 @@
1
- /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  @layer theme, base, components, utilities;
3
3
  @layer theme {
4
4
  :root, :host {
5
- --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
6
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
7
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
8
- "Courier New", monospace;
9
5
  --color-red-500: oklch(0.637 0.237 25.331);
10
6
  --color-orange-500: oklch(0.705 0.213 47.604);
11
7
  --color-blue-500: oklch(0.623 0.214 259.815);
@@ -35,18 +31,6 @@
35
31
  --blur-lg: 16px;
36
32
  --default-transition-duration: 150ms;
37
33
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
38
- --default-font-family: var(--font-sans);
39
- --default-font-feature-settings: var(--font-sans--font-feature-settings);
40
- --default-font-variation-settings: var(
41
- --font-sans--font-variation-settings
42
- );
43
- --default-mono-font-family: var(--font-mono);
44
- --default-mono-font-feature-settings: var(
45
- --font-mono--font-feature-settings
46
- );
47
- --default-mono-font-variation-settings: var(
48
- --font-mono--font-variation-settings
49
- );
50
34
  --color-fd-background: hsl(0, 0%, 96%);
51
35
  --color-fd-foreground: hsl(0, 0%, 3.9%);
52
36
  --color-fd-muted: hsl(0, 0%, 96.1%);
@@ -102,14 +86,12 @@
102
86
  line-height: 1.5;
103
87
  -webkit-text-size-adjust: 100%;
104
88
  tab-size: 4;
105
- font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
106
- font-feature-settings: var(--default-font-feature-settings, normal);
107
- font-variation-settings: var( --default-font-variation-settings, normal );
89
+ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
90
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
91
+ font-feature-settings: initial;
92
+ font-variation-settings: initial;
108
93
  -webkit-tap-highlight-color: transparent;
109
94
  }
110
- body {
111
- line-height: inherit;
112
- }
113
95
  hr {
114
96
  height: 0;
115
97
  color: inherit;
@@ -132,9 +114,10 @@
132
114
  font-weight: bolder;
133
115
  }
134
116
  code, kbd, samp, pre {
135
- font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
136
- font-feature-settings: var( --default-mono-font-feature-settings, normal );
137
- font-variation-settings: var( --default-mono-font-variation-settings, normal );
117
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
118
+ "Courier New", monospace;
119
+ font-feature-settings: initial;
120
+ font-variation-settings: initial;
138
121
  font-size: 1em;
139
122
  }
140
123
  small {
@@ -198,7 +181,11 @@
198
181
  }
199
182
  ::placeholder {
200
183
  opacity: 1;
201
- color: color-mix(in oklab, currentColor 50%, transparent);
184
+ }
185
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
186
+ ::placeholder {
187
+ color: color-mix(in oklab, currentColor 50%, transparent);
188
+ }
202
189
  }
203
190
  textarea {
204
191
  resize: vertical;
@@ -318,6 +305,9 @@
318
305
  .top-2 {
319
306
  top: calc(var(--spacing) * 2);
320
307
  }
308
+ .top-12 {
309
+ top: calc(var(--spacing) * 12);
310
+ }
321
311
  .top-\[10vh\] {
322
312
  top: 10vh;
323
313
  }
@@ -336,6 +326,9 @@
336
326
  .z-10 {
337
327
  z-index: 10;
338
328
  }
329
+ .z-20 {
330
+ z-index: 20;
331
+ }
339
332
  .z-30 {
340
333
  z-index: 30;
341
334
  }
@@ -385,6 +378,9 @@
385
378
  .mx-4 {
386
379
  margin-inline: calc(var(--spacing) * 4);
387
380
  }
381
+ .\!my-0 {
382
+ margin-block: calc(var(--spacing) * 0) !important;
383
+ }
388
384
  .my-0 {
389
385
  margin-block: calc(var(--spacing) * 0);
390
386
  }
@@ -1017,6 +1013,9 @@
1017
1013
  .transform {
1018
1014
  transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
1019
1015
  }
1016
+ .animate-fd-fade-in {
1017
+ animation: var(--animate-fd-fade-in);
1018
+ }
1020
1019
  .animate-spin {
1021
1020
  animation: var(--animate-spin);
1022
1021
  }
@@ -1135,10 +1134,6 @@
1135
1134
  .rounded-xl {
1136
1135
  border-radius: var(--radius-xl);
1137
1136
  }
1138
- .rounded-s-none {
1139
- border-start-start-radius: 0;
1140
- border-end-start-radius: 0;
1141
- }
1142
1137
  .border {
1143
1138
  border-style: var(--tw-border-style);
1144
1139
  border-width: 1px;
@@ -1147,10 +1142,6 @@
1147
1142
  border-inline-start-style: var(--tw-border-style);
1148
1143
  border-inline-start-width: 1px;
1149
1144
  }
1150
- .border-s-0 {
1151
- border-inline-start-style: var(--tw-border-style);
1152
- border-inline-start-width: 0px;
1153
- }
1154
1145
  .border-s-2 {
1155
1146
  border-inline-start-style: var(--tw-border-style);
1156
1147
  border-inline-start-width: 2px;
@@ -1263,6 +1254,9 @@
1263
1254
  .p-4 {
1264
1255
  padding: calc(var(--spacing) * 4);
1265
1256
  }
1257
+ .px-\(--fd-layout-offset\) {
1258
+ padding-inline: var(--fd-layout-offset);
1259
+ }
1266
1260
  .px-1\.5 {
1267
1261
  padding-inline: calc(var(--spacing) * 1.5);
1268
1262
  }
@@ -1308,6 +1302,9 @@
1308
1302
  .ps-8 {
1309
1303
  padding-inline-start: calc(var(--spacing) * 8);
1310
1304
  }
1305
+ .ps-\[calc\(var\(--fd-layout-offset\)\+var\(--fd-sidebar-width\)\)\] {
1306
+ padding-inline-start: calc(var(--fd-layout-offset) + var(--fd-sidebar-width));
1307
+ }
1311
1308
  .ps-px {
1312
1309
  padding-inline-start: 1px;
1313
1310
  }
@@ -1768,6 +1765,11 @@
1768
1765
  background-color: color-mix(in oklab, var(--color-fd-accent) 50%, transparent);
1769
1766
  }
1770
1767
  }
1768
+ .max-xl\:end-4 {
1769
+ @media (width < 80rem) {
1770
+ inset-inline-end: calc(var(--spacing) * 4);
1771
+ }
1772
+ }
1771
1773
  .max-xl\:hidden {
1772
1774
  @media (width < 80rem) {
1773
1775
  display: none;
@@ -1882,15 +1884,15 @@
1882
1884
  width: var(--fd-sidebar-width);
1883
1885
  }
1884
1886
  }
1885
- .md\:translate-x-0 {
1887
+ .md\:-translate-x-\(--fd-sidebar-offset\) {
1886
1888
  @media (width >= 48rem) {
1887
- --tw-translate-x: calc(var(--spacing) * 0);
1889
+ --tw-translate-x: calc(var(--fd-sidebar-offset) * -1);
1888
1890
  translate: var(--tw-translate-x) var(--tw-translate-y);
1889
1891
  }
1890
1892
  }
1891
- .md\:translate-x-\[calc\(var\(--fd-sidebar-offset\)\*-1\)\] {
1893
+ .md\:translate-x-0 {
1892
1894
  @media (width >= 48rem) {
1893
- --tw-translate-x: calc(var(--fd-sidebar-offset) * -1);
1895
+ --tw-translate-x: calc(var(--spacing) * 0);
1894
1896
  translate: var(--tw-translate-x) var(--tw-translate-y);
1895
1897
  }
1896
1898
  }
@@ -2033,6 +2035,16 @@
2033
2035
  --fd-sidebar-width: 286px;
2034
2036
  }
2035
2037
  }
2038
+ .xl\:start-4 {
2039
+ @media (width >= 80rem) {
2040
+ inset-inline-start: calc(var(--spacing) * 4);
2041
+ }
2042
+ }
2043
+ .xl\:top-4 {
2044
+ @media (width >= 80rem) {
2045
+ top: calc(var(--spacing) * 4);
2046
+ }
2047
+ }
2036
2048
  .xl\:mx-auto {
2037
2049
  @media (width >= 80rem) {
2038
2050
  margin-inline: auto;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fumadocs-ui",
3
- "version": "15.1.1",
3
+ "version": "15.1.3",
4
4
  "description": "The framework for building a documentation website in Next.js",
5
5
  "keywords": [
6
6
  "NextJs",
@@ -74,24 +74,24 @@
74
74
  },
75
75
  "devDependencies": {
76
76
  "@next/eslint-plugin-next": "^15.2.3",
77
- "@tailwindcss/cli": "^4.0.14",
77
+ "@tailwindcss/cli": "^4.0.15",
78
78
  "@types/lodash.merge": "^4.6.9",
79
- "@types/react": "^19.0.11",
79
+ "@types/react": "^19.0.12",
80
80
  "@types/react-dom": "^19.0.4",
81
81
  "next": "15.2.3",
82
- "tailwindcss": "^4.0.14",
82
+ "tailwindcss": "^4.0.15",
83
83
  "tsc-alias": "^1.8.11",
84
84
  "@fumadocs/cli": "0.0.8",
85
85
  "eslint-config-custom": "0.0.0",
86
- "tsconfig": "0.0.0",
87
- "fumadocs-core": "15.1.1"
86
+ "fumadocs-core": "15.1.3",
87
+ "tsconfig": "0.0.0"
88
88
  },
89
89
  "peerDependencies": {
90
90
  "next": "14.x.x || 15.x.x",
91
91
  "react": "18.x.x || 19.x.x",
92
92
  "react-dom": "18.x.x || 19.x.x",
93
93
  "tailwindcss": "^3.4.14 || ^4.0.0",
94
- "fumadocs-core": "15.1.1"
94
+ "fumadocs-core": "15.1.3"
95
95
  },
96
96
  "peerDependenciesMeta": {
97
97
  "tailwindcss": {
@@ -1,28 +0,0 @@
1
- import { type LinkProps } from 'fumadocs-core/link';
2
- import { type ReactNode } from 'react';
3
- export interface NavProviderProps {
4
- /**
5
- * Use transparent background
6
- *
7
- * @defaultValue none
8
- */
9
- transparentMode?: 'always' | 'top' | 'none';
10
- }
11
- export interface TitleProps {
12
- title?: ReactNode;
13
- /**
14
- * Redirect url of title
15
- * @defaultValue '/'
16
- */
17
- url?: string;
18
- }
19
- interface NavContextType {
20
- isTransparent: boolean;
21
- }
22
- export declare function NavProvider({ transparentMode, children, }: NavProviderProps & {
23
- children: ReactNode;
24
- }): import("react/jsx-runtime").JSX.Element;
25
- export declare function useNav(): NavContextType;
26
- export declare function Title({ title, url, ...props }: TitleProps & Omit<LinkProps, 'title'>): import("react/jsx-runtime").JSX.Element;
27
- export {};
28
- //# sourceMappingURL=nav.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"nav.d.ts","sourceRoot":"","sources":["../../../src/components/layout/nav.tsx"],"names":[],"mappings":"AACA,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CAC7C;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,cAAc;IACtB,aAAa,EAAE,OAAO,CAAC;CACxB;AAMD,wBAAgB,WAAW,CAAC,EAC1B,eAAwB,EACxB,QAAQ,GACT,EAAE,gBAAgB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAwB5C;AAED,wBAAgB,MAAM,IAAI,cAAc,CAEvC;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,2CAevC"}
@@ -1,32 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import Link from 'fumadocs-core/link';
4
- import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
5
- import { cn } from '../../utils/cn.js';
6
- import { useI18n } from '../../contexts/i18n.js';
7
- const NavContext = createContext({
8
- isTransparent: false,
9
- });
10
- export function NavProvider({ transparentMode = 'none', children, }) {
11
- const [transparent, setTransparent] = useState(transparentMode !== 'none');
12
- useEffect(() => {
13
- if (transparentMode !== 'top')
14
- return;
15
- const listener = () => {
16
- setTransparent(window.scrollY < 10);
17
- };
18
- listener();
19
- window.addEventListener('scroll', listener);
20
- return () => {
21
- window.removeEventListener('scroll', listener);
22
- };
23
- }, [transparentMode]);
24
- return (_jsx(NavContext.Provider, { value: useMemo(() => ({ isTransparent: transparent }), [transparent]), children: children }));
25
- }
26
- export function useNav() {
27
- return useContext(NavContext);
28
- }
29
- export function Title({ title, url, ...props }) {
30
- const { locale } = useI18n();
31
- return (_jsx(Link, { href: url ?? (locale ? `/${locale}` : '/'), ...props, className: cn('inline-flex items-center gap-2.5 font-semibold', props.className), children: title }));
32
- }
@@ -1 +0,0 @@
1
- {"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,oBAAoB,EAGzB,KAAK,cAAc,EAEnB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,2CAqDrD;AAED,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAAE,2CAwC3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CASlE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAarD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAkB3E;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAmCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAmBlE;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAiB/C;AAgBD;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAwDA"}