fumadocs-ui 15.5.4 → 15.6.0

package/dist/style.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -7,10 +7,6 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-red-500: oklch(63.7% 0.237 25.331);
-    --color-amber-500: oklch(76.9% 0.188 70.08);
-    --color-green-500: oklch(72.3% 0.219 149.579);
-    --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-black: #000;
     --spacing: 0.25rem;
     --breakpoint-sm: 40rem;
@@ -34,7 +30,6 @@
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --blur-xs: 4px;
     --blur-sm: 8px;
-    --blur-md: 12px;
     --blur-lg: 16px;
     --blur-xl: 24px;
     --default-transition-duration: 150ms;
@@ -56,6 +51,10 @@
     --color-fd-secondary-foreground: hsl(0, 0%, 9%);
     --color-fd-accent: hsla(0, 0%, 82%, 50%);
     --color-fd-accent-foreground: hsl(0, 0%, 9%);
+    --color-fd-info: oklch(62.3% 0.214 259.815);
+    --color-fd-warning: oklch(76.9% 0.188 70.08);
+    --color-fd-error: oklch(63.7% 0.237 25.331);
+    --color-fd-success: oklch(72.3% 0.219 149.579);
     --spacing-fd-container: 1400px;
     --fd-page-width: 1200px;
     --fd-sidebar-width: 0px;
@@ -304,6 +303,9 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
+  .inset-x-2 {
+    inset-inline: calc(var(--spacing) * 2);
+  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -349,33 +351,45 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\.5 {
     top: calc(var(--spacing) * 1.5);
   }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
-  .top-2 {
-    top: calc(var(--spacing) * 2);
-  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
   .top-14 {
     top: calc(var(--spacing) * 14);
   }
-  .right-2 {
-    right: calc(var(--spacing) * 2);
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .right-1 {
+    right: calc(var(--spacing) * 1);
   }
   .bottom-\(--fd-sidebar-margin\) {
     bottom: var(--fd-sidebar-margin);
   }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
   .bottom-1\.5 {
     bottom: calc(var(--spacing) * 1.5);
   }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .z-2 {
+    z-index: 2;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -394,9 +408,6 @@
   .z-\[-1\] {
     z-index: -1;
   }
-  .z-\[2\] {
-    z-index: 2;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -458,12 +469,12 @@
   .ms-px {
     margin-inline-start: 1px;
   }
+  .-me-0\.5 {
+    margin-inline-end: calc(var(--spacing) * -0.5);
+  }
   .-me-1\.5 {
     margin-inline-end: calc(var(--spacing) * -1.5);
   }
-  .-me-2 {
-    margin-inline-end: calc(var(--spacing) * -2);
-  }
   .me-1\.5 {
     margin-inline-end: calc(var(--spacing) * 1.5);
   }
@@ -970,6 +981,9 @@
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
+  .h-9\.5 {
+    height: calc(var(--spacing) * 9.5);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
@@ -985,6 +999,9 @@
   .h-full {
     height: 100%;
   }
+  .h-px {
+    height: 1px;
+  }
   .max-h-\[50vh\] {
     max-height: 50vh;
   }
@@ -1009,6 +1026,9 @@
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
@@ -1120,12 +1140,6 @@
     --tw-translate-y: 100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .scale-0 {
-    --tw-scale-x: 0%;
-    --tw-scale-y: 0%;
-    --tw-scale-z: 0%;
-    scale: var(--tw-scale-x) var(--tw-scale-y);
-  }
   .-rotate-90 {
     rotate: calc(90deg * -1);
   }
@@ -1262,6 +1276,9 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-bl-lg {
+    border-bottom-left-radius: var(--radius-lg);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1270,14 +1287,14 @@
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 1px;
   }
-  .border-s-2 {
-    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-e-0 {
+    border-inline-end-style: var(--tw-border-style);
+    border-inline-end-width: 0px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1300,34 +1317,13 @@
       border-color: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
     }
   }
-  .border-fd-primary {
-    border-color: var(--color-fd-primary);
-  }
   .border-transparent {
     border-color: transparent;
   }
-  .border-s-amber-500\/50 {
-    border-inline-start-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-inline-start-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent);
-    }
-  }
-  .border-s-blue-500\/50 {
-    border-inline-start-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
+  .bg-\(--callout-color\)\/50 {
+    background-color: var(--callout-color);
     @supports (color: color-mix(in lab, red, red)) {
-      border-inline-start-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
-    }
-  }
-  .border-s-green-500\/50 {
-    border-inline-start-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-inline-start-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
-    }
-  }
-  .border-s-red-500\/50 {
-    border-inline-start-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      background-color: color-mix(in oklab, var(--callout-color) 50%, transparent);
     }
   }
   .bg-\(--shiki-light-bg\) {
@@ -1390,17 +1386,8 @@
   .\[mask-image\:linear-gradient\(to_bottom\,transparent\,white_16px\,white_calc\(100\%-16px\)\,transparent\)\] {
     mask-image: linear-gradient(to bottom,transparent,white 16px,white calc(100% - 16px),transparent);
   }
-  .fill-amber-500 {
-    fill: var(--color-amber-500);
-  }
-  .fill-blue-500 {
-    fill: var(--color-blue-500);
-  }
-  .fill-green-500 {
-    fill: var(--color-green-500);
-  }
-  .fill-red-500 {
-    fill: var(--color-red-500);
+  .fill-\(--callout-color\) {
+    fill: var(--callout-color);
   }
   .stroke-current\/25 {
     stroke: currentcolor;
@@ -1438,6 +1425,9 @@
   .px-\(--fd-layout-offset\) {
     padding-inline: var(--fd-layout-offset);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -1480,6 +1470,9 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .ps-1 {
+    padding-inline-start: calc(var(--spacing) * 1);
+  }
   .ps-2 {
     padding-inline-start: calc(var(--spacing) * 2);
   }
@@ -1600,6 +1593,12 @@
   .text-fd-muted-foreground {
     color: var(--color-fd-muted-foreground);
   }
+  .text-fd-muted-foreground\/50 {
+    color: color-mix(in srgb, hsl(0, 0%, 45.1%) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-fd-muted-foreground) 50%, transparent);
+    }
+  }
   .text-fd-popover-foreground {
     color: var(--color-fd-popover-foreground);
   }
@@ -1670,11 +1669,6 @@
     -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,);
   }
-  .backdrop-blur-md {
-    --tw-backdrop-blur: blur(var(--blur-md));
-    -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,);
-  }
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -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,);
@@ -1800,11 +1794,9 @@
       flex-direction: column;
     }
   }
