fumadocs-ui 8.2.0 → 8.3.0

package/dist/{chunk-TSEDUE4C.js → chunk-3YZ7NCMG.js}

@@ -1,15 +1,15 @@
 import {
   ScrollArea
-} from "./chunk-OG3QOLYP.js";
+} from "./chunk-ZOR33LFA.js";
 import {
   useCopyButton
 } from "./chunk-24NYFO7H.js";
 import {
   buttonVariants
-} from "./chunk-FAZEWBYX.js";
+} from "./chunk-7GZKFBAP.js";
 import {
-  cn
-} from "./chunk-KCGRUOMD.js";
+  twMerge
+} from "./chunk-TK3TM3MR.js";
 
 // src/components/codeblock.tsx
 import { CheckIcon, CopyIcon } from "lucide-react";
@@ -17,7 +17,7 @@ import { forwardRef, useCallback, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Pre = forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("pre", { ref, className: cn("nd-codeblock py-4", className), ...props, children: props.children });
+    return /* @__PURE__ */ jsx("pre", { ref, className: twMerge("nd-codeblock py-4", className), ...props, children: props.children });
   }
 );
 Pre.displayName = "Pre";
@@ -39,7 +39,7 @@ var CodeBlock = forwardRef(
       "figure",
       {
         ref,
-        className: cn(
+        className: twMerge(
           "not-prose group relative my-6 overflow-hidden rounded-lg border bg-secondary/50 text-sm",
           className
         ),
@@ -73,7 +73,7 @@ function CopyButton({
     "button",
     {
       type: "button",
-      className: cn(
+      className: twMerge(
         buttonVariants({
           color: "ghost",
           className: "transition-all group-hover:opacity-100"
@@ -88,13 +88,13 @@ function CopyButton({
         /* @__PURE__ */ jsx(
           CheckIcon,
           {
-            className: cn("size-3.5 transition-transform", !checked && "scale-0")
+            className: twMerge("size-3.5 transition-transform", !checked && "scale-0")
           }
         ),
         /* @__PURE__ */ jsx(
           CopyIcon,
           {
-            className: cn(
+            className: twMerge(
               "absolute size-3.5 transition-transform",
               checked && "scale-0"
             )

package/dist/{chunk-FAZEWBYX.js → chunk-7GZKFBAP.js}

@@ -10,7 +10,7 @@ var buttonVariants = cva(
         secondary: "border bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground"
       },
       size: {
-        lg: "px-4 py-2 text-medium",
+        lg: "px-4 py-2 text-[15px]",
         icon: "p-1.5 [&_svg]:size-5"
       }
     }

package/dist/{chunk-5EZE3X7G.js → chunk-7XPZOMJ2.js}

@@ -1,6 +1,6 @@
 import {
-  cn
-} from "./chunk-KCGRUOMD.js";
+  twMerge
+} from "./chunk-TK3TM3MR.js";
 
 // src/components/ui/collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
@@ -13,7 +13,7 @@ var CollapsibleContent2 = forwardRef(({ className, children, ...props }, ref) =>
     CollapsiblePrimitive.CollapsibleContent,
     {
       ref,
-      className: cn(
+      className: twMerge(
         "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
         className
       ),

package/dist/{chunk-GZQICERS.js → chunk-CYNHK27D.js}

@@ -1,6 +1,6 @@
 import {
-  cn
-} from "./chunk-KCGRUOMD.js";
+  twMerge
+} from "./chunk-TK3TM3MR.js";
 
 // src/components/ui/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -15,7 +15,7 @@ var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset
     align,
     sideOffset,
     side: "bottom",
-    className: cn(
+    className: twMerge(
       "z-50 max-w-[90vw] rounded-md border bg-popover p-2 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-popover-out data-[state=open]:animate-popover-in",
       className
     ),

package/dist/{chunk-F62NYOL5.js → chunk-REAI3OOF.js}

@@ -1,6 +1,6 @@
 import {
-  cn
-} from "./chunk-KCGRUOMD.js";
+  twMerge
+} from "./chunk-TK3TM3MR.js";
 
 // src/components/card.tsx
 import Link from "fumadocs-core/link";
@@ -10,7 +10,7 @@ function Cards(props) {
     "div",
     {
       ...props,
-      className: cn("grid grid-cols-1 gap-4 sm:grid-cols-2", props.className),
+      className: twMerge("grid grid-cols-1 gap-4 sm:grid-cols-2", props.className),
       children: props.children
     }
   );
@@ -25,7 +25,7 @@ function Card({
     Link,
     {
       ...props,
-      className: cn(
+      className: twMerge(
         "not-prose block rounded-lg border bg-card p-4 text-sm text-card-foreground shadow-md transition-colors hover:bg-muted/80",
         props.className
       ),

package/dist/chunk-TK3TM3MR.js

@@ -0,0 +1,6 @@
+// src/utils/cn.ts
+import { twMerge } from "tailwind-merge";
+
+export {
+  twMerge
+};

package/dist/{chunk-CBOHU2VN.js → chunk-UKE65HV3.js}

@@ -1,6 +1,6 @@
 import {
-  cn
-} from "./chunk-KCGRUOMD.js";
+  twMerge
+} from "./chunk-TK3TM3MR.js";
 
 // src/components/heading.tsx
 import { LinkIcon } from "lucide-react";
@@ -11,7 +11,7 @@ function Heading({
   ...props
 }) {
   const As = as ?? "h1";
-  return /* @__PURE__ */ jsx(As, { className: cn("scroll-m-20", className), ...props, children: props.id ? /* @__PURE__ */ jsxs("a", { href: `#${props.id}`, className: "not-prose group", children: [
+  return /* @__PURE__ */ jsx(As, { className: twMerge("scroll-m-20", className), ...props, children: props.id ? /* @__PURE__ */ jsxs("a", { href: `#${props.id}`, className: "not-prose group", children: [
     props.children,
     /* @__PURE__ */ jsx(
       LinkIcon,

package/dist/{chunk-UGTA4YYX.js → chunk-WDMDQTHE.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-YAHHY62W.js";
 import {
   buttonVariants
-} from "./chunk-FAZEWBYX.js";
+} from "./chunk-7GZKFBAP.js";
 import {
-  cn
-} from "./chunk-KCGRUOMD.js";
+  twMerge
+} from "./chunk-TK3TM3MR.js";
 
 // src/components/dialog/search.tsx
 import { FileTextIcon, HashIcon, TextIcon } from "lucide-react";
@@ -32,7 +32,7 @@ var DialogContent = React.forwardRef(({ className, children, ...props }, ref) =>
     DialogPrimitive.Content,
     {
       ref,
-      className: cn(
+      className: twMerge(
         "fixed left-[50%] top-[10vh] z-50 w-[98vw] max-w-[640px] origin-left translate-x-[-50%] rounded-lg border bg-popover p-6 text-popover-foreground shadow-lg data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in",
         className
       ),
@@ -49,7 +49,7 @@ function DialogHeader({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(
+      className: twMerge(
         "flex flex-col space-y-1.5 text-center sm:text-left",
         className
       ),
@@ -62,7 +62,7 @@ function DialogFooter({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("mt-auto flex flex-col p-3", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: twMerge("mt-auto flex flex-col p-3", className), ...props });
 }
 DialogFooter.displayName = "DialogFooter";
 var DialogClose = DialogPrimitive.Close;
@@ -73,7 +73,7 @@ var Command = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   CommandPrimitive,
   {
     ref,
-    className: cn("flex max-h-[80vh] flex-col", className),
+    className: twMerge("flex max-h-[80vh] flex-col", className),
     shouldFilter: false,
     loop: true,
     ...props
@@ -86,7 +86,7 @@ var CommandInput = React2.forwardRef(({ className, ...props }, ref) => /* @__PUR
     CommandPrimitive.Input,
     {
       ref,
-      className: cn(
+      className: twMerge(
         "w-full bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
         className
       ),
@@ -96,7 +96,7 @@ var CommandInput = React2.forwardRef(({ className, ...props }, ref) => /* @__PUR
   /* @__PURE__ */ jsx2(
     DialogClose,
     {
-      className: cn(
+      className: twMerge(
         buttonVariants({
           color: "outline",
           size: "icon",
@@ -112,7 +112,7 @@ var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   CommandPrimitive.List,
   {
     ref,
-    className: cn("max-h-[460px] overflow-y-auto border-t p-2", className),
+    className: twMerge("max-h-[460px] overflow-y-auto border-t p-2", className),
     ...props
   }
 ));
@@ -130,7 +130,7 @@ var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PUR
   CommandPrimitive.Group,
   {
     ref,
-    className: cn(
+    className: twMerge(
       "overflow-hidden [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
       className
     ),
@@ -142,7 +142,7 @@ var CommandSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @_
   CommandPrimitive.Separator,
   {
     ref,
-    className: cn("h-px bg-border", className),
+    className: twMerge("h-px bg-border", className),
     ...props
   }
 ));
@@ -151,7 +151,7 @@ var CommandItem = React2.forwardRef(({ className, icon, nested = false, children
   CommandPrimitive.Item,
   {
     ref,
-    className: cn(
+    className: twMerge(
       "select-none rounded-lg px-2 text-sm aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -159,7 +159,7 @@ var CommandItem = React2.forwardRef(({ className, icon, nested = false, children
     children: /* @__PURE__ */ jsxs2(
       "div",
       {
-        className: cn(
+        className: twMerge(
           "flex min-h-10 items-center gap-3",
           nested && "ml-2 gap-2 border-l pl-4"
         ),
@@ -214,7 +214,7 @@ function Search2({ search, onSearchChange, results }) {
         placeholder: text.search
       }
     ),
-    /* @__PURE__ */ jsxs3(CommandList, { className: cn(hideList && "hidden"), children: [
+    /* @__PURE__ */ jsxs3(CommandList, { className: twMerge(hideList && "hidden"), children: [
       /* @__PURE__ */ jsx3(CommandEmpty, { children: text.searchNoResult }),
       /* @__PURE__ */ jsx3(CommandGroup, { value: "result", children: items.map((item) => /* @__PURE__ */ jsx3(
         CommandItem,

package/dist/{chunk-OG3QOLYP.js → chunk-ZOR33LFA.js}

@@ -1,6 +1,6 @@
 import {
-  cn
-} from "./chunk-KCGRUOMD.js";
+  twMerge
+} from "./chunk-TK3TM3MR.js";
 
 // src/components/ui/scroll-area.tsx
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
@@ -10,7 +10,7 @@ var ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /*
   ScrollAreaPrimitive.Root,
   {
     ref,
-    className: cn("overflow-hidden", className),
+    className: twMerge("overflow-hidden", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
@@ -26,7 +26,7 @@ var ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...prop
   {
     ref,
     orientation,
-    className: cn(
+    className: twMerge(
       "flex select-none data-[state=hidden]:animate-fade-out",
       orientation === "vertical" && "h-full w-1.5",
       orientation === "horizontal" && "h-1.5 flex-col",

package/dist/components/accordion.js

@@ -4,10 +4,10 @@ import {
 } from "../chunk-24NYFO7H.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/accordion.tsx
@@ -20,7 +20,9 @@ import {
 } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
-var variants = cva("divide-y divide-border");
+var variants = cva(
+  "divide-y divide-border overflow-hidden rounded-lg border bg-card"
+);
 var Accordions = forwardRef((props, ref) => {
   if (props.type === "multiple") {
     return /* @__PURE__ */ jsx(MultipleAccordions, { ref, ...props });
@@ -49,7 +51,7 @@ var MultipleAccordions = forwardRef(({ className, defaultValue, ...props }, ref)
       ref,
       value,
       onValueChange: setValue,
-      className: cn(variants(), className),
+      className: twMerge(variants(), className),
       ...props
     }
   );
@@ -70,29 +72,34 @@ var SingleAccordions = forwardRef(({ className, defaultValue, ...props }, ref) =
       value,
       onValueChange: setValue,
       collapsible: true,
-      className: cn(variants(), className),
+      className: twMerge(variants(), className),
       ...props
     }
   );
 });
 SingleAccordions.displayName = "SingleAccordions";
-var Accordion = forwardRef(({ title, className, children, ...props }, ref) => {
+var Accordion = forwardRef(({ title, className, id, children, ...props }, ref) => {
   return /* @__PURE__ */ jsxs(
     AccordionPrimitive.Item,
     {
       ref,
-      value: props.id ?? title,
-      className: cn("group/accordion scroll-m-20", className),
+      value: id ?? title,
+      className: twMerge("group/accordion relative scroll-m-20", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs(AccordionPrimitive.Header, { className: "not-prose flex items-center text-medium text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, { className: "flex w-full items-center gap-1 py-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [
-            /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-5 transition-transform duration-200 group-data-[state=open]/accordion:rotate-90" }),
-            /* @__PURE__ */ jsx("span", { className: "text-medium font-medium text-foreground", children: title })
-          ] }),
-          props.id ? /* @__PURE__ */ jsx(CopyButton, { id: props.id }) : null
-        ] }),
-        /* @__PURE__ */ jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", children: /* @__PURE__ */ jsx("div", { className: "pb-4 pl-6 text-sm prose-no-margin", children }) })
+        /* @__PURE__ */ jsx(
+          AccordionPrimitive.Header,
+          {
+            id,
+            className: "not-prose font-medium text-foreground",
+            children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, { className: "flex w-full items-center gap-2 p-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [
+              /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 text-muted-foreground transition-transform duration-200 group-data-[state=open]/accordion:rotate-90" }),
+              title
+            ] })
+          }
+        ),
+        id ? /* @__PURE__ */ jsx(CopyButton, { id }) : null,
+        /* @__PURE__ */ jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", children: /* @__PURE__ */ jsx("div", { className: "ml-2 p-4 pt-0 prose-no-margin", children }) })
       ]
     }
   );
@@ -108,10 +115,10 @@ function CopyButton({ id }) {
     {
       type: "button",
       "aria-label": "Copy Link",
-      className: cn(
+      className: twMerge(
         buttonVariants({
           color: "ghost",
-          className: "opacity-0 transition-all group-data-[state=open]/accordion:opacity-100"
+          className: "absolute top-4 right-4 text-muted-foreground"
         })
       ),
       onClick,

package/dist/components/api.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/api.tsx
@@ -19,7 +19,7 @@ function Root({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("space-y-24 text-sm text-muted-foreground", className),
+      className: twMerge("space-y-24 text-sm text-muted-foreground", className),
       ...props,
       children
     }
@@ -33,7 +33,7 @@ function API({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex flex-col gap-x-6 gap-y-2 xl:flex-row", className),
+      className: twMerge("flex flex-col gap-x-6 gap-y-2 xl:flex-row", className),
       ...props,
       children
     }
@@ -62,9 +62,9 @@ function APIInfo({
     color = "yellow";
   if (["DELETE"].includes(method))
     color = "red";
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex-1", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { className: twMerge("flex-1", className), ...props, children: [
     /* @__PURE__ */ jsxs("h2", { className: "not-prose mb-2 inline-flex items-center gap-3 font-mono", children: [
-      /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ color })), children: method }),
+      /* @__PURE__ */ jsx("div", { className: twMerge(badgeVariants({ color })), children: method }),
       /* @__PURE__ */ jsx("p", { className: "text-xs", children: route })
     ] }),
     children
@@ -80,8 +80,8 @@ function Property({
   return /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-col rounded-lg border bg-card p-3 prose-no-margin", children: [
     /* @__PURE__ */ jsxs("h4", { className: "inline-flex items-center gap-4", children: [
       /* @__PURE__ */ jsx("code", { children: name }),
-      required ? /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ color: "red" })), children: "Required" }) : null,
-      deprecated ? /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ color: "yellow" })), children: "Deprecated" }) : null,
+      required ? /* @__PURE__ */ jsx("div", { className: twMerge(badgeVariants({ color: "red" })), children: "Required" }) : null,
+      deprecated ? /* @__PURE__ */ jsx("div", { className: twMerge(badgeVariants({ color: "yellow" })), children: "Deprecated" }) : null,
       /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[13px] text-muted-foreground", children: type })
     ] }),
     children
@@ -96,7 +96,7 @@ function APIExample({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(
+      className: twMerge(
         "sticky top-14 h-fit xl:w-[40%] xl:min-w-[400px]",
         className
       ),
@@ -108,7 +108,7 @@ function APIExample({
             "button",
             {
               type: "button",
-              className: cn(
+              className: twMerge(
                 buttonVariants({
                   color: "secondary",
                   size: "lg"
@@ -122,7 +122,7 @@ function APIExample({
           ),
           /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn(!isOpen && "max-xl:hidden"), children })
+        /* @__PURE__ */ jsx("div", { className: twMerge(!isOpen && "max-xl:hidden"), children })
       ]
     }
   );

package/dist/components/callout.js

@@ -1,6 +1,6 @@
 import {
-  cn
-} from "../chunk-KCGRUOMD.js";
+  twMerge
+} from "../chunk-TK3TM3MR.js";
 import "../chunk-6C3VEZWH.js";
 
 // src/components/callout.tsx
@@ -13,7 +13,7 @@ var Callout = forwardRef(
       "div",
       {
         ref,
-        className: cn(
+        className: twMerge(
           "my-6 flex flex-row gap-2 rounded-lg border bg-card p-3 text-sm text-muted-foreground shadow-md",
           className
         ),

package/dist/components/card.js

@@ -1,8 +1,8 @@
 import {
   Card,
   Cards
-} from "../chunk-F62NYOL5.js";
-import "../chunk-KCGRUOMD.js";
+} from "../chunk-REAI3OOF.js";
+import "../chunk-TK3TM3MR.js";
 import "../chunk-6C3VEZWH.js";
 export {
   Card,

package/dist/components/codeblock.js

@@ -2,11 +2,11 @@
 import {
   CodeBlock,
   Pre
-} from "../chunk-TSEDUE4C.js";
-import "../chunk-OG3QOLYP.js";
+} from "../chunk-3YZ7NCMG.js";
+import "../chunk-ZOR33LFA.js";
 import "../chunk-24NYFO7H.js";
-import "../chunk-FAZEWBYX.js";
-import "../chunk-KCGRUOMD.js";
+import "../chunk-7GZKFBAP.js";
+import "../chunk-TK3TM3MR.js";
 import "../chunk-6C3VEZWH.js";
 export {
   CodeBlock,

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(props: FileProps): JSX.Element;
+declare function Folder({ name, defaultOpen, ...props }: FolderProps): JSX.Element;
 
-export { File, Files };
+export { File, type FileProps, Files, Folder, type FolderProps };