fumadocs-ui 8.2.0 → 9.0.0

package/dist/components/dialog/search-algolia.js

@@ -2,11 +2,11 @@
 import {
   SearchDialog,
   SearchDialogContent
-} from "../../chunk-UGTA4YYX.js";
+} from "../../chunk-WDMDQTHE.js";
 import "../../chunk-36MVEJ25.js";
 import "../../chunk-YAHHY62W.js";
-import "../../chunk-FAZEWBYX.js";
-import "../../chunk-KCGRUOMD.js";
+import "../../chunk-7GZKFBAP.js";
+import "../../chunk-TK3TM3MR.js";
 import "../../chunk-6C3VEZWH.js";
 
 // src/components/dialog/search-algolia.tsx

package/dist/components/dialog/search-default.js

@@ -2,13 +2,13 @@
 import {
   SearchDialog,
   SearchDialogContent
-} from "../../chunk-UGTA4YYX.js";
+} from "../../chunk-WDMDQTHE.js";
 import "../../chunk-36MVEJ25.js";
 import {
   useI18n
 } from "../../chunk-YAHHY62W.js";
-import "../../chunk-FAZEWBYX.js";
-import "../../chunk-KCGRUOMD.js";
+import "../../chunk-7GZKFBAP.js";
+import "../../chunk-TK3TM3MR.js";
 import "../../chunk-6C3VEZWH.js";
 
 // src/components/dialog/search-default.tsx

package/dist/components/dialog/search.js

@@ -1,11 +1,11 @@
 import {
   SearchDialog,
   SearchDialogContent
-} from "../../chunk-UGTA4YYX.js";
+} from "../../chunk-WDMDQTHE.js";
 import "../../chunk-36MVEJ25.js";
 import "../../chunk-YAHHY62W.js";
-import "../../chunk-FAZEWBYX.js";
-import "../../chunk-KCGRUOMD.js";
+import "../../chunk-7GZKFBAP.js";
+import "../../chunk-TK3TM3MR.js";
 import "../../chunk-6C3VEZWH.js";
 export {
   SearchDialog,

package/dist/components/files.d.mts

@@ -1,20 +1,20 @@
 import { HTMLAttributes, ReactNode } from 'react';
 
 declare function Files({ className, ...props }: HTMLAttributes<HTMLDivElement>): JSX.Element;
-interface FileProps {
-    title: string;
+interface FileProps extends HTMLAttributes<HTMLDivElement> {
+    name: string;
     icon?: ReactNode;
+}
+interface FolderProps extends HTMLAttributes<HTMLDivElement> {
+    name: string;
     /**
      * Open folder by default
      *
      * @defaultValue false
      */
     defaultOpen?: boolean;
-    /**
-     * hildren files of the folder, considered as file if empty
-     */
-    children?: ReactNode;
 }
-declare function File({ title, icon, defaultOpen, children, }: FileProps): JSX.Element;
+declare function File({ name, icon, className, ...rest }: FileProps): JSX.Element;
+declare function Folder({ name, defaultOpen, ...props }: FolderProps): JSX.Element;
 
-export { File, Files };
+export { File, type FileProps, Files, Folder, type FolderProps };

package/dist/components/files.js

@@ -3,15 +3,16 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger
-} from "../chunk-5EZE3X7G.js";
+} from "../chunk-7XPZOMJ2.js";
 import {
-  cn
-} from "../chunk-KCGRUOMD.js";
+  twMerge
+} from "../chunk-TK3TM3MR.js";
 import "../chunk-6C3VEZWH.js";
 
 // src/components/files.tsx
 import { cva } from "class-variance-authority";
 import { FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var item = cva(
   "flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground [&_svg]:size-4"
@@ -23,34 +24,39 @@ function Files({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("not-prose rounded-md border bg-card p-2", className),
+      className: twMerge("not-prose rounded-md border bg-card p-2", className),
       ...props,
       children: props.children
     }
   );
 }
 function File({
-  title,
-  icon,
-  defaultOpen,
-  children
+  name,
+  icon = /* @__PURE__ */ jsx(FileIcon, {}),
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: twMerge(item({ className })), ...rest, children: [
+    icon,
+    name
+  ] });
+}
+function Folder({
+  name,
+  defaultOpen = false,
+  ...props
 }) {
-  if (!children) {
-    return /* @__PURE__ */ jsxs("p", { className: cn(item()), children: [
-      icon ?? /* @__PURE__ */ jsx(FileIcon, {}),
-      title
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, children: [
-    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: cn(item({ className: "group w-full" })), children: [
-      /* @__PURE__ */ jsx(FolderIcon, { className: "group-data-[state=open]:hidden" }),
-      /* @__PURE__ */ jsx(FolderOpenIcon, { className: "group-data-[state=closed]:hidden" }),
-      title
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, ...props, children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: twMerge(item({ className: "w-full" })), children: [
+      open ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {}),
+      name
     ] }),
-    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ml-4 flex flex-col border-l py-2 pl-2", children }) })
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ml-2 flex flex-col border-l pl-2", children: props.children }) })
   ] });
 }
 export {
   File,
-  Files
+  Files,
+  Folder
 };