-  .group-hover\:opacity-100 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
+  .group-data-\[state\=active\]\:bg-fd-primary {
+    &:is(:where(.group)[data-state="active"] *) {
+      background-color: var(--color-fd-primary);
     }
   }
   .group-data-\[state\=open\]\:rotate-90 {
@@ -1829,6 +1821,11 @@
       color: var(--color-fd-muted-foreground);
     }
   }
+  .first\:ms-1 {
+    &:first-child {
+      margin-inline-start: calc(var(--spacing) * 1);
+    }
+  }
   .first\:mt-0 {
     &:first-child {
       margin-top: calc(var(--spacing) * 0);
@@ -1969,6 +1966,11 @@
       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);
@@ -2112,6 +2114,18 @@
       display: none;
     }
   }
+  .max-lg\:rounded-b-2xl {
+    @media (width < 64rem) {
+      border-bottom-right-radius: var(--radius-2xl);
+      border-bottom-left-radius: var(--radius-2xl);
+    }
+  }
+  .max-lg\:shadow-lg {
+    @media (width < 64rem) {
+      --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);
+    }
+  }
   .max-md\:invisible {
     @media (width < 48rem) {
       visibility: hidden;
@@ -2363,16 +2377,6 @@
       background-color: var(--shiki-dark-bg);
     }
   }
-  .\[\&_\.line\]\:px-4 {
-    & .line {
-      padding-inline: calc(var(--spacing) * 4);
-    }
-  }
-  .\[\&_\.line\]\:pl-3 {
-    & .line {
-      padding-left: calc(var(--spacing) * 3);
-    }
-  }
   .\[\&_svg\]\:size-3\.5 {
     & svg {
       width: calc(var(--spacing) * 3.5);
@@ -2427,17 +2431,12 @@
       border-style: none;
     }
   }
