fumadocs-ui 15.2.2 → 15.2.3

package/dist/components/callout.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-export declare const Callout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "icon" | "type"> & {
+export declare const Callout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "icon" | "type" | "title"> & {
     title?: ReactNode;
     /**
      * @defaultValue info

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

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: ({
     color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
-    size?: "icon" | "sm" | "icon-sm" | null | undefined;
+    size?: "sm" | "icon" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonProps = VariantProps<typeof buttonVariants>;
 //# sourceMappingURL=button.d.ts.map

package/dist/contexts/i18n.d.ts

@@ -1,4 +1,3 @@
-import { type ReactNode } from 'react';
 export interface Translations {
     search: string;
     searchNoResult: string;
@@ -22,41 +21,10 @@ interface I18nContextType {
     locales?: LocaleItem[];
 }
 export declare const defaultTranslations: Translations;
-export declare const I18nContext: {
-    Provider: (props: {
-        value: I18nContextType;
-        children: ReactNode;
-    }) => import("react/jsx-runtime").JSX.Element;
-    use: (errorMessage?: string) => I18nContextType;
-};
+export declare const I18nContext: import("react").Context<I18nContextType>;
 export declare function I18nLabel(props: {
     label: keyof Translations;
 }): string;
 export declare function useI18n(): I18nContextType;
-export interface I18nProviderProps {
-    /**
-     * Current locale
-     */
-    locale: string;
-    /**
-     * Handle changes to the locale, redirect user when not specified.
-     */
-    onLocaleChange?: (v: string) => void;
-    /**
-     * Translations of current locale
-     */
-    translations?: Partial<Translations>;
-    /**
-     * Available languages
-     */
-    locales?: LocaleItem[];
-    children?: ReactNode;
-}
-export declare function I18nProvider({ locales, locale, onChange: _onChange, onLocaleChange, ...props }: I18nProviderProps & {
-    /**
-     * @deprecated use `onLocaleChange` instead
-     */
-    onChange?: I18nProviderProps['onLocaleChange'];
-}): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=i18n.d.ts.map

package/dist/contexts/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/contexts/i18n.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IAEvB,GAAG,EAAE,MAAM,CAAC;IACZ,aAAa,EAAE,MAAM,CAAC;IAEtB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAe;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,mBAAmB,EAAE,YAWjC,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;CAEtB,CAAC;AAEH,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,MAAM,YAAY,CAAA;CAAE,GAAG,MAAM,CAItE;AAED,wBAAgB,OAAO,IAAI,eAAe,CAEzC;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAErC;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IAEvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAY,EACZ,MAAM,EACN,QAAQ,EAAE,SAAS,EACnB,cAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAChD,2CAsCA"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/contexts/i18n.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IAEvB,GAAG,EAAE,MAAM,CAAC;IACZ,aAAa,EAAE,MAAM,CAAC;IAEtB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAe;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,mBAAmB,EAAE,YAWjC,CAAC;AAEF,eAAO,MAAM,WAAW,0CAEtB,CAAC;AAEH,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,MAAM,YAAY,CAAA;CAAE,GAAG,MAAM,CAItE;AAED,wBAAgB,OAAO,IAAI,eAAe,CAEzC"}

package/dist/contexts/i18n.js

