fumadocs-ui 15.5.0 → 15.5.2

package/dist/style.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -32,7 +32,7 @@
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
-    --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --blur-sm: 8px;
     --blur-md: 12px;
     --blur-lg: 16px;
@@ -69,10 +69,10 @@
     --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 240ms cubic-bezier(0.16, 1, 0.3, 1);
-    --animate-fd-dialog-out: fd-dialog-out 240ms cubic-bezier(0.16, 1, 0.3, 1);
-    --animate-fd-popover-in: fd-popover-in 150ms ease;
-    --animate-fd-popover-out: fd-popover-out 150ms ease;
+    --animate-fd-dialog-in: fd-dialog-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
+    --animate-fd-dialog-out: fd-dialog-out 300ms cubic-bezier(0.16, 1, 0.3, 1);
+    --animate-fd-popover-in: fd-popover-in 130ms ease;
+    --animate-fd-popover-out: fd-popover-out 130ms ease;
     --animate-fd-collapsible-down: fd-collapsible-down 150ms
     cubic-bezier(0.45, 0, 0.55, 1);
     --animate-fd-collapsible-up: fd-collapsible-up 150ms
@@ -841,9 +841,6 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
-  .mt-auto {
-    margin-top: auto;
-  }
   .mt-px {
     margin-top: 1px;
   }
@@ -937,6 +934,9 @@
     width: 100%;
     height: 100%;
   }
+  .h-\(--fd-animated-height\) {
+    height: var(--fd-animated-height);
+  }
   .h-\(--fd-height\) {
     height: var(--fd-height);
   }
@@ -1072,6 +1072,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .origin-\(--radix-popover-content-transform-origin\) {
+    transform-origin: var(--radix-popover-content-transform-origin);
+  }
   .origin-\[top_center\] {
     transform-origin: top center;
   }
@@ -1117,8 +1120,8 @@
   .animate-fd-fade-in {
     animation: var(--animate-fd-fade-in);
   }
