UI: Fix empty folder animation problems

.changeset/small-kids-confess.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix empty folder animation problems

apps/docs/components/preview/index.tsx

@@ -132,6 +132,7 @@ export default {
           <File name="button.tsx" />
           <File name="tabs.tsx" />
           <File name="dialog.tsx" />
+          <Folder name="empty" />
         </Folder>
         <File name="package.json" />
       </Files>

packages/ui/src/components/ui/collapsible.tsx

@@ -9,15 +9,15 @@ const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 const CollapsibleContent = forwardRef<
   React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
   React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
->(({ className, children, ...props }, ref) => {
+>(({ children, ...props }, ref) => {
   return (
     <CollapsiblePrimitive.CollapsibleContent
       ref={ref}
-      className={cn(
-        'overflow-hidden data-[state=closed]:animate-fd-collapsible-up data-[state=open]:animate-fd-collapsible-down',
-        className,
-      )}
       {...props}
+      className={cn(
+        'overflow-hidden [--radix-collapsible-content-height:0px] data-[state=closed]:animate-fd-collapsible-up data-[state=open]:animate-fd-collapsible-down',
+        props.className,
+      )}
     >
       {children}
     </CollapsiblePrimitive.CollapsibleContent>