@soroush.tech/markdown 0.1.0

package/dist/Preview-C1CwRDj5.mjs

@@ -0,0 +1,246 @@
+import { r as CodeBlock } from "./CodeBlock-CVlrvVPP.mjs";
+import { t as Mermaid } from "./Mermaid-BclI9A7e.mjs";
+import { createContext, isValidElement, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Typography } from "@soroush.tech/design-system/Typography";
+import { styled } from "@soroush.tech/design-system";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import { Quote } from "@soroush.tech/design-system/Quote";
+import { Checkbox } from "@soroush.tech/design-system/Checkbox";
+import { Image } from "@soroush.tech/design-system/Image";
+import { Link } from "@soroush.tech/design-system/Link";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@soroush.tech/design-system/Table";
+import { View } from "@soroush.tech/design-system/View";
+function mermaidSource(children) {
+	return (Array.isArray(children) ? children.join("") : String(children ?? "")).replace(/\n$/, "");
+}
+function isMermaidBlock(children) {
+	if (!isValidElement(children)) return false;
+	const { className } = children.props;
+	return typeof className === "string" && className.includes("language-mermaid");
+}
+//#endregion
+//#region src/Preview/Preview.tsx
+const remarkPlugins = [remarkGfm];
+const rehypePlugins = [[rehypeHighlight, { ignoreMissing: true }]];
+const PreviewRoot = styled(View, {
+	name: "MarkdownPreview",
+	label: "MarkdownPreview"
+})({
+	minWidth: 0,
+	maxWidth: "100%",
+	overflowWrap: "break-word"
+});
+const EMPTY_SLOT_PROPS = {};
+const SlotPropsContext = createContext(EMPTY_SLOT_PROPS);
+function slotted(render) {
+	function Slotted(props) {
+		return render(useContext(SlotPropsContext), props);
+	}
+	return Slotted;
+}
+const components = {
+	h1: slotted(({ h1 }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		mt: 2,
+		variant: "h1",
+		color: "primary",
+		gutterBottom: true,
+		...h1,
+		children
+	})),
+	h2: slotted(({ h2 }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		mt: 2,
+		variant: "h2",
+		color: "primary",
+		gutterBottom: true,
+		...h2,
+		children
+	})),
+	h3: slotted(({ h3 }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		mt: 2,
+		variant: "h3",
+		color: "primary",
+		gutterBottom: true,
+		...h3,
+		children
+	})),
+	h4: slotted(({ h4 }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		mt: 2,
+		variant: "h4",
+		gutterBottom: true,
+		...h4,
+		children
+	})),
+	h5: slotted(({ h5 }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		mt: 2,
+		variant: "h5",
+		gutterBottom: true,
+		...h5,
+		children
+	})),
+	h6: slotted(({ h6 }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		mt: 2,
+		variant: "h6",
+		gutterBottom: true,
+		...h6,
+		children
+	})),
+	p: slotted(({ p }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		variant: "body1",
+		color: "secondary",
+		mb: 2,
+		lineHeight: "relaxed",
+		...p,
+		children
+	})),
+	a: slotted(({ a }, { href, children }) => /* @__PURE__ */ jsx(Link, {
+		href,
+		underline: "hover",
+		...a,
+		children
+	})),
+	strong: slotted(({ strong }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		as: "strong",
+		variant: "inherit",
+		fontWeight: "extraBold",
+		...strong,
+		children
+	})),
+	em: slotted(({ em }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		as: "em",
+		variant: "inherit",
+		fontStyle: "italic",
+		...em,
+		children
+	})),
+	ul: slotted(({ ul }, { children }) => /* @__PURE__ */ jsx(View, {
+		as: "ul",
+		pl: 3,
+		mb: 2,
+		...ul,
+		children
+	})),
+	ol: slotted(({ ol }, { children }) => /* @__PURE__ */ jsx(View, {
+		as: "ol",
+		pl: 3,
+		mb: 2,
+		...ol,
+		children
+	})),
+	li: slotted(({ li }, { children, className }) => /* @__PURE__ */ jsx(Typography, {
+		as: "li",
+		color: "secondary",
+		lineHeight: "base",
+		variant: "body1",
+		gutterBottom: true,
+		style: className?.includes("task-list-item") ? { listStyleType: "none" } : void 0,
+		...li,
+		children
+	})),
+	input: slotted(({ input }, { checked }) => /* @__PURE__ */ jsx(Checkbox, {
+		checked: Boolean(checked),
+		disabled: true,
+		color: "primary",
+		size: "sm",
+		"aria-label": "Task item",
+		mr: 1,
+		...input
+	})),
+	blockquote: slotted(({ blockquote }, { children }) => /* @__PURE__ */ jsx(Quote, {
+		as: "blockquote",
+		pl: 3,
+		py: 1,
+		my: 2,
+		...blockquote,
+		children
+	})),
+	code: slotted(({ code, mermaid }, { className, children }) => {
+		const classes = className ?? "";
+		if (classes.includes("language-mermaid")) return /* @__PURE__ */ jsx(Mermaid, {
+			chart: mermaidSource(children),
+			...mermaid
+		});
+		const isBlock = classes.includes("language-");
+		return /* @__PURE__ */ jsx(Typography, {
+			as: "code",
+			color: "initial",
+			variant: "inherit",
+			fontFamily: "mono",
+			display: isBlock ? "block" : "inline",
+			bg: isBlock ? "transparent" : "paper",
+			px: isBlock ? 0 : 1,
+			borderRadius: "sm",
+			...code,
+			children
+		});
+	}),
+	pre: slotted(({ pre }, { children }) => isMermaidBlock(children) ? children : /* @__PURE__ */ jsx(CodeBlock, {
+		...pre,
+		children
+	})),
+	table: slotted(({ table }, { children }) => /* @__PURE__ */ jsx(TableContainer, {
+		my: 2,
+		children: /* @__PURE__ */ jsx(Table, {
+			bg: "terminal",
+			borderRadius: "md",
+			...table,
+			children
+		})
+	})),
+	thead: slotted(({ thead }, { children }) => /* @__PURE__ */ jsx(TableHead, {
+		bg: "grid",
+		color: "primary",
+		...thead,
+		children
+	})),
+	tbody: slotted(({ tbody }, { children }) => /* @__PURE__ */ jsx(TableBody, {
+		...tbody,
+		children
+	})),
+	tr: slotted(({ tr }, { children }) => /* @__PURE__ */ jsx(TableRow, {
+		isHoverable: true,
+		...tr,
+		children
+	})),
+	th: slotted(({ th }, { children, style }) => /* @__PURE__ */ jsx(TableCell, {
+		style,
+		...th,
+		children
+	})),
+	td: slotted(({ td }, { children, style }) => /* @__PURE__ */ jsx(TableCell, {
+		style,
+		...td,
+		children
+	})),
+	hr: slotted(({ hr }) => /* @__PURE__ */ jsx(View, {
+		as: "hr",
+		my: 2,
+		height: "1px",
+		bg: "grid",
+		width: "100%",
+		border: "none",
+		...hr
+	})),
+	img: slotted(({ img }, { src, alt }) => /* @__PURE__ */ jsx(Image, {
+		src,
+		alt,
+		maxWidth: "100%",
+		...img
+	}))
+};
+/** Renders a markdown string with every element mapped to a design-system primitive. */
+function Preview({ children, slotProps }) {
+	return /* @__PURE__ */ jsx(PreviewRoot, { children: /* @__PURE__ */ jsx(SlotPropsContext.Provider, {
+		value: slotProps ?? EMPTY_SLOT_PROPS,
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			components,
+			remarkPlugins,
+			rehypePlugins,
+			children
+		})
+	}) });
+}
+//#endregion
+export { Preview as t };