@@ -1,8 +1,5 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, usePathname, useRouter } from 'fumadocs-core/framework';
-import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
-import { useMemo } from 'react';
+import { createContext, useContext } from 'react';
 export const defaultTranslations = {
     search: 'Search',
     searchNoResult: 'No results found',
@@ -15,7 +12,7 @@ export const defaultTranslations = {
     chooseTheme: 'Theme',
     editOnGithub: 'Edit on GitHub',
 };
-export const I18nContext = createContext('I18nContext', {
+export const I18nContext = createContext({
     text: defaultTranslations,
 });
 export function I18nLabel(props) {
@@ -23,33 +20,5 @@ export function I18nLabel(props) {
     return text[props.label];
 }
 export function useI18n() {
-    return I18nContext.use();
-}
-export function I18nProvider({ locales = [], locale, onChange: _onChange, onLocaleChange = _onChange, ...props }) {
-    const router = useRouter();
-    const pathname = usePathname();
-    const onChange = useEffectEvent((value) => {
-        if (onLocaleChange) {
-            return onLocaleChange(value);
-        }
-        const segments = pathname.split('/').filter((v) => v.length > 0);
-        // If locale prefix hidden
-        if (segments[0] !== locale) {
-            segments.unshift(value);
-        }
-        else {
-            segments[0] = value;
-        }
-        router.push(`/${segments.join('/')}`);
-        router.refresh();
-    });
-    return (_jsx(I18nContext.Provider, { value: useMemo(() => ({
-            locale,
-            locales,
-            text: {
-                ...defaultTranslations,
-                ...props.translations,
-            },
-            onChange,
-        }), [locale, locales, onChange, props.translations]), children: props.children }));
+    return useContext(I18nContext);
 }

package/dist/i18n.d.ts

@@ -1,2 +1,13 @@
-export { defaultTranslations, type Translations, I18nProvider, type I18nProviderProps, } from './contexts/i18n.js';
+import type { I18nProviderProps } from './provider/base.js';
+export type { I18nProviderProps };
+export { defaultTranslations, type Translations } from './contexts/i18n.js';
+/**
+ * @deprecated legacy I18n Provider, use `<RootProvider i18n={...} />` instead
+ */
+export declare function I18nProvider({ locales, locale, onChange: _onChange, onLocaleChange, ...props }: I18nProviderProps & {
+    /**
+     * @deprecated use `onLocaleChange` instead
+     */
+    onChange?: I18nProviderProps['onLocaleChange'];
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=i18n.d.ts.map

package/dist/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/i18n.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,YAAY,EACjB,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/i18n.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGzE;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAY,EACZ,MAAM,EACN,QAAQ,EAAE,SAAS,EACnB,cAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAChD,2CAsCA"}

package/dist/i18n.js

@@ -1 +1,39 @@
-export { defaultTranslations, I18nProvider, } from './contexts/i18n.js';
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
+import { useMemo } from 'react';
+import { defaultTranslations, I18nContext } from './contexts/i18n.js';
+export { defaultTranslations } from './contexts/i18n.js';
+// TODO: remove next major
+/**
+ * @deprecated legacy I18n Provider, use `<RootProvider i18n={...} />` instead
+ */
+export function I18nProvider({ locales = [], locale, onChange: _onChange, onLocaleChange = _onChange, ...props }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const onChange = useEffectEvent((value) => {
+        if (onLocaleChange) {
+            return onLocaleChange(value);
+        }
+        const segments = pathname.split('/').filter((v) => v.length > 0);
+        // If locale prefix hidden
+        if (segments[0] !== locale) {
+            segments.unshift(value);
+        }
+        else {
+            segments[0] = value;
+        }
+        router.push(`/${segments.join('/')}`);
+        router.refresh();
+    });
+    return (_jsx(I18nContext.Provider, { value: useMemo(() => ({
+            locale,
+            locales,
+            text: {
+                ...defaultTranslations,
+                ...props.translations,
+            },
+            onChange,
+        }), [locale, locales, onChange, props.translations]), children: props.children }));
+}

package/dist/mdx.d.ts

@@ -17,7 +17,7 @@ declare const defaultMdxComponents: {
     h5: (props: HTMLAttributes<HTMLHeadingElement>) => import("react/jsx-runtime").JSX.Element;
     h6: (props: HTMLAttributes<HTMLHeadingElement>) => import("react/jsx-runtime").JSX.Element;
     table: typeof Table;
-    Callout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "icon" | "type"> & {
+    Callout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "icon" | "type" | "title"> & {
         title?: import("react").ReactNode;
         type?: "info" | "warn" | "error";
         icon?: import("react").ReactNode;

package/dist/provider/base.d.ts

@@ -2,6 +2,7 @@ import { ThemeProvider } from 'next-themes';
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import type { DefaultSearchDialogProps } from '../components/dialog/search-default.js';
 import { type SearchProviderProps } from '../contexts/search.js';
+import { type LocaleItem, type Translations } from '../contexts/i18n.js';
 interface SearchOptions extends Omit<SearchProviderProps, 'options' | 'children'> {
     options?: Partial<DefaultSearchDialogProps> | SearchProviderProps['options'];
     /**
@@ -31,8 +32,28 @@ export interface RootProviderProps {
          */
         enabled?: boolean;
     };
+    i18n?: Omit<I18nProviderProps, 'children'>;
     children?: ReactNode;
 }
-export declare function RootProvider({ children, dir, theme, search, }: RootProviderProps): import("react/jsx-runtime").JSX.Element;
+export interface I18nProviderProps {
+    /**
+     * Current locale
+     */
+    locale: string;
+    /**
+     * Handle changes to the locale, redirect user when not specified.
+     */
+    onLocaleChange?: (v: string) => void;
+    /**
+     * Translations of current locale
+     */
+    translations?: Partial<Translations>;
+    /**
+     * Available languages
+     */
+    locales?: LocaleItem[];
+    children?: ReactNode;
+}
+export declare function RootProvider({ children, dir, theme, search, i18n, }: RootProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=base.d.ts.map

package/dist/provider/base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/provider/base.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,KAAK,wBAAwB,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAEnF,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7E,UAAU,aACR,SAAQ,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAC7E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,CAAC,GAAG;QAChE;;;;WAIG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IAEF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAW,EACX,KAAU,EACV,MAAM,GACP,EAAE,iBAAiB,2CA4BnB"}
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/provider/base.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAEnF,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7E,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAGzB,UAAU,aACR,SAAQ,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAC7E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,CAAC,GAAG;QAChE;;;;WAIG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IAEF,IAAI,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;IAE3C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAErC;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IAEvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAW,EACX,KAAU,EACV,MAAM,EACN,IAAI,GACL,EAAE,iBAAiB,2CAgCnB"}

package/dist/provider/base.js

@@ -1,16 +1,50 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ThemeProvider } from 'next-themes';
-import { lazy } from 'react';
+import { lazy, useMemo, } from 'react';
 import { DirectionProvider } from '@radix-ui/react-direction';
 import { SidebarProvider } from '../contexts/sidebar.js';
 import { SearchProvider } from '../contexts/search.js';
+import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
+import { defaultTranslations, I18nContext, } from '../contexts/i18n.js';
+import { usePathname, useRouter } from 'fumadocs-core/framework';
 const DefaultSearchDialog = lazy(() => import('../components/dialog/search-default.js'));
-export function RootProvider({ children, dir = 'ltr', theme = {}, search, }) {
+export function RootProvider({ children, dir = 'ltr', theme = {}, search, i18n, }) {
     let body = children;
+    if (i18n) {
+        body = _jsx(I18nProvider, { ...i18n, children: body });
+    }
     if (search?.enabled !== false)
         body = (_jsx(SearchProvider, { SearchDialog: DefaultSearchDialog, ...search, children: body }));
     if (theme?.enabled !== false)
         body = (_jsx(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, disableTransitionOnChange: true, ...theme, children: body }));
     return (_jsx(DirectionProvider, { dir: dir, children: _jsx(SidebarProvider, { children: body }) }));
 }
+function I18nProvider({ locales = [], locale, onLocaleChange, ...props }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const onChange = useEffectEvent((value) => {
+        if (onLocaleChange) {
+            return onLocaleChange(value);
+        }
+        const segments = pathname.split('/').filter((v) => v.length > 0);
+        // If locale prefix hidden
+        if (segments[0] !== locale) {
+            segments.unshift(value);
+        }
+        else {
+            segments[0] = value;
+        }
+        router.push(`/${segments.join('/')}`);
+        router.refresh();
+    });
+    return (_jsx(I18nContext.Provider, { value: useMemo(() => ({
+            locale,
+            locales,
+            text: {
+                ...defaultTranslations,
+                ...props.translations,
+            },
+            onChange,
+        }), [locale, locales, onChange, props.translations]), children: props.children }));
+}

package/dist/style.css

@@ -1,10 +1,73 @@
-/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
+@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+  @layer base {
+    *, ::before, ::after, ::backdrop {
+      --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: rotateX(0);
+      --tw-rotate-y: rotateY(0);
+      --tw-rotate-z: rotateZ(0);
+      --tw-skew-x: skewX(0);
+      --tw-skew-y: skewY(0);
+      --tw-divide-y-reverse: 0;
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --radix-collapsible-content-height: 0px;
+    }
+  }
+}
 @layer theme {
   :root, :host {
-    --color-red-500: oklch(0.637 0.237 25.331);
-    --color-orange-500: oklch(0.705 0.213 47.604);
-    --color-blue-500: oklch(0.623 0.214 259.815);
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "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-orange-500: oklch(70.5% 0.213 47.604);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-black: #000;
     --spacing: 0.25rem;
     --breakpoint-sm: 40rem;
@@ -31,6 +94,8 @@
     --blur-lg: 16px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
     --color-fd-background: hsl(0, 0%, 96%);
     --color-fd-foreground: hsl(0, 0%, 3.9%);
     --color-fd-muted: hsl(0, 0%, 96.1%);
@@ -86,10 +151,9 @@
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
-    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    font-feature-settings: initial;
-    font-variation-settings: initial;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
   }
   hr {
@@ -114,10 +178,9 @@
     font-weight: bolder;
   }
   code, kbd, samp, pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
-    font-feature-settings: initial;
-    font-variation-settings: initial;
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
     font-size: 1em;
   }
   small {
@@ -735,7 +798,10 @@
     :where(a:not([data-card]):hover):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       opacity: 80%;
     }
-    --tw-prose-body: color-mix(in oklab, var(--color-fd-foreground) 90%, transparent);
+    --tw-prose-body: color-mix(in srgb, hsl(0, 0%, 3.9%) 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-prose-body: color-mix(in oklab, var(--color-fd-foreground) 90%, transparent);
+    }
     --tw-prose-headings: var(--color-fd-foreground);
     --tw-prose-lead: var(--color-fd-foreground);
     --tw-prose-links: var(--color-fd-foreground);
@@ -750,7 +816,10 @@
     --tw-prose-th-borders: var(--color-fd-border);
     --tw-prose-td-borders: var(--color-fd-border);
     --tw-prose-kbd: var(--color-fd-foreground);
-    --tw-prose-kbd-shadows: color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
+    --tw-prose-kbd-shadows: color-mix(in srgb, hsl(0, 0%, 9%) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-prose-kbd-shadows: color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
+    }
     :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       margin-top: 0;
     }
@@ -1177,7 +1246,10 @@
     border-left-width: 1px;
   }
   .border-fd-foreground\/10 {
-    border-color: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
+    border-color: color-mix(in srgb, hsl(0, 0%, 3.9%) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
+    }
   }
   .border-fd-primary {
     border-color: var(--color-fd-primary);
@@ -1186,19 +1258,31 @@
     border-color: transparent;
   }
   .border-s-blue-500\/50 {
-    border-inline-start-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
+    border-inline-start-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-inline-start-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
+    }
   }
   .border-s-orange-500\/50 {
-    border-inline-start-color: color-mix(in oklab, var(--color-orange-500) 50%, transparent);
+    border-inline-start-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-inline-start-color: color-mix(in oklab, var(--color-orange-500) 50%, transparent);
+    }
   }
   .border-s-red-500\/50 {
-    border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    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);
+    }
   }
   .bg-\(--shiki-light-bg\) {
     background-color: var(--shiki-light-bg);
   }
   .bg-black\/30 {
-    background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
+    background-color: color-mix(in srgb, #000 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
+    }
   }
   .bg-fd-accent {
     background-color: var(--color-fd-accent);
@@ -1207,7 +1291,10 @@
     background-color: var(--color-fd-background);
   }
   .bg-fd-background\/80 {
-    background-color: color-mix(in oklab, var(--color-fd-background) 80%, transparent);
+    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);
+    }
   }
   .bg-fd-border {
     background-color: var(--color-fd-border);
@@ -1216,7 +1303,10 @@
     background-color: var(--color-fd-card);
   }
   .bg-fd-foreground\/10 {
-    background-color: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
+    background-color: color-mix(in srgb, hsl(0, 0%, 3.9%) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
+    }
   }
   .bg-fd-muted {
     background-color: var(--color-fd-muted);
@@ -1228,13 +1318,19 @@
     background-color: var(--color-fd-primary);
   }
   .bg-fd-primary\/10 {
-    background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
+    background-color: color-mix(in srgb, hsl(0, 0%, 9%) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
+    }
   }
   .bg-fd-secondary {
     background-color: var(--color-fd-secondary);
   }
   .bg-fd-secondary\/50 {
-    background-color: color-mix(in oklab, var(--color-fd-secondary) 50%, transparent);
+    background-color: color-mix(in srgb, hsl(0, 0%, 93.1%) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fd-secondary) 50%, transparent);
+    }
   }
   .bg-transparent {
     background-color: transparent;
@@ -1249,7 +1345,10 @@
     fill: var(--color-red-500);
   }
   .stroke-fd-foreground\/10 {
-    stroke: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
+    stroke: color-mix(in srgb, hsl(0, 0%, 3.9%) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      stroke: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
+    }
   }
   .p-0 {
     padding: calc(var(--spacing) * 0);
@@ -1433,10 +1532,16 @@
     color: var(--color-fd-foreground);
   }
   .text-fd-foreground\/30 {
-    color: color-mix(in oklab, var(--color-fd-foreground) 30%, transparent);
+    color: color-mix(in srgb, hsl(0, 0%, 3.9%) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-fd-foreground) 30%, transparent);
+    }
   }
   .text-fd-foreground\/80 {
-    color: color-mix(in oklab, var(--color-fd-foreground) 80%, transparent);
+    color: color-mix(in srgb, hsl(0, 0%, 3.9%) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-fd-foreground) 80%, transparent);
+    }
   }
   .text-fd-muted-foreground {
     color: var(--color-fd-muted-foreground);
@@ -1610,21 +1715,30 @@
   .hover\:bg-fd-accent\/50 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--color-fd-accent) 50%, transparent);
