fumadocs-ui 16.0.12 → 16.0.14

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.
@@ -29,7 +29,7 @@ export const Accordions = forwardRef(({ type = 'single', className, defaultValue
29
29
  });
30
30
  Accordions.displayName = 'Accordions';
31
31
  export const Accordion = forwardRef(({ title, className, id, value = String(title), children, ...props }, ref) => {
32
- return (_jsxs(AccordionPrimitive.Item, { ref: ref, value: value, className: cn('scroll-m-24', className), ...props, children: [_jsxs(AccordionPrimitive.Header, { id: id, "data-accordion-value": value, className: "not-prose flex flex-row items-center text-fd-card-foreground font-medium has-focus-visible:bg-fd-accent", children: [_jsxs(AccordionPrimitive.Trigger, { className: "group flex flex-1 items-center gap-2 px-3 py-2.5 text-start focus-visible:outline-none", children: [_jsx(ChevronRight, { className: "size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-90" }), title] }), id ? _jsx(CopyButton, { id: id }) : null] }), _jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down", children: _jsx("div", { className: "px-4 pb-2 text-[15px] prose-no-margin", children: children }) })] }));
32
+ return (_jsxs(AccordionPrimitive.Item, { ref: ref, value: value, className: cn('scroll-m-24', className), ...props, children: [_jsxs(AccordionPrimitive.Header, { id: id, "data-accordion-value": value, className: "not-prose flex flex-row items-center text-fd-card-foreground font-medium has-focus-visible:bg-fd-accent", children: [_jsxs(AccordionPrimitive.Trigger, { className: "group flex flex-1 items-center gap-2 px-3 py-2.5 text-start focus-visible:outline-none", children: [_jsx(ChevronRight, { className: "size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-90" }), title] }), id ? _jsx(CopyButton, { id: id }) : null] }), _jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down", children: _jsx("div", { className: "px-4 pb-2 text-[0.9375rem] prose-no-margin", children: children }) })] }));
33
33
  });
34
34
  function CopyButton({ id }) {
35
35
  const [checked, onClick] = useCopyButton(() => {
@@ -24,7 +24,7 @@ export function CodeBlock({ ref, title, allowCopy = true, keepBackground = false
24
24
  })] })) : (Actions({
25
25
  className: 'absolute top-2 right-2 z-2 backdrop-blur-lg rounded-lg text-fd-muted-foreground',
26
26
  children: allowCopy && _jsx(CopyButton, { containerRef: areaRef }),
27
- })), _jsx("div", { ref: areaRef, ...viewportProps, role: "region", tabIndex: 0, className: cn('text-[13px] py-3.5 overflow-auto max-h-[600px] fd-scroll-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fd-ring', viewportProps.className), style: {
27
+ })), _jsx("div", { ref: areaRef, ...viewportProps, role: "region", tabIndex: 0, className: cn('text-[0.8125rem] py-3.5 overflow-auto max-h-[600px] fd-scroll-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fd-ring', viewportProps.className), style: {
28
28
  // space for toolbar
29
29
  '--padding-right': !title ? 'calc(var(--spacing) * 8)' : undefined,
30
30
  counterSet: props['data-line-numbers']
@@ -19,11 +19,11 @@ export function RootToggle({ options, placeholder, ...props }) {
19
19
  closeOnRedirect.current = false;
20
20
  setOpen(false);
21
21
  };
22
- const item = selected ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "size-9 shrink-0 empty:hidden 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);
22
+ const item = selected ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "size-9 shrink-0 empty:hidden md:size-5", children: selected.icon }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: selected.title }), _jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden md:hidden", children: selected.description })] })] })) : (placeholder);
23
23
  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: "shrink-0 ms-auto size-4 text-fd-muted-foreground" })] })), _jsx(PopoverContent, { className: "flex flex-col gap-1 w-(--radix-popover-trigger-width) p-1 fd-scroll-container", children: options.map((item) => {
24
24
  const isActive = selected && item.url === selected.url;
25
25
  if (!isActive && item.unlisted)
26
26
  return;
27
- 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: "shrink-0 size-9 md:mt-1 md:mb-auto md:size-5 empty:hidden", 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('shrink-0 ms-auto size-3.5 text-fd-primary', !isActive && 'invisible') })] }, item.url));
27
+ 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: "shrink-0 size-9 md:mt-1 md:mb-auto md:size-5 empty:hidden", children: item.icon }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: item.title }), _jsx("p", { className: "text-[0.8125rem] text-fd-muted-foreground empty:hidden", children: item.description })] }), _jsx(Check, { className: cn('shrink-0 ms-auto size-3.5 text-fd-primary', !isActive && 'invisible') })] }, item.url));
28
28
  }) })] }));
29
29
  }
@@ -79,7 +79,7 @@ export function SidebarContent(props) {
79
79
  export function SidebarContentMobile({ className, children, ...props }) {
80
80
  const { open, setOpen } = useSidebar();
81
81
  const state = open ? 'open' : 'closed';
82
- return (_jsxs(_Fragment, { 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 border-s end-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', className), children: children })) })] }));
82
+ return (_jsxs(_Fragment, { 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-[0.9375rem] flex flex-col shadow-lg border-s end-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', className), children: children })) })] }));
83
83
  }
84
84
  export function SidebarHeader(props) {
85
85
  return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 p-4 pb-2', props.className), children: props.children }));
@@ -34,7 +34,7 @@ export function Tab({ value, ...props }) {
34
34
  return (_jsx(TabsContent, { value: escapeValue(resolved), ...props, children: props.children }));
35
35
  }
36
36
  export function TabsContent({ value, className, ...props }) {
37
- return (_jsx(Unstyled.TabsContent, { value: value, forceMount: true, className: cn('p-4 text-[15px] bg-fd-background rounded-xl outline-none prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none', className), ...props, children: props.children }));
37
+ return (_jsx(Unstyled.TabsContent, { value: value, forceMount: true, className: cn('p-4 text-[0.9375rem] bg-fd-background rounded-xl outline-none prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none', className), ...props, children: props.children }));
38
38
  }
39
39
  /**
40
40
  * Inspired by Headless UI.
@@ -47,7 +47,7 @@ export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { t
47
47
  size: 'icon-sm',
48
48
  className: 'p-2',
49
49
  })), children: _jsx(SidebarIcon, {}) })] }), tabs.length > 0 && _jsx(RootToggle, { options: tabs }), banner] }), viewport, _jsx(SidebarFooter, { className: "empty:hidden", children: footer })] }));
50
- const content = (_jsxs(SidebarContent, { ...rest, children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex", 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, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
50
+ const content = (_jsxs(SidebarContent, { ...rest, children: [_jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, collapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
51
51
  color: 'ghost',
52
52
  size: 'icon-sm',
53
53
  className: 'mb-auto text-fd-muted-foreground',
@@ -1,5 +1,5 @@
1
1
  import { type ComponentProps } from 'react';
2
- import { LinkItemType } from '../../layouts/shared/index.js';
2
+ import { type LinkItemType } from '../../layouts/shared/index.js';
3
3
  import { NavigationMenuContent, NavigationMenuItem, NavigationMenuTrigger } from '../../components/ui/navigation-menu.js';
4
4
  export declare const navItemVariants: (props?: ({
5
5
  variant?: "button" | "main" | "icon" | null | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/client.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAsB,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAgB,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAEL,qBAAqB,EACrB,kBAAkB,EAGlB,qBAAqB,EAEtB,MAAM,iCAAiC,CAAC;AAIzC,eAAO,MAAM,eAAe;;8EAiB1B,CAAC;AAEH,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CA2BlD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CA0EA;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAyDA;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAChD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CASA;AAED,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,2CAUpD"}
1
+ {"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/client.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAsB,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAEL,qBAAqB,EACrB,kBAAkB,EAGlB,qBAAqB,EAEtB,MAAM,iCAAiC,CAAC;AAIzC,eAAO,MAAM,eAAe;;8EAiB1B,CAAC;AAEH,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CA2BlD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CA0EA;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAyDA;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAChD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CASA;AAED,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,2CAUpD"}
@@ -41,7 +41,7 @@ export function NavigationMenuLinkItem({ item, ...props }) {
41
41
  return _jsx(Fragment, { children: child.children }, j);
42
42
  }
43
43
  const { banner = child.icon ? (_jsx("div", { className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4", children: child.icon })) : null, ...rest } = child.menu ?? {};
44
- return (_jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { href: child.url, external: child.external, ...rest, className: cn('flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground', rest.className), children: rest.children ?? (_jsxs(_Fragment, { children: [banner, _jsx("p", { className: "text-[15px] font-medium", children: child.text }), _jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden", children: child.description })] })) }) }, `${j}-${child.url}`));
44
+ return (_jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { href: child.url, external: child.external, ...rest, className: cn('flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground', rest.className), children: rest.children ?? (_jsxs(_Fragment, { children: [banner, _jsx("p", { className: "text-base font-medium", children: child.text }), _jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden", children: child.description })] })) }) }, `${j}-${child.url}`));
45
45
  });
46
46
  return (_jsxs(NavigationMenuItem, { ...props, children: [_jsx(NavigationMenuTrigger, { className: cn(navItemVariants(), 'rounded-md'), children: item.url ? (_jsx(Link, { href: item.url, external: item.external, children: item.text })) : (item.text) }), _jsx(NavigationMenuContent, { className: "grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", children: children })] }));
47
47
  }
package/dist/style.css CHANGED
@@ -15,6 +15,8 @@
15
15
  --text-xs--line-height: calc(1 / 0.75);
16
16
  --text-sm: 0.875rem;
17
17
  --text-sm--line-height: calc(1.25 / 0.875);
18
+ --text-base: 1rem;
19
+ --text-base--line-height: calc(1.5 / 1);
18
20
  --text-lg: 1.125rem;
19
21
  --text-lg--line-height: calc(1.75 / 1.125);
20
22
  --text-2xl: 1.5rem;
@@ -1578,6 +1580,10 @@
1578
1580
  font-size: var(--text-3xl);
1579
1581
  line-height: var(--tw-leading, var(--text-3xl--line-height));
1580
1582
  }
1583
+ .text-base {
1584
+ font-size: var(--text-base);
1585
+ line-height: var(--tw-leading, var(--text-base--line-height));
1586
+ }
1581
1587
  .text-lg {
1582
1588
  font-size: var(--text-lg);
1583
1589
  line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -1590,14 +1596,14 @@
1590
1596
  font-size: var(--text-xs);
1591
1597
  line-height: var(--tw-leading, var(--text-xs--line-height));
1592
1598
  }
1593
- .text-\[1\.75em\] {
1594
- font-size: 1.75em;
1599
+ .text-\[0\.8125rem\] {
1600
+ font-size: 0.8125rem;
1595
1601
  }
1596
- .text-\[13px\] {
1597
- font-size: 13px;
1602
+ .text-\[0\.9375rem\] {
1603
+ font-size: 0.9375rem;
1598
1604
  }
1599
- .text-\[15px\] {
1600
- font-size: 15px;
1605
+ .text-\[1\.75em\] {
1606
+ font-size: 1.75em;
1601
1607
  }
1602
1608
  .font-medium {
1603
1609
  --tw-font-weight: var(--font-weight-medium);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fumadocs-ui",
3
- "version": "16.0.12",
3
+ "version": "16.0.14",
4
4
  "description": "The framework for building a documentation website in Next.js",
5
5
  "keywords": [
6
6
  "NextJs",
@@ -121,7 +121,7 @@
121
121
  "react-medium-image-zoom": "^5.4.0",
122
122
  "scroll-into-view-if-needed": "^3.1.0",
123
123
  "tailwind-merge": "^3.4.0",
124
- "fumadocs-core": "16.0.12"
124
+ "fumadocs-core": "16.0.14"
125
125
  },
126
126
  "devDependencies": {
127
127
  "@next/eslint-plugin-next": "16.0.3",
@@ -135,7 +135,7 @@
135
135
  "tsc-alias": "^1.8.16",
136
136
  "@fumadocs/cli": "1.0.3",
137
137
  "eslint-config-custom": "0.0.0",
138
- "fumadocs-core": "16.0.12",
138
+ "fumadocs-core": "16.0.14",
139
139
  "tsconfig": "0.0.0"
140
140
  },
141
141
  "peerDependencies": {