-  .animate-spin {
-    animation: var(--animate-spin);
+  .animate-pulse {
+    animation: var(--animate-pulse);
   }
   .scroll-m-24 {
     scroll-margin: calc(var(--spacing) * 24);
@@ -1339,8 +1342,11 @@
   .bg-fd-muted {
     background-color: var(--color-fd-muted);
   }
-  .bg-fd-popover {
-    background-color: var(--color-fd-popover);
+  .bg-fd-popover\/60 {
+    background-color: color-mix(in srgb, hsl(0, 0%, 98%) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fd-popover) 60%, transparent);
+    }
   }
   .bg-fd-primary {
     background-color: var(--color-fd-primary);
@@ -1610,6 +1616,10 @@
   .opacity-0 {
     opacity: 0%;
   }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1622,6 +1632,12 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-black\/20 {
+    --tw-shadow-color: color-mix(in srgb, #000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1649,6 +1665,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[height\] {
+    transition-property: height;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[margin\] {
     transition-property: margin;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1691,6 +1712,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-400 {
+    --tw-duration: 400ms;
+    transition-duration: 400ms;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1914,11 +1939,6 @@
       display: none;
     }
   }
-  .data-\[empty\=true\]\:hidden {
-    &[data-empty="true"] {
-      display: none;
-    }
-  }
   .data-\[motion\=from-end\]\:animate-fd-enterFromRight {
     &[data-motion="from-end"] {
       animation: var(--animate-fd-enterFromRight);
@@ -2699,9 +2719,9 @@
   syntax: "*";
   inherits: false;
 }
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
   }
 }
 @keyframes fd-collapsible-down {
@@ -2761,21 +2781,13 @@
 @keyframes fd-popover-in {
   from {
     opacity: 0;
-    transform: translateY(-12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+    transform: translateY(-12px) scale(0.9);
   }
 }
 @keyframes fd-popover-out {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
   to {
     opacity: 0;
-    transform: translateY(-12px);
+    transform: translateY(-12px) scale(0.9);
   }
 }
 @keyframes fd-fade-in {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.5.0",
+  "version": "15.5.2",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -87,31 +87,38 @@
     "next-themes": "^0.4.6",
     "postcss-selector-parser": "^7.1.0",
     "react-medium-image-zoom": "^5.2.14",
-    "react-remove-scroll": "^2.6.3",
-    "tailwind-merge": "^3.3.0",
-    "fumadocs-core": "15.5.0"
+    "react-remove-scroll": "^2.7.1",
+    "tailwind-merge": "^3.3.1",
+    "fumadocs-core": "15.5.2"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.3.3",
-    "@tailwindcss/cli": "^4.1.8",
+    "@tailwindcss/cli": "^4.1.10",
     "@types/lodash.merge": "^4.6.9",
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.5",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "next": "15.3.3",
-    "tailwindcss": "^4.1.8",
+    "tailwindcss": "^4.1.10",
     "tsc-alias": "^1.8.16",
-    "@fumadocs/cli": "0.2.0",
-    "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.5.0",
-    "tsconfig": "0.0.0"
+    "@fumadocs/cli": "0.2.1",
+    "fumadocs-core": "15.5.2",
+    "tsconfig": "0.0.0",
+    "eslint-config-custom": "0.0.0"
   },
   "peerDependencies": {
     "next": "14.x.x || 15.x.x",
     "react": "18.x.x || 19.x.x",
     "react-dom": "18.x.x || 19.x.x",
-    "tailwindcss": "^3.4.14 || ^4.0.0"
+    "tailwindcss": "^3.4.14 || ^4.0.0",
+    "@types/react": "*"
   },
   "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
     "tailwindcss": {
       "optional": true
     }

package/dist/components/ui/hide-if-empty.d.ts

@@ -1,10 +0,0 @@
-/**
- * The built-in CSS `:empty` selector cannot detect if the children is hidden, classes such as `md:hidden` causes it to fail.
- * This component is an enhancement to `empty:hidden` to fix the issue described above.
- *
- * This can be expensive, please avoid this whenever possible.
- */
-export declare function HideIfEmpty({ children }: {
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=hide-if-empty.d.ts.map

package/dist/components/ui/hide-if-empty.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hide-if-empty.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hide-if-empty.tsx"],"names":[],"mappings":"AAoBA;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAgEtE"}

package/dist/components/ui/hide-if-empty.js

@@ -1,66 +0,0 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Slot } from '@radix-ui/react-slot';
-import { useEffect, useId, useRef, useState } from 'react';
-function isEmpty(node) {
-    for (let i = 0; i < node.childNodes.length; i++) {
-        const child = node.childNodes.item(i);
-        if (child.nodeType === Node.TEXT_NODE) {
-            return false;
-        }
-        else if (child.nodeType === Node.ELEMENT_NODE &&
-            window.getComputedStyle(child).display !== 'none') {
-            return false;
-        }
-    }
-    return true;
-}
-/**
- * The built-in CSS `:empty` selector cannot detect if the children is hidden, classes such as `md:hidden` causes it to fail.
- * This component is an enhancement to `empty:hidden` to fix the issue described above.
- *
- * This can be expensive, please avoid this whenever possible.
- */
-export function HideIfEmpty({ children }) {
-    const id = useId();
-    const ref = useRef(null);
-    const [empty, setEmpty] = useState();
-    useEffect(() => {
-        const element = ref.current;
-        if (!element)
-            return;
-        const onUpdate = () => {
-            setEmpty(isEmpty(element));
-        };
-        const observer = new ResizeObserver(onUpdate);
-        observer.observe(element);
-        onUpdate();
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-    const inject = `{
-function isEmpty(node) {
-  for (let i = 0; i < node.childNodes.length; i++) {
-    const child = node.childNodes.item(i);
-    if (child.nodeType === Node.TEXT_NODE) {
-      return false;
-    } else if (
-      child.nodeType === Node.ELEMENT_NODE &&
-      window.getComputedStyle(child).display !== 'none'
-    ) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-const element = document.querySelector('[data-fdid="${id}"]')
-if (element) {
-  element.setAttribute('data-empty', String(isEmpty(element)))
-}}`;
-    return (_jsxs(_Fragment, { children: [_jsx(Slot, { ref: ref, "data-fdid": id, "data-empty": empty, className: "data-[empty=true]:hidden", suppressHydrationWarning: true, children: children }), empty === undefined && (_jsx("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: {
-                    __html: inject,
-                } }))] }));
-}