+        background-color: color-mix(in srgb, hsl(0, 0%, 90.1%) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-fd-accent) 50%, transparent);
+        }
       }
     }
   }
   .hover\:bg-fd-accent\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--color-fd-accent) 80%, transparent);
+        background-color: color-mix(in srgb, hsl(0, 0%, 90.1%) 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-fd-accent) 80%, transparent);
+        }
       }
     }
   }
   .hover\:bg-fd-primary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--color-fd-primary) 80%, transparent);
+        background-color: color-mix(in srgb, hsl(0, 0%, 9%) 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-fd-primary) 80%, transparent);
+        }
       }
     }
   }
@@ -1638,14 +1752,20 @@
   .hover\:text-fd-accent-foreground\/80 {
     &:hover {
       @media (hover: hover) {
-        color: color-mix(in oklab, var(--color-fd-accent-foreground) 80%, transparent);
+        color: color-mix(in srgb, hsl(0, 0%, 9%) 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-fd-accent-foreground) 80%, transparent);
+        }
       }
     }
   }
   .hover\:text-fd-popover-foreground\/50 {
     &:hover {
       @media (hover: hover) {
-        color: color-mix(in oklab, var(--color-fd-popover-foreground) 50%, transparent);
+        color: color-mix(in srgb, hsl(0, 0%, 15.1%) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-fd-popover-foreground) 50%, transparent);
+        }
       }
     }
   }
@@ -1797,7 +1917,10 @@
   }
   .data-\[state\=open\]\:bg-fd-accent\/50 {
     &[data-state="open"] {
-      background-color: color-mix(in oklab, var(--color-fd-accent) 50%, transparent);
+      background-color: color-mix(in srgb, hsl(0, 0%, 90.1%) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-fd-accent) 50%, transparent);
+      }
     }
   }
   .max-xl\:end-4 {
@@ -1842,7 +1965,10 @@
   }
   .max-md\:bg-fd-background\/80 {
     @media (width < 48rem) {
-      background-color: color-mix(in oklab, var(--color-fd-background) 80%, transparent);
+      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\] {
@@ -2279,13 +2405,22 @@
 .fd-codeblock .highlighted {
   margin: 0 -16px;
   padding: 0 16px;
-  background-color: color-mix( in oklab, var(--color-fd-primary) 10%, transparent );
+  background-color: color-mix( in oklab, hsl(0, 0%, 9%) 10%, transparent );
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix( in oklab, var(--color-fd-primary) 10%, transparent );
+  }
 }
 .fd-codeblock .highlighted-word {
   padding: 1px 2px;
   margin: -1px -3px;
-  border: 1px solid color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
-  background-color: color-mix( in oklab, var(--color-fd-primary) 10%, transparent );
+  border: 1px solid color-mix(in srgb, hsl(0, 0%, 9%) 50%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border: 1px solid color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
+  }
+  background-color: color-mix( in oklab, hsl(0, 0%, 9%) 10%, transparent );
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix( in oklab, var(--color-fd-primary) 10%, transparent );
+  }
   border-radius: 2px;
 }
 @layer base {
@@ -2393,6 +2528,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-inset-shadow {
   syntax: "*";
   inherits: false;
@@ -2402,6 +2542,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-ring-color {
   syntax: "*";
   inherits: false;
@@ -2484,6 +2629,19 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.2.2",
+  "version": "15.2.3",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -74,25 +74,25 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "class-variance-authority": "^0.7.1",
     "lodash.merge": "^4.6.2",
-    "lucide-react": "^0.486.0",
+    "lucide-react": "^0.487.0",
     "next-themes": "^0.4.6",
     "postcss-selector-parser": "^7.1.0",
     "react-medium-image-zoom": "^5.2.14",
     "tailwind-merge": "^3.1.0",
-    "fumadocs-core": "15.2.2"
+    "fumadocs-core": "15.2.3"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.2.4",
-    "@tailwindcss/cli": "^4.0.17",
+    "@tailwindcss/cli": "^4.1.1",
     "@types/lodash.merge": "^4.6.9",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
     "next": "15.2.4",
-    "tailwindcss": "^4.0.17",
+    "tailwindcss": "^4.1.1",
     "tsc-alias": "^1.8.13",
     "@fumadocs/cli": "0.1.0",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.2.2",
+    "fumadocs-core": "15.2.3",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {