fumadocs-ui 15.2.15 → 15.3.0

package/dist/style.css

@@ -47,13 +47,24 @@
     --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%);
     --color-fd-secondary-foreground: hsl(0, 0%, 9%);
     --color-fd-accent: hsl(0, 0%, 90.1%);
     --color-fd-accent-foreground: hsl(0, 0%, 9%);
+    --spacing-fd-container: 1400px;
+    --fd-sidebar-width: 0px;
+    --fd-toc-width: 0px;
+    --fd-layout-width: 100vw;
+    --fd-banner-height: 0px;
+    --fd-nav-height: 0px;
+    --fd-tocnav-height: 0px;
+    --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);
@@ -70,17 +81,6 @@
     --animate-fd-enterFromRight: fd-enterFromRight 250ms ease;
     --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
     --animate-fd-exitToRight: fd-exitToRight 250ms ease;
-    --spacing-fd-container: 1400px;
-    --fd-sidebar-width: 0px;
-    --fd-toc-width: 0px;
-    --fd-layout-width: 100vw;
-    --fd-banner-height: 0px;
-    --fd-nav-height: 0px;
-    --fd-tocnav-height: 0px;
-    --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);
   }
 }
 @layer base {
@@ -238,6 +238,9 @@
   .collapse {
     visibility: collapse;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .visible {
     visibility: visible;
   }
@@ -297,8 +300,8 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
-  .inset-y-2 {
-    inset-block: calc(var(--spacing) * 2);
+  .inset-y-3 {
+    inset-block: calc(var(--spacing) * 3);
   }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
@@ -318,6 +321,9 @@
   .top-\(--fd-nav-height\) {
     top: var(--fd-nav-height);
   }
+  .top-\(--fd-sidebar-top\) {
+    top: var(--fd-sidebar-top);
+  }
   .top-\(--fd-top\) {
     top: var(--fd-top);
   }
@@ -424,9 +430,6 @@
   .my-auto {
     margin-block: auto;
   }
-  .-ms-1 {
-    margin-inline-start: calc(var(--spacing) * -1);
-  }
   .-ms-1\.5 {
     margin-inline-start: calc(var(--spacing) * -1.5);
   }
@@ -439,6 +442,9 @@
   .ms-auto {
     margin-inline-start: auto;
   }
+  .-me-\(--fd-sidebar-width\) {
+    margin-inline-end: calc(var(--fd-sidebar-width) * -1);
+  }
   .-me-1\.5 {
     margin-inline-end: calc(var(--spacing) * -1.5);
   }
@@ -914,6 +920,9 @@
   .h-\(--fd-height\) {
     height: var(--fd-height);
   }
+  .h-\(--fd-sidebar-height\) {
+    height: var(--fd-sidebar-height);
+  }
   .h-\(--fd-toc-height\) {
     height: var(--fd-toc-height);
   }
@@ -953,6 +962,9 @@
   .min-h-10 {
     min-height: calc(var(--spacing) * 10);
   }
+  .w-\(--fd-sidebar-width\) {
+    width: var(--fd-sidebar-width);
+  }
   .w-\(--fd-toc-width\) {
     width: var(--fd-toc-width);
   }
@@ -974,6 +986,9 @@
   .w-\[45\%\] {
     width: 45%;
   }
+  .w-\[85\%\] {
+    width: 85%;
+  }
   .w-\[98vw\] {
     width: 98vw;
   }
@@ -995,6 +1010,9 @@
   .max-w-\[240px\] {
     max-width: 240px;
   }
+  .max-w-\[380px\] {
+    max-width: 380px;
+  }
   .max-w-\[400px\] {
     max-width: 400px;
   }
@@ -1034,10 +1052,18 @@
   .origin-\[top_center\] {
     transform-origin: top center;
   }
+  .-translate-x-\(--fd-sidebar-offset\) {
+    --tw-translate-x: calc(var(--fd-sidebar-offset) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-0 {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1131,6 +1157,9 @@
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
+  .gap-3\.5 {
+    gap: calc(var(--spacing) * 3.5);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -1186,6 +1215,10 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-e-xl {
+    border-start-end-radius: var(--radius-xl);
+    border-end-end-radius: var(--radius-xl);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1198,6 +1231,10 @@
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 2px;
   }
+  .border-e {
+    border-inline-end-style: var(--tw-border-style);
+    border-inline-end-width: 1px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1420,8 +1457,8 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
-  .pt-2 {
-    padding-top: calc(var(--spacing) * 2);
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
   }
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
@@ -1550,6 +1587,9 @@
   .opacity-0 {
     opacity: 0%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .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);
@@ -1626,6 +1666,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -1873,6 +1917,11 @@
       animation: var(--animate-fd-dialog-out);
     }
   }
+  .data-\[state\=closed\]\:animate-fd-exitToLeft {
+    &[data-state="closed"] {
+      animation: var(--animate-fd-exitToLeft);
+    }
+  }
   .data-\[state\=closed\]\:animate-fd-fade-out {
     &[data-state="closed"] {
       animation: var(--animate-fd-fade-out);
@@ -1908,6 +1957,11 @@
       animation: var(--animate-fd-dialog-in);
     }
   }
+  .data-\[state\=open\]\:animate-fd-enterFromLeft {
+    &[data-state="open"] {
+      animation: var(--animate-fd-enterFromLeft);
+    }
+  }
   .data-\[state\=open\]\:animate-fd-fade-in {
     &[data-state="open"] {
       animation: var(--animate-fd-fade-in);
@@ -1971,31 +2025,19 @@
       background-color: var(--color-fd-background);
     }
   }
-  .max-md\:bg-fd-background\/80 {
-    @media (width < 48rem) {
-      background-color: color-mix(in srgb, hsl(0, 0%, 96%) 80%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-fd-background) 80%, transparent);
-      }
-    }
-  }
-  .max-md\:text-\[15px\] {
+  .max-md\:pt-6 {
     @media (width < 48rem) {
-      font-size: 15px;
+      padding-top: calc(var(--spacing) * 6);
     }
   }
-  .max-md\:backdrop-blur-lg {
+  .max-md\:pb-4 {
     @media (width < 48rem) {
-      --tw-backdrop-blur: blur(var(--blur-lg));
-      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+      padding-bottom: calc(var(--spacing) * 4);
     }
   }
-  .max-md\:data-\[open\=false\]\:invisible {
+  .max-md\:pb-6 {
     @media (width < 48rem) {
-      &[data-open="false"] {
-        visibility: hidden;
-      }
+      padding-bottom: calc(var(--spacing) * 6);
     }
   }
   .max-sm\:mt-2 {
@@ -2033,19 +2075,14 @@
       position: sticky;
     }
   }
-  .md\:mx-auto {
-    @media (width >= 48rem) {
-      margin-inline: auto;
-    }
-  }
-  .md\:ms-auto {
+  .md\:inset-y-2 {
     @media (width >= 48rem) {
-      margin-inline-start: auto;
+      inset-block: calc(var(--spacing) * 2);
     }
   }
-  .md\:-me-\(--fd-sidebar-width\) {
+  .md\:mx-auto {
     @media (width >= 48rem) {
-      margin-inline-end: calc(var(--fd-sidebar-width) * -1);
+      margin-inline: auto;
     }
   }
   .md\:hidden {
@@ -2053,47 +2090,24 @@
       display: none;
     }
   }
-  .md\:h-\(--fd-sidebar-height\) {
-    @media (width >= 48rem) {
-      height: var(--fd-sidebar-height);
-    }
-  }
   .md\:h-\[calc\(100dvh-56px\)\] {
     @media (width >= 48rem) {
       height: calc(100dvh - 56px);
     }
   }
-  .md\:w-\(--fd-sidebar-width\) {
-    @media (width >= 48rem) {
-      width: var(--fd-sidebar-width);
-    }
-  }
   .md\:w-\[300px\] {
     @media (width >= 48rem) {
       width: 300px;
     }
   }
-  .md\:-translate-x-\(--fd-sidebar-offset\) {
-    @media (width >= 48rem) {
-      --tw-translate-x: calc(var(--fd-sidebar-offset) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
-  .md\:translate-x-0 {
-    @media (width >= 48rem) {
-      --tw-translate-x: calc(var(--spacing) * 0);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-  .md\:border-e {
+  .md\:bg-transparent {
     @media (width >= 48rem) {
-      border-inline-end-style: var(--tw-border-style);
-      border-inline-end-width: 1px;
+      background-color: transparent;
     }
   }
   .md\:px-6 {
@@ -2111,36 +2125,21 @@
       padding-inline-start: var(--fd-layout-offset);
     }
   }
-  .md\:pt-2\.5 {
-    @media (width >= 48rem) {
-      padding-top: calc(var(--spacing) * 2.5);
-    }
-  }
-  .md\:pt-3\.5 {
-    @media (width >= 48rem) {
-      padding-top: calc(var(--spacing) * 3.5);
-    }
-  }
-  .md\:pt-4 {
-    @media (width >= 48rem) {
-      padding-top: calc(var(--spacing) * 4);
-    }
-  }
   .md\:pt-12 {
     @media (width >= 48rem) {
       padding-top: calc(var(--spacing) * 12);
     }
   }
-  .md\:opacity-0 {
+  .md\:text-sm {
     @media (width >= 48rem) {
-      opacity: 0%;
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
-  .md\:transition-all {
+  .md\:text-xs {
     @media (width >= 48rem) {
-      transition-property: all;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
     }
   }
   .md\:\[--fd-nav-height\:0px\] {
@@ -2249,6 +2248,12 @@
       grid-column: 1 / -1;
     }
   }
+  .rtl\:translate-x-\(--fd-sidebar-offset\) {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      --tw-translate-x: var(--fd-sidebar-offset);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .rtl\:-scale-x-100 {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       --tw-scale-x: calc(100% * -1);
@@ -2260,14 +2265,6 @@
       rotate: 180deg;
     }
   }
-  .rtl\:md\:translate-x-\(--fd-sidebar-offset\) {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      @media (width >= 48rem) {
-        --tw-translate-x: var(--fd-sidebar-offset);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-      }
-    }
-  }
   .dark\:bg-\(--shiki-dark-bg\) {
     &:where(.dark, .dark *) {
       background-color: var(--shiki-dark-bg);
@@ -2321,11 +2318,6 @@
       margin: calc(var(--spacing) * -4);
     }
   }
-  .\[\&\>figure\:only-child\]\:rounded-none {
-    &>figure:only-child {
-      border-radius: 0;
-    }
-  }
   .\[\&\>figure\:only-child\]\:border-none {
     &>figure:only-child {
       --tw-border-style: none;
@@ -2347,7 +2339,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%);
@@ -2714,7 +2706,7 @@
 }
 @keyframes fd-dialog-in {
   from {
-    transform: scale(0.95);
+    transform: scale(1.06);
     opacity: 0;
   }
   to {
@@ -2726,18 +2718,18 @@
     transform: scale(1);
   }
   to {
-    transform: scale(0.95);
+    transform: scale(1.06);
     opacity: 0;
   }
 }
 @keyframes fd-popover-in {
   from {
     opacity: 0;
-    transform: scale(0.98) translateY(-4px);
+    transform: translateY(-12px);
   }
   to {
     opacity: 1;
-    transform: scale(1) translateY(0);
+    transform: translateY(0);
   }
 }
 @keyframes fd-popover-out {
@@ -2747,7 +2739,7 @@
   }
   to {
     opacity: 0;
-    transform: translateY(-4px);
+    transform: translateY(-12px);
   }
 }
 @keyframes fd-fade-in {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.2.15",
+  "version": "15.3.0",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -72,35 +72,37 @@
     "css/*"
   ],
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.8",
-    "@radix-ui/react-collapsible": "^1.1.8",
-    "@radix-ui/react-dialog": "^1.1.11",
+    "@radix-ui/react-accordion": "^1.2.10",
+    "@radix-ui/react-collapsible": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.13",
     "@radix-ui/react-direction": "^1.1.1",
-    "@radix-ui/react-navigation-menu": "^1.2.10",
-    "@radix-ui/react-popover": "^1.1.11",
-    "@radix-ui/react-scroll-area": "^1.2.6",
-    "@radix-ui/react-slot": "^1.2.0",
-    "@radix-ui/react-tabs": "^1.1.9",
+    "@radix-ui/react-navigation-menu": "^1.2.12",
+    "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-presence": "^1.1.4",
+    "@radix-ui/react-scroll-area": "^1.2.8",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.11",
     "class-variance-authority": "^0.7.1",
     "lodash.merge": "^4.6.2",
     "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.2.0",
-    "fumadocs-core": "15.2.15"
+    "fumadocs-core": "15.3.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.3.1",
     "@tailwindcss/cli": "^4.1.5",
     "@types/lodash.merge": "^4.6.9",
-    "@types/react": "^19.1.2",
+    "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
     "next": "15.3.1",
     "tailwindcss": "^4.1.5",
-    "tsc-alias": "^1.8.15",
+    "tsc-alias": "^1.8.16",
     "@fumadocs/cli": "0.1.1",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.2.15",
+    "fumadocs-core": "15.3.0",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {