@vaneui/md 0.0.3-alpha.20250730172254.8352948 → 0.0.3-alpha.20250803114402.e1ef256

package/dist/components/blocks/MdBlockquote.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdBlockquote: React.FC<React.PropsWithChildren>;

package/dist/components/blocks/MdHr.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdHr: React.FC<unknown>;

package/dist/components/breaks/MdHardbreak.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdHardbreak: React.FC<unknown>;

package/dist/components/breaks/MdSoftbreak.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdSoftbreak: React.FC<unknown>;

package/dist/components/code/MdFence.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdFence: React.FC<unknown>;

package/dist/components/errors/MdError.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdError: React.FC<React.PropsWithChildren>;

package/dist/components/headings/MdHeading.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdHeading: React.FC<React.PropsWithChildren>;

package/dist/components/links/MdLink.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdLink: React.FC<React.PropsWithChildren>;

package/dist/components/lists/MdItem.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdItem: React.FC<React.PropsWithChildren>;

package/dist/components/lists/MdList.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdList: React.FC<React.PropsWithChildren>;

package/dist/components/md-components.d.ts

@@ -0,0 +1,25 @@
+export { MdDocument } from './structure/MdDocument';
+export { MdInline } from './structure/MdInline';
+export { MdHeading } from './headings/MdHeading';
+export { MdParagraph } from './text/MdParagraph';
+export { MdText } from './text/MdText';
+export { MdStrong } from './text/MdStrong';
+export { MdEm } from './text/MdEm';
+export { MdS } from './text/MdS';
+export { MdCode } from './text/MdCode';
+export { MdLink } from './links/MdLink';
+export { MdImage } from './media/MdImage';
+export { MdList } from './lists/MdList';
+export { MdItem } from './lists/MdItem';
+export { MdBlockquote } from './blocks/MdBlockquote';
+export { MdHr } from './blocks/MdHr';
+export { MdFence } from './code/MdFence';
+export { MdTable } from './tables/MdTable';
+export { MdThead } from './tables/MdThead';
+export { MdTbody } from './tables/MdTbody';
+export { MdTr } from './tables/MdTr';
+export { MdTd } from './tables/MdTd';
+export { MdTh } from './tables/MdTh';
+export { MdHardbreak } from './breaks/MdHardbreak';
+export { MdSoftbreak } from './breaks/MdSoftbreak';
+export { MdError } from './errors/MdError';

package/dist/components/md.d.ts

@@ -1,7 +1,3 @@
 import React from "react";
-export declare const Md: React.FC<{
-    content: string;
-    frontmatter?: {
-        [key: string]: unknown;
-    };
-}>;
+import { MdProps } from "../types";
+export declare const Md: React.FC<MdProps>;

package/dist/components/media/MdImage.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdImage: React.FC<unknown>;

package/dist/components/structure/MdDocument.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdDocument: React.FC<React.PropsWithChildren>;

package/dist/components/structure/MdInline.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdInline: React.FC<React.PropsWithChildren>;

package/dist/components/tables/MdTable.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdTable: React.FC<React.PropsWithChildren>;

package/dist/components/tables/MdTbody.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdTbody: React.FC<React.PropsWithChildren>;

package/dist/components/tables/MdTd.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdTd: React.FC<React.PropsWithChildren>;

package/dist/components/tables/MdTh.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdTh: React.FC<React.PropsWithChildren>;

package/dist/components/tables/MdThead.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdThead: React.FC<React.PropsWithChildren>;

package/dist/components/tables/MdTr.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdTr: React.FC<React.PropsWithChildren>;

package/dist/components/text/MdCode.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdCode: React.FC<React.PropsWithChildren>;

package/dist/components/text/MdEm.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdEm: React.FC<React.PropsWithChildren>;

package/dist/components/text/MdParagraph.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdParagraph: React.FC<React.PropsWithChildren>;

package/dist/components/text/MdS.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdS: React.FC<React.PropsWithChildren>;

package/dist/components/text/MdStrong.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdStrong: React.FC<React.PropsWithChildren>;

package/dist/components/text/MdText.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MdText: React.FC<React.PropsWithChildren>;

package/dist/config/default-config.d.ts

