@kubb/renderer-jsx 5.0.0-beta.24 → 5.0.0-beta.26

package/dist/index.cjs

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_jsx_runtime = require("./jsx-runtime-DdmO3p0U.cjs");
 const require_jsx_runtime$1 = require("./jsx-runtime.cjs");
+let yaml = require("yaml");
 let _kubb_ast = require("@kubb/ast");
 //#region ../../internals/utils/src/context.ts
 /**
@@ -109,6 +110,64 @@ function onProcessExit(callback) {
 	return unsubscribe;
 }
 //#endregion
+//#region src/components/Callout.tsx
+const CALLOUT_LABEL = {
+	tip: "TIP",
+	note: "NOTE",
+	important: "IMPORTANT",
+	warning: "WARNING",
+	caution: "CAUTION"
+};
+/**
+* Renders a GitHub-style alert callout — portable across GitHub, GitLab,
+* VitePress, Obsidian, and MDX.
+*
+* Emits a `<File.Source>` block containing `> [!TYPE] Title` followed by the
+* body with every line prefixed by `> `.
+*
+* @example
+* ```tsx
+* <Callout type="tip">Run `kubb start --watch` to keep the generator hot.</Callout>
+* // > [!TIP]
+* // > Run `kubb start --watch` to keep the generator hot.
+*
+* <Callout type="warning" title="Heads up">Breaking change in v6.</Callout>
+* // > [!WARNING] Heads up
+* // > Breaking change in v6.
+* ```
+*/
+function Callout({ type, title, children }) {
+	const label = CALLOUT_LABEL[type];
+	return /* @__PURE__ */ require_jsx_runtime$1.jsx("kubb-source", {
+		name: "callout",
+		children: `${title ? `> [!${label}] ${title}` : `> [!${label}]`}\n${children.trimEnd().split("\n").map((line) => line.length > 0 ? `> ${line}` : ">").join("\n")}`
+	});
+}
+Callout.displayName = "Callout";
+//#endregion
+//#region src/components/CodeBlock.tsx
+/**
+* Renders a fenced markdown code block.
+*
+* Emits a `<File.Source>` block containing the children wrapped in
+* triple-backtick fences with an optional language tag.
+*
+* @example
+* ```tsx
+* <CodeBlock lang="typescript">{'const pet = { id: 1 }'}</CodeBlock>
+* // ```typescript
+* // const pet = { id: 1 }
+* // ```
+* ```
+*/
+function CodeBlock({ lang, children }) {
+	return /* @__PURE__ */ require_jsx_runtime$1.jsx("kubb-source", {
+		name: "codeBlock",
+		children: `\`\`\`${lang ?? ""}\n${children}\n\`\`\``
+	});
+}
+CodeBlock.displayName = "CodeBlock";
+//#endregion
 //#region src/components/Const.tsx
 /**
 * Generates a TypeScript constant declaration.
@@ -263,6 +322,33 @@ File.Export = FileExport;
 File.Import = FileImport;
 File.Source = FileSource;
 //#endregion
+//#region src/components/Frontmatter.tsx
+/**
+* Emits a YAML frontmatter envelope at the top of a generated markdown file.
+*
+* Renders a `<File.Source>` block containing `---\n<yaml>\n---`. Place it as
+* the first child of `<File>` so it appears at the top of the output. Pair with
+* `parserMd` to write `.md` files that downstream tooling (VitePress, MDX,
+* static-site generators) treats as frontmatter.
+*
+* @example Page frontmatter at the top of a generated markdown file
+* ```tsx
+* <File baseName="pets.md" path="src/pets.md">
+*   <Frontmatter data={{ title: 'Pets', layout: 'doc' }} />
+*   <File.Source>
+*     {'# Pets\n\nList of pets.'}
+*   </File.Source>
+* </File>
+* ```
+*/
+function Frontmatter({ data }) {
+	return /* @__PURE__ */ require_jsx_runtime$1.jsx("kubb-source", {
+		name: "frontmatter",
+		children: `---\n${(0, yaml.stringify)(data).trimEnd()}\n---`
+	});
+}
+Frontmatter.displayName = "Frontmatter";
+//#endregion
 //#region src/components/Function.tsx
 /**
 * Generates a TypeScript function declaration.
@@ -324,6 +410,27 @@ function ArrowFunction({ children, ...props }) {
 ArrowFunction.displayName = "ArrowFunction";
 Function$1.Arrow = ArrowFunction;
 //#endregion
+//#region src/components/Heading.tsx
+/**
+* Renders an ATX-style markdown heading.
+*
+* Emits a `<File.Source>` block containing `${'#'.repeat(level)} ${children}`.
+* Use inside a `<File>` rendered by `parserMd`.
+*
+* @example
+* ```tsx
+* <Heading level={2}>Installation</Heading>
+* // ## Installation
+* ```
+*/
+function Heading({ level, children }) {
+	return /* @__PURE__ */ require_jsx_runtime$1.jsx("kubb-source", {
+		name: "heading",
+		children: `${"#".repeat(level)} ${children}`
+	});
+}
+Heading.displayName = "Heading";
+//#endregion
 //#region src/components/Jsx.tsx
 /**
 * Embeds a raw JSX string verbatim in the generated source code.
@@ -345,6 +452,53 @@ function Jsx({ children }) {
 }
 Jsx.displayName = "Jsx";
 //#endregion
+//#region src/components/List.tsx
+/**
+* Renders a markdown list.
+*
+* Emits a `<File.Source>` block containing one entry per line, prefixed with
+* `1.` / `2.` … when `ordered`, or `-` otherwise.
+*
+* @example
+* ```tsx
+* <List items={['Add the parser', 'Render the page']} />
+* // - Add the parser
+* // - Render the page
+*
+* <List ordered items={['First', 'Second']} />
+* // 1. First
+* // 2. Second
+* ```
+*/
+function List({ ordered, items }) {
+	return /* @__PURE__ */ require_jsx_runtime$1.jsx("kubb-source", {
+		name: "list",
+		children: items.map((item, index) => `${ordered ? `${index + 1}.` : "-"} ${item}`).join("\n")
+	});
+}
+List.displayName = "List";
+//#endregion
+//#region src/components/Paragraph.tsx
+/**
+* Renders a markdown paragraph.
+*
+* Emits a `<File.Source>` block containing the text as-is. Paragraphs are
+* separated from surrounding blocks by blank lines via the parser's source
+* joining.
+*
+* @example
+* ```tsx
+* <Paragraph>{'A pet object with `id` and `name` fields.'}</Paragraph>
+* ```
+*/
+function Paragraph({ children }) {
+	return /* @__PURE__ */ require_jsx_runtime$1.jsx("kubb-source", {
+		name: "paragraph",
+		children
+	});
+}
+Paragraph.displayName = "Paragraph";
+//#endregion
 //#region src/components/Root.tsx
 var import_react = /* @__PURE__ */ require_jsx_runtime.__toESM(require_jsx_runtime.require_react());
 var ErrorBoundary = class extends import_react.Component {
@@ -18487,10 +18641,16 @@ const jsxRendererSync = () => {
 	};
 };
 //#endregion
