fumadocs-ui 15.2.14 → 15.3.0

package/css/black.css

@@ -7,7 +7,7 @@
   --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
   --color-fd-card: hsl(0, 0%, 99.7%);
   --color-fd-card-foreground: hsl(0, 0%, 3.9%);
-  --color-fd-border: hsl(0, 0%, 89.8%);
+  --color-fd-border: hsla(0, 0%, 60%, 0.2);
   --color-fd-primary: hsl(0, 0%, 9%);
   --color-fd-primary-foreground: hsl(0, 0%, 98%);
   --color-fd-secondary: hsl(0, 0%, 96.1%);
@@ -26,7 +26,7 @@
   --color-fd-popover-foreground: hsl(0, 0%, 98%);
   --color-fd-card: hsl(0, 0%, 4%);
   --color-fd-card-foreground: hsl(0, 0%, 98%);
-  --color-fd-border: hsl(0, 0%, 14%);
+  --color-fd-border: hsl(0, 0%, 50%, 0.2);
   --color-fd-primary: hsl(0, 0%, 98%);
   --color-fd-primary-foreground: hsl(0, 0%, 9%);
   --color-fd-secondary: hsl(0, 0%, 12.9%);

package/css/neutral.css

@@ -7,7 +7,7 @@
   --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
   --color-fd-card: hsl(0, 0%, 94.7%);
   --color-fd-card-foreground: hsl(0, 0%, 3.9%);
-  --color-fd-border: hsl(0, 0%, 89.8%);
+  --color-fd-border: hsla(0, 0%, 62%, 20%);
   --color-fd-primary: hsl(0, 0%, 9%);
   --color-fd-primary-foreground: hsl(0, 0%, 98%);
   --color-fd-secondary: hsl(0, 0%, 93.1%);
@@ -26,7 +26,7 @@
   --color-fd-popover-foreground: hsl(0, 0%, 88%);
   --color-fd-card: hsl(0, 0%, 9.8%);
   --color-fd-card-foreground: hsl(0, 0%, 98%);
-  --color-fd-border: hsl(0, 0%, 14%);
+  --color-fd-border: hsla(0, 0%, 40%, 20%);
   --color-fd-primary: hsl(0, 0%, 98%);
   --color-fd-primary-foreground: hsl(0, 0%, 9%);
   --color-fd-secondary: hsl(0, 0%, 12.9%);

package/css/ocean.css

@@ -18,15 +18,15 @@
 }
 
 .dark {
-  --color-fd-background: hsl(220, 60%, 6%);
+  --color-fd-background: hsl(220, 60%, 8%);
   --color-fd-foreground: hsl(220, 60%, 94.5%);
   --color-fd-muted: hsl(220, 50%, 10%);
   --color-fd-muted-foreground: hsl(220, 30%, 65%);
   --color-fd-popover: hsl(220, 50%, 10%);
   --color-fd-popover-foreground: hsl(220, 60%, 94.5%);
-  --color-fd-card: hsl(220, 50%, 10%);
+  --color-fd-card: hsla(220, 56%, 15%, 0.4);
   --color-fd-card-foreground: hsl(220, 60%, 94.5%);
-  --color-fd-border: hsl(220, 50%, 20%);
+  --color-fd-border: hsla(220, 50%, 50%, 0.2);
   --color-fd-primary: hsl(205, 100%, 85%);
   --color-fd-primary-foreground: hsl(0, 0%, 9%);
   --color-fd-secondary: hsl(220, 50%, 20%);

package/css/preset.css

@@ -1,5 +1,4 @@
 @import './shiki.css';
-@import './animations.css';
 
 @source '../dist/**/*.js';
 @plugin '../dist/theme/typography/index.js';
@@ -13,10 +12,200 @@
   --fd-nav-height: 0px;
   --fd-tocnav-height: 0px;
 
-  --fd-diff-remove-color: rgba(200, 10, 100, 0.12);
-  --fd-diff-remove-symbol-color: rgb(230, 10, 100);
-  --fd-diff-add-color: rgba(14, 180, 100, 0.12);
-  --fd-diff-add-symbol-color: rgb(10, 200, 100);
+  --color-fd-diff-remove: rgba(200, 10, 100, 0.12);
+  --color-fd-diff-remove-symbol: rgb(230, 10, 100);
+  --color-fd-diff-add: rgba(14, 180, 100, 0.12);
+  --color-fd-diff-add-symbol: rgb(10, 200, 100);
+
+  --animate-fd-fade-in: fd-fade-in 300ms ease;
+  --animate-fd-fade-out: fd-fade-out 300ms ease;
+
+  --animate-fd-dialog-in: fd-dialog-in 200ms cubic-bezier(0.32, 0.72, 0, 1);
+  --animate-fd-dialog-out: fd-dialog-out 300ms cubic-bezier(0.32, 0.72, 0, 1);
+
+  --animate-fd-popover-in: fd-popover-in 150ms ease;
+  --animate-fd-popover-out: fd-popover-out 150ms ease;
+
+  --animate-fd-collapsible-down: fd-collapsible-down 150ms ease-out;
+  --animate-fd-collapsible-up: fd-collapsible-up 150ms ease-out;
+
+  --animate-fd-accordion-down: fd-accordion-down 200ms ease-out;
+  --animate-fd-accordion-up: fd-accordion-up 200ms ease-out;
+
+  --animate-fd-nav-menu-in: fd-nav-menu-in 200ms ease;
+  --animate-fd-nav-menu-out: fd-nav-menu-out 200ms ease;
+
+  --animate-fd-enterFromLeft: fd-enterFromLeft 250ms ease;
+  --animate-fd-enterFromRight: fd-enterFromRight 250ms ease;
+
+  --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
+  --animate-fd-exitToRight: fd-exitToRight 250ms ease;
+
+  @keyframes fd-collapsible-down {
+    from {
+      height: 0;
+      opacity: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes fd-collapsible-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+      opacity: 0;
+    }
+  }
+
+  @keyframes fd-accordion-down {
+    from {
+      height: 0;
+      opacity: 0.5;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes fd-accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes fd-dialog-in {
+    from {
+      transform: scale(1.06);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes fd-dialog-out {
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(1.06);
+      opacity: 0;
+    }
+  }
+
+  @keyframes fd-popover-in {
+    from {
+      opacity: 0;
+      transform: translateY(-12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fd-popover-out {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-12px);
+    }
+  }
+
+  @keyframes fd-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fd-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes fd-enterFromRight {
+    from {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fd-enterFromLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fd-exitToRight {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+  }
+
+  @keyframes fd-exitToLeft {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+  }
+
+  @keyframes fd-nav-menu-in {
+    from {
+      opacity: 0;
+      height: 0px;
+    }
+    to {
+      opacity: 1;
+      height: var(--radix-navigation-menu-viewport-height);
+    }
+  }
+
+  @keyframes fd-nav-menu-out {
+    from {
+      opacity: 1;
+      height: var(--radix-navigation-menu-viewport-height);
+    }
+    to {
+      opacity: 0;
+      height: 0px;
+    }
+  }
 }
 
 @layer base {

package/css/purple.css

@@ -1,8 +1,8 @@
 @theme {
   --color-fd-background: hsl(256, 100%, 96%);
   --color-fd-primary: hsl(270, 100%, 52%);
-  --color-fd-border: hsl(270, 40%, 80%);
-  --color-fd-accent: hsl(270, 60%, 86%);
+  --color-fd-border: hsla(270, 40%, 80%, 0.5);
+  --color-fd-accent: hsl(270, 40%, 88%);
   --color-fd-accent-foreground: hsl(270, 100%, 20%);
   --color-fd-muted: hsl(256, 60%, 94%);
   --color-fd-muted-foreground: hsl(256, 50%, 50%);
@@ -18,20 +18,20 @@
 }
 
 .dark {
-  --color-fd-background: hsl(256, 60%, 6%);
+  --color-fd-background: hsl(256, 20%, 6%);
   --color-fd-primary: hsl(270, 100%, 86%);
-  --color-fd-border: hsl(270, 100%, 20%);
-  --color-fd-accent: hsl(256, 60%, 26%);
-  --color-fd-accent-foreground: hsl(270, 100%, 86%);
-  --color-fd-muted: hsl(256, 60%, 10%);
+  --color-fd-border: hsla(270, 50%, 40%, 0.3);
+  --color-fd-accent: hsl(256, 23%, 22%);
+  --color-fd-accent-foreground: hsl(270, 40%, 86%);
+  --color-fd-muted: hsl(256, 23%, 10%);
   --color-fd-foreground: hsl(256, 60%, 90%);
   --color-fd-muted-foreground: hsl(256, 50%, 75%);
-  --color-fd-secondary: hsl(270, 100%, 20%);
+  --color-fd-secondary: hsl(270, 23%, 20%);
   --color-fd-secondary-foreground: hsl(256, 60%, 90%);
-  --color-fd-card: hsl(256, 60%, 10%);
+  --color-fd-card: hsl(256, 23%, 10%);
   --color-fd-card-foreground: hsl(256, 60%, 90%);
   --color-fd-popover-foreground: hsl(256, 60%, 90%);
-  --color-fd-popover: hsl(256, 60%, 6%);
+  --color-fd-popover: hsl(256, 23%, 6%);
   --color-fd-primary-foreground: hsl(256, 60%, 6%);
   --color-fd-ring: hsl(270, 100%, 86%);
 }

package/css/shiki.css

@@ -1,51 +1,42 @@
-.fd-codeblock pre > * {
-  display: grid;
-  font-size: 13px;
-}
-
 .shiki:not(.not-fumadocs-codeblock *) {
   code span {
     color: var(--shiki-light);
   }
 
-  code .diff.remove {
-    background-color: var(--fd-diff-remove-color);
-    opacity: 0.7;
-  }
-
   code .diff::before {
     position: absolute;
     left: 6px;
   }
 
+  code .diff.remove {
+    opacity: 0.7;
+    @apply bg-fd-diff-remove;
+  }
+
   code .diff.remove::before {
     content: '-';
-    color: var(--fd-diff-remove-symbol-color);
+    @apply text-fd-diff-remove-symbol;
   }
 
   code .diff.add {
-    background-color: var(--fd-diff-add-color);
+    @apply bg-fd-diff-add;
   }
 
   code .diff.add::before {
     content: '+';
-    color: var(--fd-diff-add-symbol-color);
+    @apply text-fd-diff-add-symbol;
   }
 
   code .diff {
-    margin: 0 -16px;
-    padding: 0 16px;
-    position: relative;
+    width: calc(100% + 8 * var(--spacing));
+
+    @apply relative inline-block -mx-4 px-4;
   }
 
   .highlighted {
-    margin: 0 -16px;
-    padding: 0 16px;
-    background-color: color-mix(
-      in oklab,
-      var(--color-fd-primary) 10%,
-      transparent
-    );
+    width: calc(100% + 8 * var(--spacing));
+
+    @apply inline-block -mx-4 px-4 bg-fd-primary/10;
   }
 
   .highlighted-word {

package/dist/components/accordion.js

@@ -21,7 +21,7 @@ Accordions.displayName = 'Accordions';
 export const Accordion = forwardRef(({ title, className, id, children, ...props }, ref) => {
     return (_jsxs(AccordionPrimitive.Item, { ref: ref, 
         // Use `id` instead if presents
-        value: id ?? title, className: cn('group/accordion relative scroll-m-20', className), ...props, children: [_jsxs(AccordionPrimitive.Header, { id: id, 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: "flex flex-1 items-center gap-2 px-4 py-2.5 text-start focus-visible:outline-none", children: [_jsx(ChevronRight, { className: "-ms-1 size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]/accordion: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 py-2 prose-no-margin", children: children }) })] }));
+        value: id ?? title, className: cn('group/accordion relative scroll-m-20', className), ...props, children: [_jsxs(AccordionPrimitive.Header, { id: id, 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: "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]/accordion: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 }) })] }));
 });
 function CopyButton({ id }) {
     const [checked, onClick] = useCopyButton(() => {

package/dist/components/codeblock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,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,uBAAuB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAxCpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,uBAAuB;+CAkGxC,CAAC"}
+{"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;AASf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,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,uBAAuB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAxCpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,uBAAuB;+CAiGxC,CAAC"}

package/dist/components/codeblock.js

@@ -1,18 +1,18 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Copy } from '../icons.js';
-import { forwardRef, useCallback, useRef, } from 'react';
+import { forwardRef, useRef, } from 'react';
 import { cn } from '../utils/cn.js';
 import { ScrollArea, ScrollBar, ScrollViewport, } from '../components/ui/scroll-area.js';
 import { useCopyButton } from '../utils/use-copy-button.js';
 import { buttonVariants } from '../components/ui/button.js';
 export const Pre = forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("pre", { ref: ref, className: cn('p-4 focus-visible:outline-none', className), ...props, children: props.children }));
+    return (_jsx("pre", { ref: ref, className: cn('text-[13px] p-4 *:block *:w-full', className), ...props, children: props.children }));
 });
 Pre.displayName = 'Pre';
 export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground = false, icon, viewportProps, ...props }, ref) => {
     const areaRef = useRef(null);
-    const onCopy = useCallback(() => {
+    const onCopy = () => {
         const pre = areaRef.current?.getElementsByTagName('pre').item(0);
         if (!pre)
             return;
@@ -21,8 +21,8 @@ export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground =
             node.remove();
         });
         void navigator.clipboard.writeText(clone.textContent ?? '');
-    }, []);
-    return (_jsxs("figure", { ref: ref, ...props, className: cn('not-prose group fd-codeblock relative my-4 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)', props.className), children: [title ? (_jsxs("div", { className: "flex items-center gap-2 border-b bg-fd-muted px-4 py-1.5", children: [icon ? (_jsx("div", { className: "text-fd-muted-foreground [&_svg]:size-3.5", dangerouslySetInnerHTML: typeof icon === 'string'
+    };
+    return (_jsxs("figure", { ref: ref, ...props, className: cn('not-prose group relative my-4 overflow-hidden rounded-lg border bg-fd-card text-sm outline-none', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)', props.className), children: [title ? (_jsxs("div", { className: "flex items-center gap-2 bg-fd-secondary px-4 py-1.5", children: [icon ? (_jsx("div", { className: "text-fd-muted-foreground [&_svg]:size-3.5", dangerouslySetInnerHTML: typeof icon === 'string'
                             ? {
                                 __html: icon,
                             }

package/dist/components/layout/root-toggle.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 export interface Option {
     /**
      * Redirect URL of the folder, usually the index page
@@ -11,10 +11,10 @@ export interface Option {
      * Detect from a list of urls
      */
     urls?: Set<string>;
-    props?: HTMLAttributes<HTMLElement>;
+    props?: ComponentProps<'a'>;
 }
 export declare function RootToggle({ options, placeholder, ...props }: {
     placeholder?: ReactNode;
     options: Option[];
-} & HTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+} & ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=root-toggle.d.ts.map

package/dist/components/layout/root-toggle.d.ts.map

@@ -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,WAAW,CAAC,CAAC;CACrC;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,iBAAiB,CAAC,2CAyDpC"}
+{"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"}

package/dist/components/layout/root-toggle.js

@@ -27,5 +27,5 @@ export function RootToggle({ options, placeholder, ...props }) {
                         : 'hover:bg-fd-accent/50', item.props?.className), children: _jsx(Item, { ...item }) }, item.url))) })] }));
 }
 function Item(props) {
-    return (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: props.icon }), _jsxs("div", { className: "flex-1 text-start", children: [_jsx("p", { className: "text-sm font-medium", children: props.title }), props.description ? (_jsx("p", { className: "text-xs text-fd-muted-foreground", children: props.description })) : null] })] }));
+    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] })] }));
 }

package/dist/components/layout/sidebar.d.ts

@@ -1,9 +1,9 @@
-import { type ButtonHTMLAttributes, type FC, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentProps, type FC, type ReactNode } from 'react';
 import { type LinkProps } from 'fumadocs-core/link';
 import { type ScrollAreaProps } from '@radix-ui/react-scroll-area';
 import type { CollapsibleContentProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
 import type { PageTree } from 'fumadocs-core/server';
-export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+export interface SidebarProps extends ComponentProps<'aside'> {
     /**
      * Open folders by default if their level is lower or equal to a specific level
      * (Starting from 1)
@@ -17,25 +17,28 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
      * @defaultValue true
      */
     prefetch?: boolean;
+    /**
+     * Support collapsing the sidebar on desktop mode
+     *
+     * @defaultValue true
+     */
+    collapsible?: boolean;
 }
-export declare function CollapsibleSidebar(props: SidebarProps): import("react/jsx-runtime").JSX.Element;
-export declare function Sidebar({ defaultOpenLevel, prefetch, inner, ...props }: SidebarProps & {
-    inner?: HTMLAttributes<HTMLDivElement>;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarHeader(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarFooter(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ defaultOpenLevel, prefetch, collapsible, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarHeader(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFooter(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarViewport(props: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarSeparator(props: HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarSeparator(props: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarItem({ icon, ...props }: LinkProps & {
     icon?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarFolder({ defaultOpen, ...props }: HTMLAttributes<HTMLDivElement> & {
+export declare function SidebarFolder({ defaultOpen, ...props }: ComponentProps<'div'> & {
     defaultOpen?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarFolderTrigger(props: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarFolderLink(props: LinkProps): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarFolderContent(props: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarCollapseTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
 export interface SidebarComponents {
     Item: FC<{
         item: PageTree.Item;

package/dist/components/layout/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,EAAE,EAEP,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,2CAuDrD;AAED,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;CAAE,2CAwC3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CASlE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAYlE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAarD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,oBAAoB,CAAC,2CAkB3E;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAmCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAmBlE;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,2CAiB/C;AAgBD,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"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EAGP,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,2CAkHd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAYzD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAYzD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAarD;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,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAmCjD;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"}