package/dist/Preview.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Preview = require("./Preview-BVT70uXa.cjs");
+exports.Preview = require_Preview.Preview;

package/dist/Preview.d.cts

@@ -0,0 +1,53 @@
+import { a as CodeBlockProps } from "./index-BtMTBOcM.cjs";
+import { r as MermaidProps } from "./index-BO0LyUUG.cjs";
+import { ViewProps } from "@soroush.tech/design-system/View";
+import { QuoteProps } from "@soroush.tech/design-system/Quote";
+import { CheckboxProps } from "@soroush.tech/design-system/Checkbox";
+import { ImageProps } from "@soroush.tech/design-system/Image";
+import { LinkProps } from "@soroush.tech/design-system/Link";
+import { TableBodyProps, TableCellProps, TableHeadProps, TableProps, TableRowProps } from "@soroush.tech/design-system/Table";
+import { TypographyProps } from "@soroush.tech/design-system/Typography";
+//#region src/Preview/Preview.d.ts
+/**
+ * Per-element prop overrides, merged over the design-system defaults (the caller's props win).
+ * Keyed by markdown element — e.g. `slotProps={{ p: { color: 'primary' }, h1: { variant: 'h2' } }}`.
+ */
+interface PreviewSlotProps {
+  h1?: TypographyProps;
+  h2?: TypographyProps;
+  h3?: TypographyProps;
+  h4?: TypographyProps;
+  h5?: TypographyProps;
+  h6?: TypographyProps;
+  p?: TypographyProps;
+  strong?: TypographyProps;
+  em?: TypographyProps;
+  li?: TypographyProps;
+  code?: TypographyProps;
+  a?: LinkProps;
+  ul?: ViewProps;
+  ol?: ViewProps;
+  hr?: ViewProps;
+  blockquote?: QuoteProps;
+  img?: ImageProps;
+  th?: TableCellProps;
+  td?: TableCellProps;
+  pre?: CodeBlockProps;
+  input?: CheckboxProps;
+  table?: TableProps;
+  thead?: TableHeadProps;
+  tbody?: TableBodyProps;
+  tr?: TableRowProps;
+  /** Props for a ` ```mermaid ` fence's `Mermaid` renderer — including `diagram` (viewer) props. */
+  mermaid?: Omit<MermaidProps, 'chart'>;
+}
+interface PreviewProps {
+  /** The markdown source to render. */
+  children: string;
+  /** Per-element prop overrides, merged over the defaults. */
+  slotProps?: PreviewSlotProps;
+}
+/** Renders a markdown string with every element mapped to a design-system primitive. */
+declare function Preview({ children, slotProps }: Readonly<PreviewProps>): import("react").JSX.Element;
+//#endregion
+export { Preview, PreviewProps, PreviewSlotProps };