+exports.Callout = Callout;
+exports.CodeBlock = CodeBlock;
 exports.Const = Const;
 exports.File = File;
+exports.Frontmatter = Frontmatter;
 exports.Function = Function$1;
+exports.Heading = Heading;
 exports.Jsx = Jsx;
+exports.List = List;
+exports.Paragraph = Paragraph;
 exports.Root = Root;
 exports.Type = Type;
 exports.createContext = createContext;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { n as __name } from "./chunk-Bb7HlUDG.js";
-import { a as JSDoc, h as KubbReactNode, m as KubbReactElement, o as Key } from "./types-ChkUbtyQ.js";
+import { a as JSDoc, h as KubbReactNode, m as KubbReactElement, o as Key } from "./types-Cur_nGCL.js";
 import { ExportNode, FileNode, ImportNode, SourceNode } from "@kubb/ast";
 import * as _$react from "react";
 
@@ -47,6 +47,95 @@ declare function unprovide<T>(key: symbol | Context<T>): void;
  */
 declare function createContext<T>(defaultValue: T): Context<T>;
 //#endregion
+//#region src/components/Callout.d.ts
+declare const CALLOUT_LABEL: {
+  readonly tip: "TIP";
+  readonly note: "NOTE";
+  readonly important: "IMPORTANT";
+  readonly warning: "WARNING";
+  readonly caution: "CAUTION";
+};
+type CalloutType = keyof typeof CALLOUT_LABEL;
+type Props$8 = {
+  key?: Key;
+  /**
+   * Callout kind. Maps to the uppercase label inside the `> [!TYPE]` marker.
+   */
+  type: CalloutType;
+  /**
+   * Optional title rendered on the same line as the marker.
+   */
+  title?: string | null;
+  /**
+   * Body text. Each line is quoted with `> ` so multi-line content stays
+   * inside the callout block.
+   */
+  children: string;
+};
+/**
+ * Renders a GitHub-style alert callout — portable across GitHub, GitLab,
+ * VitePress, Obsidian, and MDX.
+ *
+ * Emits a `<File.Source>` block containing `> [!TYPE] Title` followed by the
+ * body with every line prefixed by `> `.
+ *
+ * @example
+ * ```tsx
+ * <Callout type="tip">Run `kubb start --watch` to keep the generator hot.</Callout>
+ * // > [!TIP]
+ * // > Run `kubb start --watch` to keep the generator hot.
+ *
+ * <Callout type="warning" title="Heads up">Breaking change in v6.</Callout>
+ * // > [!WARNING] Heads up
+ * // > Breaking change in v6.
+ * ```
+ */
+declare function Callout({
+  type,
+  title,
+  children
+}: Props$8): KubbReactElement;
+declare namespace Callout {
+  var displayName: string;
+}
+//#endregion
+//#region src/components/CodeBlock.d.ts
+type Props$7 = {
+  key?: Key;
+  /**
+   * Language tag for syntax highlighting. Rendered after the opening fence.
+   *
+   * @example
+   * `lang: 'typescript'`
+   */
+  lang?: string;
+  /**
+   * Code body. Wrapped in triple-backtick fences as-is.
+   */
+  children: string;
+};
+/**
+ * Renders a fenced markdown code block.
+ *
+ * Emits a `<File.Source>` block containing the children wrapped in
+ * triple-backtick fences with an optional language tag.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock lang="typescript">{'const pet = { id: 1 }'}</CodeBlock>
+ * // ```typescript
+ * // const pet = { id: 1 }
+ * // ```
+ * ```
+ */
+declare function CodeBlock({
+  lang,
+  children
+}: Props$7): KubbReactElement;
+declare namespace CodeBlock {
+  var displayName: string;
+}
+//#endregion
 //#region src/components/Const.d.ts
 type ConstProps = {
   key?: Key;
@@ -143,7 +232,7 @@ type BasePropsWithoutBaseName = {
   path?: string | null;
 };
 type BaseProps = BasePropsWithBaseName | BasePropsWithoutBaseName;
-type Props$2<TMeta> = BaseProps & {
+type Props$6<TMeta> = BaseProps & {
   key?: Key;
   /**
    * Arbitrary metadata attached to the file node.
@@ -184,7 +273,7 @@ type Props$2<TMeta> = BaseProps & {
 declare function File<TMeta extends object = object>({
   children,
   ...props
-}: Props$2<TMeta>): KubbReactElement;
+}: Props$6<TMeta>): KubbReactElement;
 declare namespace File {
   var displayName: string;
   var Export: typeof FileExport;
@@ -280,8 +369,44 @@ declare namespace FileImport {
   var displayName: string;
 }
 //#endregion
+//#region src/components/Frontmatter.d.ts
+type Props$5 = {
+  key?: Key;
+  /**
+   * Plain object serialised as YAML between `---` fences.
+   *
+   * @example
+   * `data: { title: 'Pets', layout: 'doc' }`
+   */
+  data: Record<string, unknown>;
+};
+/**
+ * Emits a YAML frontmatter envelope at the top of a generated markdown file.
+ *
+ * Renders a `<File.Source>` block containing `---\n<yaml>\n---`. Place it as
+ * the first child of `<File>` so it appears at the top of the output. Pair with
+ * `parserMd` to write `.md` files that downstream tooling (VitePress, MDX,
+ * static-site generators) treats as frontmatter.
+ *
+ * @example Page frontmatter at the top of a generated markdown file
+ * ```tsx
+ * <File baseName="pets.md" path="src/pets.md">
+ *   <Frontmatter data={{ title: 'Pets', layout: 'doc' }} />
+ *   <File.Source>
+ *     {'# Pets\n\nList of pets.'}
+ *   </File.Source>
+ * </File>
+ * ```
+ */
+declare function Frontmatter({
+  data
+}: Props$5): KubbReactElement;
+declare namespace Frontmatter {
+  var displayName: string;
+}
+//#endregion
 //#region src/components/Function.d.ts
-type Props$1 = {
+type Props$4 = {
   key?: Key;
   /**
    * Identifier of the generated function declaration.
@@ -327,7 +452,7 @@ type Props$1 = {
    * @example Multiple generics
    * `generics: ['TData', 'TError = unknown']`
    */
-  generics?: string | string[] | null;
+  generics?: string | Array<string> | null;
   /**
    * TypeScript return type annotation written verbatim after `:`.
    * When `async` is `true`, the value is automatically wrapped in `Promise<…>`.
@@ -362,12 +487,12 @@ type Props$1 = {
 declare function Function({
   children,
   ...props
-}: Props$1): KubbReactElement;
+}: Props$4): KubbReactElement;
 declare namespace Function {
   var displayName: string;
   var Arrow: typeof ArrowFunction;
 }
-type ArrowFunctionProps = Props$1 & {
+type ArrowFunctionProps = Props$4 & {
   /**
    * Render the arrow function as a single-line expression (no braces around the body).
    * - `true` generates `const name = (…) => expression`
@@ -397,8 +522,42 @@ declare namespace ArrowFunction {
   var displayName: string;
 }
 //#endregion
+//#region src/components/Heading.d.ts
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+type Props$3 = {
+  key?: Key;
+  /**
+   * Heading depth, `1` through `6`. Matches the number of `#` characters
+   * prefixed to the heading text.
+   */
+  level: Level;
+  /**
+   * Heading text. Inline markdown (links, emphasis) is passed through verbatim.
+   */
+  children: string;
+};
+/**
+ * Renders an ATX-style markdown heading.
+ *
+ * Emits a `<File.Source>` block containing `${'#'.repeat(level)} ${children}`.
+ * Use inside a `<File>` rendered by `parserMd`.
+ *
+ * @example
+ * ```tsx
+ * <Heading level={2}>Installation</Heading>
+ * // ## Installation
+ * ```
+ */
+declare function Heading({
+  level,
+  children
+}: Props$3): KubbReactElement;
+declare namespace Heading {
+  var displayName: string;
+}
+//#endregion
 //#region src/components/Jsx.d.ts
-type Props = {
+type Props$2 = {
   /**
    * Raw JSX string to embed verbatim in the generated code.
    * Supports JSX fragments (`<>…</>`), elements, and any valid JSX syntax.
@@ -426,11 +585,79 @@ type Props = {
  */
 declare function Jsx({
   children
-}: Props): KubbReactElement;
+}: Props$2): KubbReactElement;
 declare namespace Jsx {
   var displayName: string;
 }
 //#endregion
+//#region src/components/List.d.ts
+type Props$1 = {
+  key?: Key;
+  /**
+   * When `true`, emits a numbered list (`1. …`). When `false` or omitted,
+   * emits a bullet list (`- …`).
+   *
+   * @default false
+   */
+  ordered?: boolean | null;
+  /**
+   * One entry per line. Inline markdown is passed through verbatim.
+   */
+  items: ReadonlyArray<string>;
+};
+/**
+ * Renders a markdown list.
+ *
+ * Emits a `<File.Source>` block containing one entry per line, prefixed with
+ * `1.` / `2.` … when `ordered`, or `-` otherwise.
+ *
+ * @example
+ * ```tsx
+ * <List items={['Add the parser', 'Render the page']} />
+ * // - Add the parser
+ * // - Render the page
+ *
+ * <List ordered items={['First', 'Second']} />
+ * // 1. First
+ * // 2. Second
+ * ```
+ */
+declare function List({
+  ordered,
+  items
+}: Props$1): KubbReactElement;
+declare namespace List {
+  var displayName: string;
+}
+//#endregion
+//#region src/components/Paragraph.d.ts
+type Props = {
+  key?: Key;
+  /**
+   * Paragraph text. Inline markdown (links, emphasis, code spans) is passed
+   * through verbatim.
+   */
+  children: string;
+};
+/**
+ * Renders a markdown paragraph.
+ *
+ * Emits a `<File.Source>` block containing the text as-is. Paragraphs are
+ * separated from surrounding blocks by blank lines via the parser's source
+ * joining.
+ *
+ * @example
+ * ```tsx
+ * <Paragraph>{'A pet object with `id` and `name` fields.'}</Paragraph>
+ * ```
+ */
+declare function Paragraph({
+  children
+}: Props): KubbReactElement;
+declare namespace Paragraph {
+  var displayName: string;
+}
+//#endregion
 //#region src/components/Root.d.ts
 type RootProps = {
   /**
@@ -603,5 +830,5 @@ declare const jsxRendererSync: () => {
   [Symbol.dispose](): void;
 };
 //#endregion
-export { Const, File, Function, Jsx, Root, Type, createContext, inject, jsxRenderer, jsxRendererSync, provide, unprovide };
+export { Callout, CodeBlock, Const, File, Frontmatter, Function, Heading, Jsx, List, Paragraph, Root, Type, createContext, inject, jsxRenderer, jsxRendererSync, provide, unprovide };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,6 +1,7 @@
 import { n as __name, r as __toESM, t as __commonJSMin } from "./chunk-Bb7HlUDG.js";
 import { n as require_react } from "./jsx-runtime-Cvu_ZYgL.js";
 import { Fragment, jsx } from "./jsx-runtime.js";
+import { stringify } from "yaml";
 import { createArrowFunction, createBreak, createConst, createExport, createFunction, createImport, createJsx, createSource, createText, createType } from "@kubb/ast";
 //#region ../../internals/utils/src/context.ts
 /**
@@ -109,6 +110,64 @@ function onProcessExit(callback) {
 	return unsubscribe;
 }
 //#endregion
+//#region src/components/Callout.tsx
+const CALLOUT_LABEL = {
+	tip: "TIP",
+	note: "NOTE",
+	important: "IMPORTANT",
+	warning: "WARNING",
+	caution: "CAUTION"
+};
+/**
+* Renders a GitHub-style alert callout — portable across GitHub, GitLab,
+* VitePress, Obsidian, and MDX.
+*
+* Emits a `<File.Source>` block containing `> [!TYPE] Title` followed by the
+* body with every line prefixed by `> `.
+*
+* @example
+* ```tsx
+* <Callout type="tip">Run `kubb start --watch` to keep the generator hot.</Callout>
+* // > [!TIP]
+* // > Run `kubb start --watch` to keep the generator hot.
+*
+* <Callout type="warning" title="Heads up">Breaking change in v6.</Callout>
+* // > [!WARNING] Heads up
+* // > Breaking change in v6.
+* ```
+*/
+function Callout({ type, title, children }) {
+	const label = CALLOUT_LABEL[type];
+	return /* @__PURE__ */ jsx("kubb-source", {
+		name: "callout",
+		children: `${title ? `> [!${label}] ${title}` : `> [!${label}]`}\n${children.trimEnd().split("\n").map((line) => line.length > 0 ? `> ${line}` : ">").join("\n")}`
+	});
+}
+Callout.displayName = "Callout";
+//#endregion
+//#region src/components/CodeBlock.tsx
+/**
+* Renders a fenced markdown code block.
+*
+* Emits a `<File.Source>` block containing the children wrapped in
+* triple-backtick fences with an optional language tag.
+*
+* @example
+* ```tsx
+* <CodeBlock lang="typescript">{'const pet = { id: 1 }'}</CodeBlock>
+* // ```typescript
+* // const pet = { id: 1 }
+* // ```
+* ```
+*/
+function CodeBlock({ lang, children }) {
+	return /* @__PURE__ */ jsx("kubb-source", {
+		name: "codeBlock",
+		children: `\`\`\`${lang ?? ""}\n${children}\n\`\`\``
+	});
+}
+CodeBlock.displayName = "CodeBlock";
+//#endregion
 //#region src/components/Const.tsx
 /**
 * Generates a TypeScript constant declaration.
@@ -263,6 +322,33 @@ File.Export = FileExport;
 File.Import = FileImport;
 File.Source = FileSource;
 //#endregion
+//#region src/components/Frontmatter.tsx
+/**
+* Emits a YAML frontmatter envelope at the top of a generated markdown file.
+*
+* Renders a `<File.Source>` block containing `---\n<yaml>\n---`. Place it as
+* the first child of `<File>` so it appears at the top of the output. Pair with
+* `parserMd` to write `.md` files that downstream tooling (VitePress, MDX,
+* static-site generators) treats as frontmatter.
+*
+* @example Page frontmatter at the top of a generated markdown file
+* ```tsx
+* <File baseName="pets.md" path="src/pets.md">
+*   <Frontmatter data={{ title: 'Pets', layout: 'doc' }} />
+*   <File.Source>
+*     {'# Pets\n\nList of pets.'}
+*   </File.Source>
+* </File>
+* ```
+*/
+function Frontmatter({ data }) {
+	return /* @__PURE__ */ jsx("kubb-source", {
+		name: "frontmatter",
+		children: `---\n${stringify(data).trimEnd()}\n---`
+	});
+}
+Frontmatter.displayName = "Frontmatter";
+//#endregion
 //#region src/components/Function.tsx
 /**
 * Generates a TypeScript function declaration.
@@ -324,6 +410,27 @@ function ArrowFunction({ children, ...props }) {
 ArrowFunction.displayName = "ArrowFunction";
 Function$1.Arrow = ArrowFunction;
 //#endregion
+//#region src/components/Heading.tsx
+/**
+* Renders an ATX-style markdown heading.
+*
+* Emits a `<File.Source>` block containing `${'#'.repeat(level)} ${children}`.
+* Use inside a `<File>` rendered by `parserMd`.
+*
+* @example
+* ```tsx
+* <Heading level={2}>Installation</Heading>
+* // ## Installation
+* ```
+*/
+function Heading({ level, children }) {
+	return /* @__PURE__ */ jsx("kubb-source", {
+		name: "heading",
+		children: `${"#".repeat(level)} ${children}`
+	});
+}
+Heading.displayName = "Heading";
+//#endregion
 //#region src/components/Jsx.tsx
 /**
 * Embeds a raw JSX string verbatim in the generated source code.
@@ -345,6 +452,53 @@ function Jsx({ children }) {
 }
 Jsx.displayName = "Jsx";
 //#endregion
+//#region src/components/List.tsx
+/**
+* Renders a markdown list.
+*
+* Emits a `<File.Source>` block containing one entry per line, prefixed with
+* `1.` / `2.` … when `ordered`, or `-` otherwise.
+*
+* @example
+* ```tsx
+* <List items={['Add the parser', 'Render the page']} />
+* // - Add the parser
+* // - Render the page
+*
+* <List ordered items={['First', 'Second']} />
+* // 1. First
+* // 2. Second
+* ```
+*/
+function List({ ordered, items }) {
+	return /* @__PURE__ */ jsx("kubb-source", {
+		name: "list",
+		children: items.map((item, index) => `${ordered ? `${index + 1}.` : "-"} ${item}`).join("\n")
+	});
+}
+List.displayName = "List";
+//#endregion
+//#region src/components/Paragraph.tsx
+/**
+* Renders a markdown paragraph.
+*
+* Emits a `<File.Source>` block containing the text as-is. Paragraphs are
+* separated from surrounding blocks by blank lines via the parser's source
+* joining.
+*
+* @example
+* ```tsx
+* <Paragraph>{'A pet object with `id` and `name` fields.'}</Paragraph>
+* ```
+*/
+function Paragraph({ children }) {
+	return /* @__PURE__ */ jsx("kubb-source", {
+		name: "paragraph",
+		children
+	});
+}
+Paragraph.displayName = "Paragraph";
+//#endregion
 //#region src/components/Root.tsx
 var import_react = /* @__PURE__ */ __toESM(require_react());
 var ErrorBoundary = class extends import_react.Component {
@@ -18484,6 +18638,6 @@ const jsxRendererSync = () => {
 	};
 };
 //#endregion
-export { Const, File, Function$1 as Function, Jsx, Root, Type, createContext, inject, jsxRenderer, jsxRendererSync, provide, unprovide };
+export { Callout, CodeBlock, Const, File, Frontmatter, Function$1 as Function, Heading, Jsx, List, Paragraph, Root, Type, createContext, inject, jsxRenderer, jsxRendererSync, provide, unprovide };
 
 //# sourceMappingURL=index.js.map

package/dist/jsx-dev-runtime.d.ts

@@ -1,6 +1,6 @@
 import { n as __name } from "./chunk-Bb7HlUDG.js";
-import { h as KubbReactNode, m as KubbReactElement } from "./types-ChkUbtyQ.js";
-import { t as JSX } from "./jsx-namespace-BW3LepJB.js";
+import { h as KubbReactNode, m as KubbReactElement } from "./types-Cur_nGCL.js";
+import { t as JSX } from "./jsx-namespace-D_TStJE_.js";
 import * as _$react from "react";
 import * as React$1 from "react/jsx-runtime";
 

package/dist/{jsx-namespace-BW3LepJB.d.ts → jsx-namespace-D_TStJE_.d.ts}

@@ -1,5 +1,5 @@
 import { n as __name } from "./chunk-Bb7HlUDG.js";
-import { _ as KubbTextProps, c as KubbConstProps, d as KubbFunctionProps, f as KubbImportProps, g as KubbSourceProps, h as KubbReactNode, l as KubbExportProps, m as KubbReactElement, p as KubbJsxProps, s as KubbArrowFunctionProps, u as KubbFileProps, v as KubbTypeProps, y as LineBreakProps } from "./types-ChkUbtyQ.js";
+import { _ as KubbTextProps, c as KubbConstProps, d as KubbFunctionProps, f as KubbImportProps, g as KubbSourceProps, h as KubbReactNode, l as KubbExportProps, m as KubbReactElement, p as KubbJsxProps, s as KubbArrowFunctionProps, u as KubbFileProps, v as KubbTypeProps, y as LineBreakProps } from "./types-Cur_nGCL.js";
 import React from "react";
 
 //#region src/jsx-namespace.d.ts
@@ -36,4 +36,4 @@ declare namespace JSX$1 {
 }
 //#endregion
 export { JSX$1 as t };
-//# sourceMappingURL=jsx-namespace-BW3LepJB.d.ts.map
+//# sourceMappingURL=jsx-namespace-D_TStJE_.d.ts.map

package/dist/jsx-runtime.d.ts

@@ -1,6 +1,6 @@
 import { n as __name } from "./chunk-Bb7HlUDG.js";
-import { h as KubbReactNode, m as KubbReactElement } from "./types-ChkUbtyQ.js";
-import { t as JSX } from "./jsx-namespace-BW3LepJB.js";
+import { h as KubbReactNode, m as KubbReactElement } from "./types-Cur_nGCL.js";
+import { t as JSX } from "./jsx-namespace-D_TStJE_.js";
 import * as _$react from "react";
 import * as React$1 from "react/jsx-runtime";
 

package/dist/{types-ChkUbtyQ.d.ts → types-Cur_nGCL.d.ts}

@@ -51,7 +51,7 @@ type DOMElement = {
   /**
    * Ordered list of child nodes attached to this element.
    */
-  childNodes: DOMNode[];
+  childNodes: Array<DOMNode>;
   internal_transform?: OutputTransformer;
   isStaticDirty?: boolean;
   staticNode?: DOMElement;
@@ -166,4 +166,4 @@ type JSDoc = {
 };
 //#endregion
 export { KubbTextProps as _, JSDoc as a, TextNode as b, KubbConstProps as c, KubbFunctionProps as d, KubbImportProps as f, KubbSourceProps as g, KubbReactNode as h, ElementNames as i, KubbExportProps as l, KubbReactElement as m, DOMNode as n, Key as o, KubbJsxProps as p, DOMNodeAttribute as r, KubbArrowFunctionProps as s, DOMElement as t, KubbFileProps as u, KubbTypeProps as v, LineBreakProps as y };
-//# sourceMappingURL=types-ChkUbtyQ.d.ts.map
+//# sourceMappingURL=types-Cur_nGCL.d.ts.map

package/dist/types.d.ts

@@ -1,2 +1,2 @@
-import { _ as KubbTextProps, a as JSDoc, b as TextNode, c as KubbConstProps, d as KubbFunctionProps, f as KubbImportProps, g as KubbSourceProps, h as KubbReactNode, i as ElementNames, l as KubbExportProps, m as KubbReactElement, n as DOMNode, o as Key, p as KubbJsxProps, r as DOMNodeAttribute, s as KubbArrowFunctionProps, t as DOMElement, u as KubbFileProps, v as KubbTypeProps, y as LineBreakProps } from "./types-ChkUbtyQ.js";
+import { _ as KubbTextProps, a as JSDoc, b as TextNode, c as KubbConstProps, d as KubbFunctionProps, f as KubbImportProps, g as KubbSourceProps, h as KubbReactNode, i as ElementNames, l as KubbExportProps, m as KubbReactElement, n as DOMNode, o as Key, p as KubbJsxProps, r as DOMNodeAttribute, s as KubbArrowFunctionProps, t as DOMElement, u as KubbFileProps, v as KubbTypeProps, y as LineBreakProps } from "./types-Cur_nGCL.js";
 export { DOMElement, DOMNode, DOMNodeAttribute, ElementNames, JSDoc, Key, KubbArrowFunctionProps, KubbConstProps, KubbExportProps, KubbFileProps, KubbFunctionProps, KubbImportProps, KubbJsxProps, KubbReactElement, KubbReactNode, KubbSourceProps, KubbTextProps, KubbTypeProps, LineBreakProps, TextNode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubb/renderer-jsx",
-  "version": "5.0.0-beta.24",
+  "version": "5.0.0-beta.26",
   "description": "JSX-based renderer for Kubb. Provides a custom React runtime, reconciler, and built-in components (File, Function, Type, Const) for component-based, type-safe code generation.",
   "keywords": [
     "codegen",
@@ -75,7 +75,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@kubb/ast": "5.0.0-beta.24"
+    "yaml": "^2.9.0",
+    "@kubb/ast": "5.0.0-beta.26"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",

package/src/Runtime.tsx

@@ -22,7 +22,7 @@ export class Runtime {
 
   exitPromise?: Promise<void>
 
-  nodes: FileNode[] = []
+  nodes: Array<FileNode> = []
   readonly #container: FiberRoot
   readonly #rootNode: DOMElement
 

package/src/SyncRuntime.tsx

@@ -60,13 +60,13 @@ function toBool(val: unknown): boolean {
   return (val ?? false) as boolean
 }
 
-function collectCodeNodes(props: Record<string, unknown>): CodeNode[] {
-  const nodes: CodeNode[] = []
+function collectCodeNodes(props: Record<string, unknown>): Array<CodeNode> {
+  const nodes: Array<CodeNode> = []
   collectCode(props['children'], nodes)
   return nodes
 }
 
-function collectCode(element: unknown, nodes: CodeNode[]): void {
+function collectCode(element: unknown, nodes: Array<CodeNode>): void {
   walkElement(
     element,
     (text) => {
@@ -76,7 +76,7 @@ function collectCode(element: unknown, nodes: CodeNode[]): void {
   )
 }
 
-function resolveCodeNode(type: string, props: Record<string, unknown>, nodes: CodeNode[]): void {
+function resolveCodeNode(type: string, props: Record<string, unknown>, nodes: Array<CodeNode>): void {
   if (type === 'br') {
     nodes.push(createBreak())
     return
@@ -103,7 +103,7 @@ function resolveCodeNode(type: string, props: Record<string, unknown>, nodes: Co
         export: props['export'] as boolean | null | undefined,
         default: props['default'] as boolean | null | undefined,
         async: props['async'] as boolean | null | undefined,
-        generics: props['generics'] as string | string[] | null | undefined,
+        generics: props['generics'] as string | Array<string> | null | undefined,
         returnType: props['returnType'] as string | null | undefined,
         JSDoc: props['JSDoc'] as JSDocNode | null | undefined,
         nodes: collectCodeNodes(props),
@@ -120,7 +120,7 @@ function resolveCodeNode(type: string, props: Record<string, unknown>, nodes: Co
         export: props['export'] as boolean | null | undefined,
         default: props['default'] as boolean | null | undefined,
         async: props['async'] as boolean | null | undefined,
-        generics: props['generics'] as string | string[] | null | undefined,
+        generics: props['generics'] as string | Array<string> | null | undefined,
         returnType: props['returnType'] as string | null | undefined,
         singleLine: props['singleLine'] as boolean | null | undefined,
         JSDoc: props['JSDoc'] as JSDocNode | null | undefined,
@@ -157,12 +157,12 @@ function resolveCodeNode(type: string, props: Record<string, unknown>, nodes: Co
   }
 }
 
-type FileChildren = { sources: SourceNode[]; exports: ExportNode[]; imports: ImportNode[] }
+type FileChildren = { sources: Array<SourceNode>; exports: Array<ExportNode>; imports: Array<ImportNode> }
 
 function collectFileChildren(element: unknown): FileChildren {
-  const sources: SourceNode[] = []
-  const exports: ExportNode[] = []
-  const imports: ImportNode[] = []
+  const sources: Array<SourceNode> = []
+  const exports: Array<ExportNode> = []
+  const imports: Array<ImportNode> = []
 
   walkElement(
     element,
@@ -278,7 +278,7 @@ export class SyncRuntime {
   /**
    * Accumulated {@link FileNode} results from every {@link render} call.
    */
-  nodes: FileNode[] = []
+  nodes: Array<FileNode> = []
 
   /**
    * Walks `element` synchronously, converts every `<kubb-file>` subtree into

package/src/components/Callout.tsx

@@ -0,0 +1,59 @@
+import type { Key, KubbReactElement } from '../types.ts'
+
+const CALLOUT_LABEL = {
+  tip: 'TIP',
+  note: 'NOTE',
+  important: 'IMPORTANT',
+  warning: 'WARNING',
+  caution: 'CAUTION',
+} as const
+
+export type CalloutType = keyof typeof CALLOUT_LABEL
+
+type Props = {
+  key?: Key
+  /**
+   * Callout kind. Maps to the uppercase label inside the `> [!TYPE]` marker.
+   */
+  type: CalloutType
+  /**
+   * Optional title rendered on the same line as the marker.
+   */
+  title?: string | null
+  /**
+   * Body text. Each line is quoted with `> ` so multi-line content stays
+   * inside the callout block.
+   */
+  children: string
+}
+
+/**
+ * Renders a GitHub-style alert callout — portable across GitHub, GitLab,
+ * VitePress, Obsidian, and MDX.
+ *
+ * Emits a `<File.Source>` block containing `> [!TYPE] Title` followed by the
+ * body with every line prefixed by `> `.
+ *
+ * @example
+ * ```tsx
+ * <Callout type="tip">Run `kubb start --watch` to keep the generator hot.</Callout>
+ * // > [!TIP]
+ * // > Run `kubb start --watch` to keep the generator hot.
+ *
+ * <Callout type="warning" title="Heads up">Breaking change in v6.</Callout>
+ * // > [!WARNING] Heads up
+ * // > Breaking change in v6.
+ * ```
+ */
+export function Callout({ type, title, children }: Props): KubbReactElement {
+  const label = CALLOUT_LABEL[type]
+  const header = title ? `> [!${label}] ${title}` : `> [!${label}]`
+  const quoted = children
+    .trimEnd()
+    .split('\n')
+    .map((line) => (line.length > 0 ? `> ${line}` : '>'))
+    .join('\n')
+  return <kubb-source name="callout">{`${header}\n${quoted}`}</kubb-source>
+}
+
+Callout.displayName = 'Callout'

package/src/components/CodeBlock.tsx

@@ -0,0 +1,37 @@
+import type { Key, KubbReactElement } from '../types.ts'
+
+type Props = {
+  key?: Key
+  /**
+   * Language tag for syntax highlighting. Rendered after the opening fence.
+   *
+   * @example
+   * `lang: 'typescript'`
+   */
+  lang?: string
+  /**
+   * Code body. Wrapped in triple-backtick fences as-is.
+   */
+  children: string
+}
+
+/**
+ * Renders a fenced markdown code block.
+ *
+ * Emits a `<File.Source>` block containing the children wrapped in
+ * triple-backtick fences with an optional language tag.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock lang="typescript">{'const pet = { id: 1 }'}</CodeBlock>
+ * // ```typescript
+ * // const pet = { id: 1 }
+ * // ```
+ * ```
+ */
+export function CodeBlock({ lang, children }: Props): KubbReactElement {
+  const fence = `\`\`\`${lang ?? ''}\n${children}\n\`\`\``
+  return <kubb-source name="codeBlock">{fence}</kubb-source>
+}
+
+CodeBlock.displayName = 'CodeBlock'

package/src/components/Frontmatter.tsx

@@ -0,0 +1,38 @@
+import { stringify } from 'yaml'
+import type { Key, KubbReactElement } from '../types.ts'
+
+type Props = {
+  key?: Key
+  /**
+   * Plain object serialised as YAML between `---` fences.
+   *
+   * @example
+   * `data: { title: 'Pets', layout: 'doc' }`
+   */
+  data: Record<string, unknown>
+}
+
+/**
+ * Emits a YAML frontmatter envelope at the top of a generated markdown file.
+ *
+ * Renders a `<File.Source>` block containing `---\n<yaml>\n---`. Place it as
+ * the first child of `<File>` so it appears at the top of the output. Pair with
+ * `parserMd` to write `.md` files that downstream tooling (VitePress, MDX,
+ * static-site generators) treats as frontmatter.
+ *
+ * @example Page frontmatter at the top of a generated markdown file
+ * ```tsx
+ * <File baseName="pets.md" path="src/pets.md">
+ *   <Frontmatter data={{ title: 'Pets', layout: 'doc' }} />
+ *   <File.Source>
+ *     {'# Pets\n\nList of pets.'}
+ *   </File.Source>
+ * </File>
+ * ```
+ */
+export function Frontmatter({ data }: Props): KubbReactElement {
+  const envelope = `---\n${stringify(data).trimEnd()}\n---`
+  return <kubb-source name="frontmatter">{envelope}</kubb-source>
+}
+
+Frontmatter.displayName = 'Frontmatter'

package/src/components/Function.tsx

@@ -46,7 +46,7 @@ type Props = {
    * @example Multiple generics
    * `generics: ['TData', 'TError = unknown']`
    */
-  generics?: string | string[] | null
+  generics?: string | Array<string> | null
   /**
    * TypeScript return type annotation written verbatim after `:`.
    * When `async` is `true`, the value is automatically wrapped in `Promise<…>`.

package/src/components/Heading.tsx

@@ -0,0 +1,34 @@
+import type { Key, KubbReactElement } from '../types.ts'
+
+type Level = 1 | 2 | 3 | 4 | 5 | 6
+
+type Props = {
+  key?: Key
+  /**
+   * Heading depth, `1` through `6`. Matches the number of `#` characters
+   * prefixed to the heading text.
+   */
+  level: Level
+  /**
+   * Heading text. Inline markdown (links, emphasis) is passed through verbatim.
+   */
+  children: string
+}
+
+/**
+ * Renders an ATX-style markdown heading.
+ *
+ * Emits a `<File.Source>` block containing `${'#'.repeat(level)} ${children}`.
+ * Use inside a `<File>` rendered by `parserMd`.
+ *
+ * @example
+ * ```tsx
+ * <Heading level={2}>Installation</Heading>
+ * // ## Installation
+ * ```
+ */
+export function Heading({ level, children }: Props): KubbReactElement {
+  return <kubb-source name="heading">{`${'#'.repeat(level)} ${children}`}</kubb-source>
+}
+
+Heading.displayName = 'Heading'

package/src/components/List.tsx

@@ -0,0 +1,40 @@
+import type { Key, KubbReactElement } from '../types.ts'
+
+type Props = {
+  key?: Key
+  /**
+   * When `true`, emits a numbered list (`1. …`). When `false` or omitted,
+   * emits a bullet list (`- …`).
+   *
+   * @default false
+   */
+  ordered?: boolean | null
+  /**
+   * One entry per line. Inline markdown is passed through verbatim.
+   */
+  items: ReadonlyArray<string>
+}
+
+/**
+ * Renders a markdown list.
+ *
+ * Emits a `<File.Source>` block containing one entry per line, prefixed with
+ * `1.` / `2.` … when `ordered`, or `-` otherwise.
+ *
+ * @example
+ * ```tsx
+ * <List items={['Add the parser', 'Render the page']} />
+ * // - Add the parser
+ * // - Render the page
+ *
+ * <List ordered items={['First', 'Second']} />
+ * // 1. First
+ * // 2. Second
+ * ```
+ */
+export function List({ ordered, items }: Props): KubbReactElement {
+  const body = items.map((item, index) => `${ordered ? `${index + 1}.` : '-'} ${item}`).join('\n')
+  return <kubb-source name="list">{body}</kubb-source>
+}
+
+List.displayName = 'List'

package/src/components/Paragraph.tsx

@@ -0,0 +1,28 @@
+import type { Key, KubbReactElement } from '../types.ts'
+
+type Props = {
+  key?: Key
+  /**
+   * Paragraph text. Inline markdown (links, emphasis, code spans) is passed
+   * through verbatim.
+   */
+  children: string
+}
+
+/**
+ * Renders a markdown paragraph.
+ *
+ * Emits a `<File.Source>` block containing the text as-is. Paragraphs are
+ * separated from surrounding blocks by blank lines via the parser's source
+ * joining.
+ *
+ * @example
+ * ```tsx
+ * <Paragraph>{'A pet object with `id` and `name` fields.'}</Paragraph>
+ * ```
+ */
+export function Paragraph({ children }: Props): KubbReactElement {
+  return <kubb-source name="paragraph">{children}</kubb-source>
+}
+
+Paragraph.displayName = 'Paragraph'

package/src/index.ts

@@ -1,8 +1,14 @@
 export { createContext, inject, provide, unprovide } from '@internals/utils'
+export { Callout } from './components/Callout.tsx'
+export { CodeBlock } from './components/CodeBlock.tsx'
 export { Const } from './components/Const.tsx'
 export { File } from './components/File.tsx'
+export { Frontmatter } from './components/Frontmatter.tsx'
 export { Function } from './components/Function.tsx'
+export { Heading } from './components/Heading.tsx'
 export { Jsx } from './components/Jsx.tsx'
+export { List } from './components/List.tsx'
+export { Paragraph } from './components/Paragraph.tsx'
 export { Root } from './components/Root.tsx'
 export { Type } from './components/Type.tsx'
 export { jsxRenderer, jsxRendererSync } from './createRenderer.tsx'

package/src/types.ts

@@ -76,7 +76,7 @@ export type DOMElement = {
   /**
    * Ordered list of child nodes attached to this element.
    */
-  childNodes: DOMNode[]
+  childNodes: Array<DOMNode>
   internal_transform?: OutputTransformer
 
   // Internal properties

package/src/utils.ts

@@ -37,8 +37,8 @@ function toBool(val: unknown): boolean {
  * `kubb-type`, and similar elements are converted into their respective {@link CodeNode}s.
  * Any unrecognized element names are silently skipped.
  */
-function collectCodeNodes(element: DOMElement): CodeNode[] {
-  const result: CodeNode[] = []
+function collectCodeNodes(element: DOMElement): Array<CodeNode> {
+  const result: Array<CodeNode> = []
 
   for (const child of element.childNodes) {
     if (!child) continue
@@ -63,7 +63,7 @@ function collectCodeNodes(element: DOMElement): CodeNode[] {
           export: attrs['export'] as boolean | null | undefined,
           default: attrs['default'] as boolean | null | undefined,
           async: attrs['async'] as boolean | null | undefined,
-          generics: attrs['generics'] as string | string[] | null | undefined,
+          generics: attrs['generics'] as string | Array<string> | null | undefined,
           returnType: attrs['returnType'] as string | null | undefined,
           JSDoc: attrs['JSDoc'] as JSDocNode | null | undefined,
           nodes: collectCodeNodes(child),
@@ -81,7 +81,7 @@ function collectCodeNodes(element: DOMElement): CodeNode[] {
           export: attrs['export'] as boolean | null | undefined,
           default: attrs['default'] as boolean | null | undefined,
           async: attrs['async'] as boolean | null | undefined,
-          generics: attrs['generics'] as string | string[] | null | undefined,
+          generics: attrs['generics'] as string | Array<string> | null | undefined,
           returnType: attrs['returnType'] as string | null | undefined,
           singleLine: attrs['singleLine'] as boolean | null | undefined,
           JSDoc: attrs['JSDoc'] as JSDocNode | null | undefined,
@@ -187,9 +187,9 @@ function* collectFileEntries(node: DOMElement): Generator<SourceNode | ExportNod
  * node by its `.kind`.
  */
 function createFileNode(child: DOMElement): FileNode {
-  const sources: SourceNode[] = []
-  const exports: ExportNode[] = []
-  const imports: ImportNode[] = []
+  const sources: Array<SourceNode> = []
+  const exports: Array<ExportNode> = []
+  const imports: Array<ImportNode> = []
 
   for (const node of collectFileEntries(child)) {
     if (node.kind === 'Source') {
@@ -241,6 +241,6 @@ export function* streamFiles(node: DOMElement): Generator<FileNode> {
  * Returns the list of file nodes in document order. Nested files are supported;
  * the walker descends into non-file elements and recurses through them.
  */
-export function collectFiles(node: DOMElement): FileNode[] {
+export function collectFiles(node: DOMElement): Array<FileNode> {
   return [...streamFiles(node)]
 }