package/dist/components/heading.js

@@ -1,7 +1,7 @@
 import {
   Heading
-} from "../chunk-CBOHU2VN.js";
-import "../chunk-KCGRUOMD.js";
+} from "../chunk-UKE65HV3.js";
+import "../chunk-TK3TM3MR.js";
 import "../chunk-6C3VEZWH.js";
 export {
   Heading

package/dist/components/inline-toc.d.mts

@@ -1,11 +1,9 @@
 import { TOCItemType } from 'fumadocs-core/server';
-import { ReactNode } from 'react';
 
 interface InlineTocProps {
     items: TOCItemType[];
     defaultOpen?: boolean;
-    children?: ReactNode;
 }
-declare function InlineTOC({ items, defaultOpen, children, }: InlineTocProps): JSX.Element;
+declare function InlineTOC({ items, defaultOpen }: InlineTocProps): JSX.Element;
 
 export { InlineTOC, type InlineTocProps };

package/dist/components/inline-toc.js

@@ -3,42 +3,31 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger
-} from "../chunk-5EZE3X7G.js";
-import "../chunk-KCGRUOMD.js";
+} from "../chunk-7XPZOMJ2.js";
+import "../chunk-TK3TM3MR.js";
 import "../chunk-6C3VEZWH.js";
 
 // src/components/inline-toc.tsx
 import { ChevronDown } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function InlineTOC({
-  items,
-  defaultOpen,
-  children
-}) {
+function InlineTOC({ items, defaultOpen }) {
   return /* @__PURE__ */ jsxs(
     Collapsible,
     {
       defaultOpen,
       className: "not-prose rounded-lg border bg-card text-card-foreground",
       children: [
-        /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: "inline-flex w-full items-center justify-between p-4 text-medium font-medium [&[data-state=open]>svg]:rotate-180",
-            children: [
-              "Table of Contents",
-              /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 transition-transform duration-200" })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col px-6 pb-4 text-sm text-muted-foreground", children: items.map((item) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "inline-flex w-full items-center justify-between p-4 font-medium [&[data-state=open]>svg]:rotate-180", children: [
+          "Table of Contents",
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 transition-transform duration-200" })
+        ] }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col p-4 pt-0 text-sm text-muted-foreground", children: items.map((item) => /* @__PURE__ */ jsx(
           "a",
           {
             href: item.url,
-            className: "py-1.5 hover:text-accent-foreground",
+            className: "border-l py-1.5 hover:text-accent-foreground",
             style: {
-              paddingLeft: 16 * Math.max(item.depth - 2, 0)
+              paddingLeft: 12 * Math.max(item.depth - 1, 0)
             },
             children: item.title
           },

package/dist/components/roll-button.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   buttonVariants
-} from "../chunk-FAZEWBYX.js";
+} from "../chunk-7GZKFBAP.js";
 import {
-  cn
-} from "../chunk-KCGRUOMD.js";
+  twMerge
+} from "../chunk-TK3TM3MR.js";
 import "../chunk-6C3VEZWH.js";
 
 // src/components/roll-button.tsx
@@ -31,7 +31,7 @@ function RollButton({ percentage = 0.2 }) {
     {
       type: "button",
       "aria-label": "Scroll to Top",
-      className: cn(
+      className: twMerge(
         buttonVariants({
           color: "secondary",
           size: "icon",

package/dist/components/tabs.d.mts

@@ -1,12 +1,12 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { TabsContentProps } from '@radix-ui/react-tabs';
-import * as react from 'react';
+import * as React from 'react';
 import { ReactNode } from 'react';
 
-declare const Tabs$1: react.ForwardRefExoticComponent<TabsPrimitive.TabsProps & react.RefAttributes<HTMLDivElement>>;
-declare const TabsList: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-declare const TabsContent: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const Tabs$1: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 declare const tabs_TabsContent: typeof TabsContent;
 declare const tabs_TabsList: typeof TabsList;

package/dist/components/tabs.js

@@ -1,7 +1,7 @@
 "use client";
 import {
-  cn
-} from "../chunk-KCGRUOMD.js";
+  twMerge
+} from "../chunk-TK3TM3MR.js";
 import {
   __export
 } from "../chunk-6C3VEZWH.js";
@@ -25,7 +25,7 @@ var TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   TabsPrimitive.List,
   {
     ref,
-    className: cn(
+    className: twMerge(
       "inline-flex h-9 w-full items-end gap-2 overflow-x-auto text-muted-foreground shadow-[0_-1px_0_var(--tw-shadow)_inset] shadow-border",
       className
     ),
@@ -37,7 +37,7 @@ var TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   TabsPrimitive.Trigger,
   {
     ref,
-    className: cn(
+    className: twMerge(
       "whitespace-nowrap border-b border-transparent p-1.5 text-sm font-medium hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-primary data-[state=active]:text-primary",
       className
     ),
@@ -49,7 +49,7 @@ var TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   TabsPrimitive.Content,
   {
     ref,
-    className: cn("mt-2 focus-visible:outline-none", className),
+    className: twMerge("mt-2 focus-visible:outline-none", className),
     ...props
   }
 ));
@@ -129,7 +129,7 @@ function Tab({
     TabsContent,
     {
       value: toValue(value),
-      className: cn("prose-no-margin", className),
+      className: twMerge("prose-no-margin", className),
       ...props
     }
   );

package/dist/components/type-table.js

@@ -3,10 +3,10 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "../chunk-GZQICERS.js";
+} from "../chunk-CYNHK27D.js";
 import {
-  cn
-} from "../chunk-KCGRUOMD.js";
+  twMerge
+} from "../chunk-TK3TM3MR.js";
 import "../chunk-6C3VEZWH.js";
 
 // src/components/type-table.tsx
@@ -22,19 +22,19 @@ function Info({ children }) {
 function TypeTable({
   type
 }) {
-  const th = cn("p-2 font-medium first:pl-0 last:pr-0");
-  const td = cn("p-2 first:pl-0 last:pr-0");
-  const field = cn("inline-flex flex-row items-center gap-1");
-  const code = cn("rounded-md bg-secondary p-1 text-secondary-foreground");
+  const th = twMerge("p-2 font-medium first:pl-0 last:pr-0");
+  const td = twMerge("p-2 first:pl-0 last:pr-0");
+  const field = twMerge("inline-flex flex-row items-center gap-1");
+  const code = twMerge("rounded-md bg-secondary p-1 text-secondary-foreground");
   return /* @__PURE__ */ jsx("div", { className: "not-prose overflow-auto whitespace-nowrap", children: /* @__PURE__ */ jsxs("table", { className: "my-4 w-full text-left text-sm text-muted-foreground", children: [
     /* @__PURE__ */ jsx("thead", { className: "border-b", children: /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx("th", { className: cn(th, "w-[45%]"), children: "Prop" }),
-      /* @__PURE__ */ jsx("th", { className: cn(th, "w-[30%]"), children: "Type" }),
-      /* @__PURE__ */ jsx("th", { className: cn(th, "w-[25%]"), children: "Default" })
+      /* @__PURE__ */ jsx("th", { className: twMerge(th, "w-[45%]"), children: "Prop" }),
+      /* @__PURE__ */ jsx("th", { className: twMerge(th, "w-[30%]"), children: "Type" }),
+      /* @__PURE__ */ jsx("th", { className: twMerge(th, "w-[25%]"), children: "Default" })
     ] }) }),
     /* @__PURE__ */ jsx("tbody", { className: "border-collapse divide-y divide-border", children: Object.entries(type).map(([key, value]) => /* @__PURE__ */ jsxs("tr", { children: [
       /* @__PURE__ */ jsx("td", { className: td, children: /* @__PURE__ */ jsxs("div", { className: field, children: [
-        /* @__PURE__ */ jsx("code", { className: cn(code, "bg-primary/10 text-primary"), children: key }),
+        /* @__PURE__ */ jsx("code", { className: twMerge(code, "bg-primary/10 text-primary"), children: key }),
         value.description ? /* @__PURE__ */ jsx(Info, { children: value.description }) : null
       ] }) }),
       /* @__PURE__ */ jsx("td", { className: td, children: /* @__PURE__ */ jsxs("div", { className: field, children: [

package/dist/i18n.js

@@ -4,8 +4,8 @@ import {
   useI18n
 } from "./chunk-YAHHY62W.js";
 import {
-  cn
-} from "./chunk-KCGRUOMD.js";
+  twMerge
+} from "./chunk-TK3TM3MR.js";
 import "./chunk-6C3VEZWH.js";
 
 // src/i18n.tsx
@@ -23,8 +23,8 @@ var SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) =>
   SelectPrimitive.Trigger,
   {
     ref,
-    className: cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground",
+    className: twMerge(
+      "flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground",
       className
     ),
     ...props,
@@ -39,7 +39,7 @@ var SelectContent = React.forwardRef(({ className, children, position = "popper"
   SelectPrimitive.Content,
   {
     ref,
-    className: cn(
+    className: twMerge(
       "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-popover-out data-[state=open]:animate-popover-in",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
@@ -49,7 +49,7 @@ var SelectContent = React.forwardRef(({ className, children, position = "popper"
     children: /* @__PURE__ */ jsx(
       SelectPrimitive.Viewport,
       {
-        className: cn(
+        className: twMerge(
           "p-1",
           position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         ),
@@ -63,7 +63,7 @@ var SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   SelectPrimitive.Label,
   {
     ref,
-    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    className: twMerge("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
     ...props
   }
 ));
@@ -72,7 +72,7 @@ var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /*
   SelectPrimitive.Item,
   {
     ref,
-    className: cn(
+    className: twMerge(
       "relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -88,7 +88,7 @@ var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__P
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: twMerge("-mx-1 my-1 h-px bg-muted", className),
     ...props
   }
 ));

package/dist/layout.client.js

@@ -8,12 +8,12 @@ import {
 } from "./chunk-UIZNMCLD.js";
 import {
   ScrollArea
-} from "./chunk-OG3QOLYP.js";
+} from "./chunk-ZOR33LFA.js";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "./chunk-GZQICERS.js";
+} from "./chunk-CYNHK27D.js";
 import {
   hasActive,
   isActive
@@ -28,13 +28,13 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger
-} from "./chunk-5EZE3X7G.js";
+} from "./chunk-7XPZOMJ2.js";
 import {
   buttonVariants
-} from "./chunk-FAZEWBYX.js";
+} from "./chunk-7GZKFBAP.js";
 import {
-  cn
-} from "./chunk-KCGRUOMD.js";
+  twMerge
+} from "./chunk-TK3TM3MR.js";
 import "./chunk-6C3VEZWH.js";
 
 // src/components/nav.tsx
@@ -66,8 +66,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants2 = cva("size-7 rounded-full p-1.5 text-muted-foreground", {
   variants: {
     dark: {
-      true: "dark:bg-accent dark:text-accent-foreground",
-      false: "bg-accent text-accent-foreground dark:bg-transparent dark:text-muted-foreground"
+      true: "dark:bg-secondary dark:text-secondary-foreground",
+      false: "bg-secondary text-secondary-foreground dark:bg-transparent dark:text-muted-foreground"
     }
   }
 });
@@ -83,7 +83,7 @@ function ThemeToggle({
     "button",
     {
       type: "button",
-      className: cn(
+      className: twMerge(
         "inline-flex items-center rounded-full border p-0.5",
         className
       ),
@@ -91,8 +91,8 @@ function ThemeToggle({
       onClick: onToggle,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(SunIcon, { className: cn(buttonVariants2({ dark: false })) }),
-        /* @__PURE__ */ jsx(MoonIcon, { className: cn(buttonVariants2({ dark: true })) })
+        /* @__PURE__ */ jsx(SunIcon, { className: twMerge(buttonVariants2({ dark: false })) }),
+        /* @__PURE__ */ jsx(MoonIcon, { className: twMerge(buttonVariants2({ dark: true })) })
       ]
     }
   );
@@ -126,7 +126,7 @@ function Nav({
   return /* @__PURE__ */ jsx2(
     "header",
     {
-      className: cn(
+      className: twMerge(
         "sticky top-0 z-50 h-16 border-b transition-colors",
         transparent ? "border-transparent" : "border-foreground/10 bg-background/50 backdrop-blur-md"
       ),
@@ -144,7 +144,7 @@ function Nav({
             /* @__PURE__ */ jsx2(
               PopoverTrigger,
               {
-                className: cn(
+                className: twMerge(
                   buttonVariants({
                     size: "icon",
                     color: "ghost",
@@ -155,20 +155,14 @@ function Nav({
               }
             ),
             /* @__PURE__ */ jsxs2(PopoverContent, { className: "flex min-w-[260px] flex-col px-3 py-1", children: [
-              items.map((item) => /* @__PURE__ */ jsx2(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsx2(
-                NavItem,
-                {
-                  item,
-                  className: "py-2 text-medium font-medium"
-                }
-              ) }, item.url)),
+              items.map((item) => /* @__PURE__ */ jsx2(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsx2(NavItem, { item, className: "py-2 text-lg font-medium" }) }, item.url)),
               /* @__PURE__ */ jsx2(ThemeToggle, { className: "w-fit" })
             ] })
           ] }),
           /* @__PURE__ */ jsx2(
             "div",
             {
-              className: cn(
+              className: twMerge(
                 "flex flex-row items-center border-l pl-2 max-md:hidden",
                 links.length === 0 && "hidden"
               ),
@@ -178,7 +172,7 @@ function Nav({
                   "aria-label": item.label,
                   href: item.href,
                   external: item.external,
-                  className: cn(buttonVariants({ size: "icon", color: "ghost" })),
+                  className: twMerge(buttonVariants({ size: "icon", color: "ghost" })),
                   children: item.icon
                 },
                 item.href
@@ -202,7 +196,7 @@ function SearchToggle() {
       "button",
       {
         type: "button",
-        className: cn(
+        className: twMerge(
           buttonVariants({
             size: "icon",
             color: "ghost",
@@ -239,7 +233,7 @@ function SidebarToggle({ collapsible }) {
       SidebarTrigger,
       {
         "aria-label": "Toggle Sidebar",
-        className: cn(
+        className: twMerge(
           buttonVariants({
             size: "icon",
             color: "ghost",
@@ -257,7 +251,7 @@ function SidebarToggle({ collapsible }) {
         onClick: () => {
           setOpen(!open);
         },
-        className: cn(
+        className: twMerge(
           buttonVariants({
             color: "outline",
             size: "icon",
@@ -278,7 +272,7 @@ var NavItem = forwardRef(({ item, className, ...props }, ref) => {
       ref,
       href: url,
       external,
-      className: cn(
+      className: twMerge(
         "text-sm text-muted-foreground",
         isActive(url, pathname) ? "font-medium text-accent-foreground" : "transition-colors hover:text-accent-foreground",
         className
@@ -324,8 +318,8 @@ function Sidebar({
     Base.SidebarList,
     {
       minWidth: 768,
-      className: cn(
-        "flex w-full flex-col text-medium",
+      className: twMerge(
+        "flex w-full flex-col text-[15px]",
         !open ? "md:hidden" : "md:sticky md:top-16 md:h-body md:w-[240px] md:text-sm xl:w-[260px]",
         "max-md:fixed max-md:inset-0 max-md:z-40 max-md:bg-background/80 max-md:pt-16 max-md:backdrop-blur-md max-md:data-[open=false]:hidden"
       ),
@@ -338,7 +332,7 @@ function Sidebar({
         /* @__PURE__ */ jsxs3(
           "div",
           {
-            className: cn(
+            className: twMerge(
               "flex flex-row items-center gap-2 border-t py-2 max-md:px-4",
               !footer && "md:hidden"
             ),
@@ -382,7 +376,7 @@ function BaseItem({
     {
       href: item.url,
       external: item.external,
-      className: cn(itemVariants({ active })),
+      className: twMerge(itemVariants({ active })),
       children: [
         item.icon,
         item.text
@@ -418,7 +412,7 @@ function Folder({
           setExtend((prev) => !prev);
           e.preventDefault();
         },
-        className: cn("ml-auto transition-transform", !extend && "-rotate-90")
+        className: twMerge("ml-auto transition-transform", !extend && "-rotate-90")
       }
     )
   ] });
@@ -431,7 +425,7 @@ function Folder({
         /* @__PURE__ */ jsx3(
           CollapsibleTrigger,
           {
-            className: cn(itemVariants({ active, className: "w-full" })),
+            className: twMerge(itemVariants({ active, className: "w-full" })),
             asChild: true,
             children: index ? /* @__PURE__ */ jsx3(Link2, { href: index.url, children: content }) : /* @__PURE__ */ jsx3("button", { type: "button", children: content })
           }

package/dist/layout.js

@@ -7,8 +7,8 @@ import {
   replaceOrDefault
 } from "./chunk-EDUYFB4P.js";
 import {
-  cn
-} from "./chunk-KCGRUOMD.js";
+  twMerge
+} from "./chunk-TK3TM3MR.js";
 import "./chunk-6C3VEZWH.js";
 
 // src/layout.tsx
@@ -40,7 +40,7 @@ function DocsLayout({
       "div",
       {
         ...containerProps,
-        className: cn(
+        className: twMerge(
           "container flex flex-row gap-6 xl:gap-12",
           containerProps?.className
         ),