package/dist/Preview.d.mts

@@ -0,0 +1,53 @@
+import { a as CodeBlockProps } from "./index-BtMTBOcM.mjs";
+import { r as MermaidProps } from "./index-BO0LyUUG.mjs";
+import { TypographyProps } from "@soroush.tech/design-system/Typography";
+import { QuoteProps } from "@soroush.tech/design-system/Quote";
+import { CheckboxProps } from "@soroush.tech/design-system/Checkbox";
+import { ImageProps } from "@soroush.tech/design-system/Image";
+import { LinkProps } from "@soroush.tech/design-system/Link";
+import { TableBodyProps, TableCellProps, TableHeadProps, TableProps, TableRowProps } from "@soroush.tech/design-system/Table";
+import { ViewProps } from "@soroush.tech/design-system/View";
+//#region src/Preview/Preview.d.ts
+/**
+ * Per-element prop overrides, merged over the design-system defaults (the caller's props win).
+ * Keyed by markdown element — e.g. `slotProps={{ p: { color: 'primary' }, h1: { variant: 'h2' } }}`.
+ */
+interface PreviewSlotProps {
+  h1?: TypographyProps;
+  h2?: TypographyProps;
+  h3?: TypographyProps;
+  h4?: TypographyProps;
+  h5?: TypographyProps;
+  h6?: TypographyProps;
+  p?: TypographyProps;
+  strong?: TypographyProps;
+  em?: TypographyProps;
+  li?: TypographyProps;
+  code?: TypographyProps;
+  a?: LinkProps;
+  ul?: ViewProps;
+  ol?: ViewProps;
+  hr?: ViewProps;
+  blockquote?: QuoteProps;
+  img?: ImageProps;
+  th?: TableCellProps;
+  td?: TableCellProps;
+  pre?: CodeBlockProps;
+  input?: CheckboxProps;
+  table?: TableProps;
+  thead?: TableHeadProps;
+  tbody?: TableBodyProps;
+  tr?: TableRowProps;
+  /** Props for a ` ```mermaid ` fence's `Mermaid` renderer — including `diagram` (viewer) props. */
+  mermaid?: Omit<MermaidProps, 'chart'>;
+}
+interface PreviewProps {
+  /** The markdown source to render. */
+  children: string;
+  /** Per-element prop overrides, merged over the defaults. */
+  slotProps?: PreviewSlotProps;
+}
+/** Renders a markdown string with every element mapped to a design-system primitive. */
+declare function Preview({ children, slotProps }: Readonly<PreviewProps>): import("react").JSX.Element;
+//#endregion
+export { Preview, PreviewProps, PreviewSlotProps };

package/dist/Preview.mjs

@@ -0,0 +1,2 @@
+import { t as Preview } from "./Preview-C1CwRDj5.mjs";
+export { Preview };