@@ -0,0 +1,3 @@
+import { MdNodesConfig, MdComponents } from "../types";
+export declare const defaultNodesConfig: MdNodesConfig;
+export declare const defaultComponents: MdComponents;

package/dist/index.d.ts

@@ -1 +1,4 @@
-export { Md } from './components/md';
+export { Md } from "./components/md";
+export * from "./components/md-components";
+export { defaultNodesConfig, defaultComponents } from "./config/default-config";
+export * from "./types";

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
-import { List, Link, Col, Title } from '@vaneui/ui';
 import React from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Col, Title, Text, Badge, Link, List, ListItem, Card, Divider } from '@vaneui/ui';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -8460,7 +8460,7 @@ function validateTree(content, config) {
 
 // index.ts
 var tokenizer = new Tokenizer();
-function mergeConfig(config = {}) {
+function mergeConfig$1(config = {}) {
   return {
     ...config,
     tags: {
@@ -8488,14 +8488,14 @@ function resolve2(content, config) {
   return content.resolve(config);
 }
 function transform2(nodes, options) {
-  const config = mergeConfig(options);
+  const config = mergeConfig$1(options);
   const content = resolve2(nodes, config);
   if (Array.isArray(content))
     return content.flatMap((child) => child.transform(config));
   return content.transform(config);
 }
 function validate(content, options) {
-  const config = mergeConfig(options);
+  const config = mergeConfig$1(options);
   return validateTree(content, config);
 }
 function createElement(name, attributes = {}, ...children) {
@@ -8529,8 +8529,17 @@ Markdoc.createElement = createElement;
 Markdoc.truthy = truthy;
 Markdoc.format = format;
 
+const MdDocument = (props) => {
+    return jsx(Col, { ...props });
+};
+
+const MdInline = (props) => {
+    const { children, ...rest } = props;
+    return jsx("span", { ...rest, children: children });
+};
+
 const MdHeading = (props) => {
-    const { level, ...rest } = props;
+    const { level, children, ...rest } = props;
     const tag = `h${level}`;
     let size = {};
     switch (level) {
@@ -8547,66 +8556,288 @@ const MdHeading = (props) => {
             size = { sm: true };
             break;
         case 5:
+        case 6:
             size = { xs: true };
             break;
     }
-    return jsx(Title, { ...rest, ...size, tag: tag });
+    return jsx(Title, { ...rest, ...size, tag: tag, children: children });
+};
+
+const MdParagraph = (props) => {
+    const { children, ...rest } = props;
+    return jsx(Text, { ...rest, tag: "p", children: children });
 };
+
+const MdText = (props) => {
+    const { content, children, ...rest } = props;
+    return jsx(Text, { ...rest, tag: "span", children: content || children });
+};
+
+const MdStrong = (props) => {
+    const { children, ...rest } = props;
+    return jsx(Text, { ...rest, tag: "strong", bold: true, children: children });
+};
+
+const MdEm = (props) => {
+    const { children, ...rest } = props;
+    return jsx(Text, { ...rest, tag: "em", italic: true, children: children });
+};
+
+const MdS = (props) => {
+    const { children, ...rest } = props;
+    return jsx(Text, { ...rest, tag: "s", style: { textDecoration: 'line-through' }, children: children });
+};
+
+const MdCode = (props) => {
+    const { content, children, ...rest } = props;
+    return jsx(Badge, { ...rest, children: content || children });
+};
+
 const MdLink = (props) => {
-    const { href, title, ...rest } = props;
-    return jsx(Link, { link: true, ...rest, href: href, title: title, tag: Link });
+    const { href, title, children, ...rest } = props;
+    return jsx(Link, { ...rest, href: href, title: title, children: children });
 };
-const MdImg = (props) => {
+
+const MdImage = (props) => {
     const { src, alt, title, ...rest } = props;
-    return (jsx("img", { ...rest, title: title, src: src, alt: alt, className: "w-fit rounded-lg" }));
+    return (jsx("img", { ...rest, title: title, src: src, alt: alt || "", style: { display: 'block', maxWidth: '100%', height: 'auto', borderRadius: '0.5rem' } }));
 };
-const MdContainer = (props) => jsx(Col, { ...props });
-const MdList = (props) => jsx(List, { ...props });
-const Md = ({ content, frontmatter }) => {
-    const ast = Markdoc.parse(content);
-    const config = {
-        nodes: {
-            document: {
-                render: "MdContainer",
-            },
-            heading: {
-                render: "MdHeading",
-                attributes: {
-                    level: { type: Number },
-                },
-            },
-            link: {
-                render: "MdLink",
-                attributes: {
-                    href: { type: String },
-                    title: { type: String },
-                },
-            },
-            list: {
-                render: "MdList",
-            },
-            image: {
-                render: "MdImg",
-                attributes: {
-                    src: { type: String },
-                    alt: { type: String },
-                    title: { type: String },
-                },
-            },
+
+const MdList = (props) => {
+    const { children, ordered, ...rest } = props;
+    // Use the ordered attribute to determine list type
+    const listProps = ordered
+        ? { decimal: true }
+        : { disc: true };
+    return jsx(List, { ...rest, ...listProps, children: children });
+};
+
+const MdItem = (props) => {
+    const { children, ...rest } = props;
+    return jsx(ListItem, { ...rest, children: children });
+};
+
+const MdBlockquote = (props) => {
+    const { children, ...rest } = props;
+    return (jsx(Card, { ...rest, style: { borderLeft: '4px solid #d1d5db', paddingLeft: '1rem' }, children: children }));
+};
+
+const MdHr = (props) => {
+    return jsx(Divider, { ...props });
+};
+
+const MdFence = (props) => {
+    const { content, language, ...rest } = props;
+    return (jsx(Card, { ...rest, children: jsx("pre", { style: { margin: 0, fontFamily: 'monospace', fontSize: '0.875rem' }, children: jsx("code", { className: language ? `language-${language}` : "", children: content }) }) }));
+};
+
+const MdTable = (props) => {
+    const { children, ...rest } = props;
+    return (jsx(Card, { style: { overflow: 'auto', margin: '1rem 0' }, children: jsx("table", { ...rest, style: { width: '100%', borderCollapse: 'collapse' }, children: children }) }));
+};
+
+const MdThead = (props) => {
+    const { children, ...rest } = props;
+    return jsx("thead", { ...rest, children: children });
+};
+
+const MdTbody = (props) => {
+    const { children, ...rest } = props;
+    return jsx("tbody", { ...rest, children: children });
+};
+
+const MdTr = (props) => {
+    const { children, ...rest } = props;
+    return jsx("tr", { ...rest, children: children });
+};
+
+const MdTd = (props) => {
+    const { children, align, colspan, rowspan, ...rest } = props;
+    return (jsx("td", { ...rest, style: { textAlign: align }, colSpan: colspan, rowSpan: rowspan, children: children }));
+};
+
+const MdTh = (props) => {
+    const { children, align, width, ...rest } = props;
+    return (jsx("th", { ...rest, style: { textAlign: align, width }, children: children }));
+};
+
+const MdHardbreak = () => {
+    return jsx("br", {});
+};
+
+const MdSoftbreak = () => {
+    return jsx(Fragment, { children: " " });
+};
+
+const MdError = (props) => {
+    const { children, ...rest } = props;
+    return (jsxs(Card, { ...rest, style: { backgroundColor: '#fef2f2', borderColor: '#fecaca', color: '#dc2626', margin: '1rem 0' }, children: [jsx(Text, { bold: true, children: "Error:" }), " ", children] }));
+};
+
+// Default node configuration for Markdoc
+const defaultNodesConfig = {
+    document: {
+        render: "MdDocument",
+    },
+    heading: {
+        render: "MdHeading",
+        attributes: {
+            level: { type: Number, required: true },
+        },
+    },
+    paragraph: {
+        render: "MdParagraph",
+    },
+    hr: {
+        render: "MdHr",
+    },
+    image: {
+        render: "MdImage",
+        attributes: {
+            src: { type: String, required: true },
+            alt: { type: String },
+            title: { type: String },
+        },
+    },
+    fence: {
+        render: "MdFence",
+        attributes: {
+            content: { type: String },
+            language: { type: String },
+        },
+    },
+    blockquote: {
+        render: "MdBlockquote",
+    },
+    list: {
+        render: "MdList",
+        attributes: {
+            ordered: { type: Boolean },
+        },
+    },
+    item: {
+        render: "MdItem",
+    },
+    table: {
+        render: "MdTable",
+    },
+    thead: {
+        render: "MdThead",
+    },
+    tbody: {
+        render: "MdTbody",
+    },
+    tr: {
+        render: "MdTr",
+    },
+    td: {
+        render: "MdTd",
+        attributes: {
+            align: { type: String },
+            colspan: { type: Number },
+            rowspan: { type: Number },
+        },
+    },
+    th: {
+        render: "MdTh",
+        attributes: {
+            align: { type: String },
+            width: { type: String },
         },
-        variables: { markdoc: { frontmatter } }
+    },
+    strong: {
+        render: "MdStrong",
+    },
+    em: {
+        render: "MdEm",
+    },
+    s: {
+        render: "MdS",
+    },
+    link: {
+        render: "MdLink",
+        attributes: {
+            href: { type: String, required: true },
+            title: { type: String },
+        },
+    },
+    code: {
+        render: "MdCode",
+        attributes: {
+            content: { type: String }
+        }
+    },
+    hardbreak: {
+        render: "MdHardbreak",
+    },
+    softbreak: {
+        render: "MdSoftbreak",
+    },
+    error: {
+        render: "MdError",
+    },
+};
+// Default component mapping
+const defaultComponents = {
+    MdDocument: MdDocument,
+    MdHeading: MdHeading,
+    MdParagraph: MdParagraph,
+    MdHr: MdHr,
+    MdImage: MdImage,
+    MdFence: MdFence,
+    MdBlockquote: MdBlockquote,
+    MdList: MdList,
+    MdItem: MdItem,
+    MdTable: MdTable,
+    MdThead: MdThead,
+    MdTbody: MdTbody,
+    MdTr: MdTr,
+    MdTd: MdTd,
+    MdTh: MdTh,
+    MdInline: MdInline,
+    MdText: MdText,
+    MdStrong: MdStrong,
+    MdEm: MdEm,
+    MdS: MdS,
+    MdLink: MdLink,
+    MdCode: MdCode,
+    MdHardbreak: MdHardbreak,
+    MdSoftbreak: MdSoftbreak,
+    MdError: MdError,
+};
+
+// Helper function to merge configurations
+function mergeConfig(defaultConfig, userConfig) {
+    if (!userConfig)
+        return defaultConfig;
+    return {
+        nodes: { ...defaultConfig.nodes, ...userConfig.nodes },
+        components: { ...defaultConfig.components, ...userConfig.components },
+        variables: { ...defaultConfig.variables, ...userConfig.variables },
+        tags: { ...defaultConfig.tags, ...userConfig.tags },
+        functions: { ...defaultConfig.functions, ...userConfig.functions },
     };
-    const transformed = Markdoc.transform(ast, config);
+}
+const Md = ({ content, frontmatter, config: userConfig }) => {
+    const ast = Markdoc.parse(content);
+    // Merge user config with defaults
+    const mergedConfig = mergeConfig({
+        nodes: defaultNodesConfig,
+        components: defaultComponents,
+        variables: { markdoc: { frontmatter } },
+    }, userConfig);
+    // Create Markdoc config
+    const markdocConfig = {
+        nodes: mergedConfig.nodes,
+        tags: mergedConfig.tags,
+        functions: mergedConfig.functions,
+        variables: mergedConfig.variables,
+    };
+    const transformed = Markdoc.transform(ast, markdocConfig);
     return Markdoc.renderers.react(transformed, React, {
-        components: {
-            MdHeading: MdHeading,
-            MdContainer: MdContainer,
-            MdLink: MdLink,
-            MdList: MdList,
-            MdImg: MdImg,
-        },
+        components: mergedConfig.components,
     });
 };
 
-export { Md };
+export { Md, MdBlockquote, MdCode, MdDocument, MdEm, MdError, MdFence, MdHardbreak, MdHeading, MdHr, MdImage, MdInline, MdItem, MdLink, MdList, MdParagraph, MdS, MdSoftbreak, MdStrong, MdTable, MdTbody, MdTd, MdText, MdTh, MdThead, MdTr, defaultComponents, defaultNodesConfig };
 //# sourceMappingURL=index.esm.js.map