fumadocs-ui 15.5.3 → 15.5.5

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