-  .\[\@media\(hover\:hover\)\]\:opacity-0 {
-    @media (hover:hover) {
-      opacity: 0%;
-    }
-  }
 }
 .dark {
   --color-fd-background: hsl(0, 0%, 7.04%);
   --color-fd-foreground: hsl(0, 0%, 92%);
   --color-fd-muted: hsl(0, 0%, 12.9%);
-  --color-fd-muted-foreground: hsl(0, 0%, 60.9%);
+  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
   --color-fd-popover: hsl(0, 0%, 10.6%);
   --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
   --color-fd-card: hsl(0, 0%, 9.8%);
@@ -2446,7 +2445,7 @@
   --color-fd-primary: hsl(0, 0%, 98%);
   --color-fd-primary-foreground: hsl(0, 0%, 9%);
   --color-fd-secondary: hsl(0, 0%, 12.9%);
-  --color-fd-secondary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
   --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
   --color-fd-accent-foreground: hsl(0, 0%, 90%);
   --color-fd-ring: hsl(0, 0%, 54.9%);
@@ -2457,12 +2456,16 @@
   --color-fd-muted-foreground: hsl(0, 0%, 72%);
 }
 .shiki:not(.not-fumadocs-codeblock *) {
+  --padding-left: calc(var(--spacing) * 3);
+  --padding-right: calc(var(--spacing) * 3);
   code span {
     color: var(--shiki-light);
   }
   code .line {
-    min-height: 1lh;
     position: relative;
+    min-height: 1lh;
+    padding-left: var(--padding-left);
+    padding-right: var(--padding-right);
   }
   &.has-focused code .line:not(.focused) {
     filter: blur(2px);
@@ -2477,6 +2480,7 @@
   &[data-line-numbers] code .line {
     width: calc(100% - 7 * var(--spacing));
     counter-increment: line;
+    padding-left: calc(var(--padding-left) - var(--spacing));
     margin-left: calc(var(--spacing) * 7);
     &::after {
       position: absolute;
@@ -2589,21 +2593,6 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -2796,6 +2785,21 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -2858,13 +2862,13 @@
 @keyframes fd-popover-in {
   from {
     opacity: 0;
-    transform: translateY(-12px) scale(0.9);
+    transform: scale(0.7);
   }
 }
 @keyframes fd-popover-out {
   to {
     opacity: 0;
-    transform: translateY(-12px) scale(0.9);
+    transform: scale(0.7);
   }
 }
 @keyframes fd-fade-in {
@@ -2960,9 +2964,6 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -3008,6 +3009,9 @@
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --radix-collapsible-content-height: 0px;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.5.4",
+  "version": "15.6.0",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -89,20 +89,20 @@
     "react-medium-image-zoom": "^5.2.14",
     "scroll-into-view-if-needed": "^3.1.0",
     "tailwind-merge": "^3.3.1",
-    "fumadocs-core": "15.5.4"
+    "fumadocs-core": "15.6.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.3.4",
-    "@tailwindcss/cli": "^4.1.10",
+    "@tailwindcss/cli": "^4.1.11",
     "@types/lodash.merge": "^4.6.9",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "next": "15.3.4",
-    "tailwindcss": "^4.1.10",
+    "tailwindcss": "^4.1.11",
     "tsc-alias": "^1.8.16",
-    "eslint-config-custom": "0.0.0",
     "@fumadocs/cli": "0.2.1",
-    "fumadocs-core": "15.5.4",
+    "eslint-config-custom": "0.0.0",
+    "fumadocs-core": "15.6.0",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {

package/dist/components/ui/tabs.d.ts

@@ -1,8 +0,0 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as React from 'react';
-declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & 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>>;
-export { Tabs, TabsList, TabsTrigger, TabsContent };
-//# sourceMappingURL=tabs.d.ts.map

package/dist/components/ui/tabs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,IAAI,mJAcR,CAAC;AAIH,QAAA,MAAM,QAAQ,uJAYZ,CAAC;AAGH,QAAA,MAAM,WAAW,gKAYf,CAAC;AAGH,QAAA,MAAM,WAAW,0JAYf,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ui/tabs.js

@@ -1,16 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as React from 'react';
-import { cn } from '../../utils/cn.js';
-const Tabs = React.forwardRef((props, ref) => {
-    return (_jsx(TabsPrimitive.Root, { ref: ref, ...props, className: cn('flex flex-col overflow-hidden rounded-xl border bg-fd-secondary', props.className) }));
-});
-Tabs.displayName = 'Tabs';
-const TabsList = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.List, { ref: ref, ...props, className: cn('flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose', props.className) })));
-TabsList.displayName = 'TabsList';
-const TabsTrigger = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, ...props, className: cn('inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-fd-primary data-[state=active]:text-fd-primary', props.className) })));
-TabsTrigger.displayName = 'TabsTrigger';
-const TabsContent = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, ...props, className: cn('p-4 text-[15px] bg-fd-background rounded-xl outline-none', props.className) })));
-TabsContent.displayName = 'TabsContent';
-export { Tabs, TabsList, TabsTrigger, TabsContent };