fumadocs-ui 16.0.8 → 16.0.10

package/dist/components/callout.d.ts

@@ -1,13 +1,19 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-export declare const Callout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
+import type { ComponentProps, ReactNode } from 'react';
+export type CalloutType = 'info' | 'warn' | 'error' | 'success' | 'warning';
+export declare function Callout({ children, title, ...props }: {
     title?: ReactNode;
+} & Omit<CalloutContainerProps, 'title'>): import("react/jsx-runtime").JSX.Element;
+export interface CalloutContainerProps extends ComponentProps<'div'> {
     /**
      * @defaultValue info
      */
-    type?: "info" | "warn" | "error" | "success" | "warning";
+    type?: CalloutType;
     /**
      * Force an icon
      */
     icon?: ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
+}
+export declare function CalloutContainer({ type: inputType, icon, children, className, style, ...props }: CalloutContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CalloutTitle({ children, className, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+export declare function CalloutDescription({ children, className, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=callout.d.ts.map

package/dist/components/callout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../src/components/callout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBxE,eAAO,MAAM,OAAO;YAdV,SAAS;IACjB;;OAEG;WACI,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS;IAExD;;OAEG;WACI,SAAS;kDA0CjB,CAAC"}
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../src/components/callout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAI5E,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE;IAAE,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,OAAO,CAAC,2CAO9D;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAClE;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EAAE,SAAkB,EACxB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA4BvB;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,2CAMrB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,2CAYrB"}

package/dist/components/callout.js

@@ -1,22 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleCheck, CircleX, Info, TriangleAlert } from '../icons.js';
-import { forwardRef } from 'react';
 import { cn } from '../utils/cn.js';
 const iconClass = 'size-5 -me-0.5 fill-(--callout-color) text-fd-card';
-export const Callout = forwardRef(({ className, children, title, type = 'info', icon, ...props }, ref) => {
+export function Callout({ children, title, ...props }) {
+    return (_jsxs(CalloutContainer, { ...props, children: [title && _jsx(CalloutTitle, { children: title }), _jsx(CalloutDescription, { children: children })] }));
+}
+function resolveAlias(type) {
     if (type === 'warn')
-        type = 'warning';
+        return 'warning';
     if (type === 'tip')
-        type = 'info';
-    return (_jsxs("div", { ref: ref, className: cn('flex gap-2 my-4 rounded-xl border bg-fd-card p-3 ps-1 text-sm text-fd-card-foreground shadow-md', className), ...props, style: {
+        return 'info';
+    return type;
+}
+export function CalloutContainer({ type: inputType = 'info', icon, children, className, style, ...props }) {
+    const type = resolveAlias(inputType);
+    return (_jsxs("div", { className: cn('flex gap-2 my-4 rounded-xl border bg-fd-card p-3 ps-1 text-sm text-fd-card-foreground shadow-md', className), style: {
             '--callout-color': `var(--color-fd-${type}, var(--color-fd-muted))`,
-            ...props.style,
-        }, children: [_jsx("div", { role: "none", className: "w-0.5 bg-(--callout-color)/50 rounded-sm" }), icon ??
+            ...style,
+        }, ...props, children: [_jsx("div", { role: "none", className: "w-0.5 bg-(--callout-color)/50 rounded-sm" }), icon ??
                 {
                     info: _jsx(Info, { className: iconClass }),
                     warning: _jsx(TriangleAlert, { className: iconClass }),
                     error: _jsx(CircleX, { className: iconClass }),
                     success: _jsx(CircleCheck, { className: iconClass }),
-                }[type], _jsxs("div", { className: "flex flex-col gap-2 min-w-0 flex-1", children: [title && _jsx("p", { className: "font-medium !my-0", children: title }), _jsx("div", { className: "text-fd-muted-foreground prose-no-margin empty:hidden", children: children })] })] }));
-});
-Callout.displayName = 'Callout';
+                }[type], _jsx("div", { className: "flex flex-col gap-2 min-w-0 flex-1", children: children })] }));
+}
+export function CalloutTitle({ children, className, ...props }) {
+    return (_jsx("p", { className: cn('font-medium my-0!', className), ...props, children: children }));
+}
+export function CalloutDescription({ children, className, ...props }) {
+    return (_jsx("div", { className: cn('text-fd-muted-foreground prose-no-margin empty:hidden', className), ...props, children: children }));
+}

package/dist/components/card.js

@@ -6,5 +6,5 @@ export function Cards(props) {
 }
 export function Card({ icon, title, description, ...props }) {
     const E = props.href ? Link : 'div';
-    return (_jsxs(E, { ...props, "data-card": true, className: cn('block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full', props.href && 'hover:bg-fd-accent/80', props.className), children: [icon ? (_jsx("div", { className: "not-prose mb-2 w-fit shadow-md rounded-lg border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon })) : null, _jsx("h3", { className: "not-prose mb-1 text-sm font-medium", children: title }), description ? (_jsx("p", { className: "!my-0 text-sm text-fd-muted-foreground", children: description })) : null, _jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin empty:hidden", children: props.children })] }));
+    return (_jsxs(E, { ...props, "data-card": true, className: cn('block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full', props.href && 'hover:bg-fd-accent/80', props.className), children: [icon ? (_jsx("div", { className: "not-prose mb-2 w-fit shadow-md rounded-lg border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon })) : null, _jsx("h3", { className: "not-prose mb-1 text-sm font-medium", children: title }), description ? (_jsx("p", { className: "my-0! text-sm text-fd-muted-foreground", children: description })) : null, _jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin empty:hidden", children: props.children })] }));
 }

package/dist/components/heading.js

@@ -5,5 +5,5 @@ export function Heading({ as, className, ...props }) {
     const As = as ?? 'h1';
     if (!props.id)
         return _jsx(As, { className: className, ...props });
-    return (_jsxs(As, { className: cn('flex scroll-m-28 flex-row items-center gap-2', className), ...props, children: [_jsx("a", { "data-card": "", href: `#${props.id}`, className: "peer", children: props.children }), _jsx(Link, { "aria-label": "Link to section", className: "size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" })] }));
+    return (_jsxs(As, { className: cn('flex scroll-m-28 flex-row items-center gap-2', className), ...props, children: [_jsx("a", { "data-card": "", href: `#${props.id}`, className: "peer", children: props.children }), _jsx(Link, { "aria-hidden": true, className: "size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100" })] }));
 }

package/dist/mdx.d.ts

@@ -1,5 +1,6 @@
 import type { AnchorHTMLAttributes, FC, HTMLAttributes, ImgHTMLAttributes, TableHTMLAttributes } from 'react';
 import { Card, Cards } from './components/card.js';
+import { Callout, CalloutContainer, CalloutDescription, CalloutTitle } from './components/callout.js';
 import { CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger } from './components/codeblock.js';
 declare function Image(props: ImgHTMLAttributes<HTMLImageElement> & {
     sizes?: string;
@@ -22,11 +23,10 @@ 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" | "type" | "icon"> & {
-        title?: import("react").ReactNode;
-        type?: "info" | "warn" | "error" | "success" | "warning";
-        icon?: import("react").ReactNode;
-    } & import("react").RefAttributes<HTMLDivElement>>;
+    Callout: typeof Callout;
+    CalloutContainer: typeof CalloutContainer;
+    CalloutTitle: typeof CalloutTitle;
+    CalloutDescription: typeof CalloutDescription;
 };
 export declare const createRelativeLink: typeof import('./mdx.server.js').createRelativeLink;
 export { defaultMdxComponents as default };

package/dist/mdx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mdx.d.ts","sourceRoot":"","sources":["../src/mdx.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EACpB,EAAE,EACF,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAEL,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EAErB,MAAM,wBAAwB,CAAC;AAEhC,iBAAS,KAAK,CACZ,KAAK,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CAUF;AAED,iBAAS,KAAK,CAAC,KAAK,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,2CAM1D;AAED,QAAA,MAAM,oBAAoB;;;;;iBAKX,cAAc,CAAC,cAAc,CAAC;;;OAOhC,EAAE,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;;gBAE1C,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;;;;;;;CAK/C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,cAAc,cAAc,EAAE,kBAK5D,CAAC;AAEJ,OAAO,EAAE,oBAAoB,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"mdx.d.ts","sourceRoot":"","sources":["../src/mdx.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EACpB,EAAE,EACF,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACb,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EAEL,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EAErB,MAAM,wBAAwB,CAAC;AAEhC,iBAAS,KAAK,CACZ,KAAK,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CAUF;AAED,iBAAS,KAAK,CAAC,KAAK,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,2CAM1D;AAED,QAAA,MAAM,oBAAoB;;;;;iBAKX,cAAc,CAAC,cAAc,CAAC;;;OAOhC,EAAE,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;;gBAE1C,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;;;;;;CAQ/C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,cAAc,cAAc,EAAE,kBAK5D,CAAC;AAEJ,OAAO,EAAE,oBAAoB,IAAI,OAAO,EAAE,CAAC"}

package/dist/mdx.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Link from 'fumadocs-core/link';
 import { Image as FrameworkImage } from 'fumadocs-core/framework';
 import { Card, Cards } from './components/card.js';
-import { Callout } from './components/callout.js';
+import { Callout, CalloutContainer, CalloutDescription, CalloutTitle, } from './components/callout.js';
 import { Heading } from './components/heading.js';
 import { cn } from './utils/cn.js';
 import { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre, } from './components/codeblock.js';
@@ -30,6 +30,9 @@ const defaultMdxComponents = {
     h6: (props) => (_jsx(Heading, { as: "h6", ...props })),
     table: Table,
     Callout,
+    CalloutContainer,
+    CalloutTitle,
+    CalloutDescription,
 };
 export const createRelativeLink = () => {
     throw new Error('`createRelativeLink` is only supported in Node.js environment');

package/dist/style.css

@@ -447,12 +447,12 @@
   .mx-auto {
     margin-inline: auto;
   }
-  .\!my-0 {
-    margin-block: calc(var(--spacing) * 0) !important;
-  }
   .my-0 {
     margin-block: calc(var(--spacing) * 0);
   }
+  .my-0\! {
+    margin-block: calc(var(--spacing) * 0) !important;
+  }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.0.8",
+  "version": "16.0.10",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -121,7 +121,7 @@
     "react-medium-image-zoom": "^5.4.0",
     "scroll-into-view-if-needed": "^3.1.0",
     "tailwind-merge": "^3.3.1",
-    "fumadocs-core": "16.0.8"
+    "fumadocs-core": "16.0.10"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "16.0.1",
@@ -135,7 +135,7 @@
     "tsc-alias": "^1.8.16",
     "@fumadocs/cli": "1.0.3",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.0.8",
+    "fumadocs-core": "16.0.10",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {