@soroush.tech/design-system 0.1.0

package/dist/Markdown/Editor.d.mts

@@ -0,0 +1,40 @@
+import { a as TextInputSize, o as TextInputTextColor, r as TextInputColor, s as TextInputVariant } from "../index-Bwi4kRpf.mjs";
+//#region src/Markdown/Editor/Editor.d.ts
+interface EditorProps {
+  /** Standalone source value — used when rendered outside a `Control`. Ignored inside one. */
+  value?: string;
+  /** Standalone change handler — used when rendered outside a `Control`. Ignored inside one. */
+  onChange?: (value: string) => void;
+  /** Placeholder shown while the source is empty. */
+  placeholder?: string;
+  /** Minimum visible rows of the source textarea. Default: `16`. */
+  minRows?: number;
+  /** Visual style of the source input — forwarded to `TextInput`. Default: `'default'`. */
+  variant?: TextInputVariant;
+  /** Focus/active border colour — forwarded to `TextInput`. */
+  color?: TextInputColor;
+  /** Text colour of the typed source — forwarded to `TextInput`. Default: `'initial'`. */
+  textColor?: TextInputTextColor;
+  /** Padding/font-size density — forwarded to `TextInput`. */
+  size?: TextInputSize;
+  /** Native `name` on the textarea — set it for native `<form>` submission / FormData. */
+  name?: string;
+  /** `id` for label association. Falls back to the enclosing `FormControl`. */
+  id?: string;
+  /** Marks the field invalid (error border). Falls back to the enclosing `FormControl`. */
+  error?: boolean;
+  /** Marks the field required. Falls back to the enclosing `FormControl`. */
+  required?: boolean;
+  /** Disables editing. Falls back to the enclosing `FormControl`. */
+  disabled?: boolean;
+  /** Shows a one-line hint about the Tab / focus-release shortcuts under the field. Default: `true`. */
+  showShortcutHint?: boolean;
+}
+/**
+ * The source `<textarea>`, with selection tracking and Tab-to-indent. Inside a `Control` it is
+ * driven by context (so the `Toolbar` can act on it); on its own it is a plain controlled field
+ * via `value`/`onChange`.
+ */
+declare function Editor({ value: valueProp, onChange: onChangeProp, placeholder, minRows, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint }: Readonly<EditorProps>): import("react").JSX.Element;
+//#endregion
+export { Editor, EditorProps };

package/dist/Markdown/Editor.mjs

@@ -0,0 +1,128 @@
+import { d as styled, u as useTheme } from "../src-DcNT2aIK.mjs";
+import { t as themeDefault } from "../themeDefault-CjXaY3ok.mjs";
+import { Flex } from "../Flex.mjs";
+import { Typography } from "../Typography.mjs";
+import { t as applyAction } from "../applyAction-B2B-hnP3.mjs";
+import { t as MarkdownContext } from "../MarkdownContext-BN8A3W-J.mjs";
+import { t as TextInput } from "../TextInput-D_lHYJlL.mjs";
+import { useContext, useId, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Markdown/Editor/Editor.tsx
+const EditorRoot = styled(Flex, {
+	name: "MarkdownEditor",
+	label: "MarkdownEditor"
+})();
+const INDENT_ACTION = {
+	id: "indent",
+	label: "",
+	ariaLabel: "",
+	kind: "linePrefix",
+	linePrefix: "	"
+};
+const noop = () => {};
+/**
+* The source `<textarea>`, with selection tracking and Tab-to-indent. Inside a `Control` it is
+* driven by context (so the `Toolbar` can act on it); on its own it is a plain controlled field
+* via `value`/`onChange`.
+*/
+function Editor({ value: valueProp, onChange: onChangeProp, placeholder = "Write your article in Markdown…", minRows = 16, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint = true }) {
+	const context = useContext(MarkdownContext);
+	const theme = useTheme();
+	const textColor = textColorProp ?? themeDefault(theme, "textColor", "initial");
+	const hintId = useId();
+	const localPendingRef = useRef(null);
+	const value = context?.value ?? valueProp ?? "";
+	const onChange = context?.onChange ?? onChangeProp ?? noop;
+	const paneRef = useRef(null);
+	const queueSelection = (selection) => {
+		if (context) context.queueSelection(selection);
+		else localPendingRef.current = selection;
+	};
+	const takeQueuedSelection = () => {
+		if (context) return context.takeQueuedSelection();
+		const selection = localPendingRef.current;
+		localPendingRef.current = null;
+		return selection;
+	};
+	const rememberSelection = (event) => {
+		if (!context) return;
+		const { selectionStart, selectionEnd } = event.currentTarget;
+		context.rememberSelection({
+			start: selectionStart,
+			end: selectionEnd
+		});
+	};
+	const handleKeyDown = (event) => {
+		const el = event.currentTarget;
+		if (event.key === "Escape" || (event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === "m") {
+			event.preventDefault();
+			el.blur();
+			return;
+		}
+		if (event.key === "Tab" && !event.shiftKey) {
+			event.preventDefault();
+			const { selectionStart, selectionEnd } = el;
+			const next = value.slice(selectionStart, selectionEnd).includes("\n") ? applyAction(INDENT_ACTION, {
+				value,
+				selectionStart,
+				selectionEnd
+			}) : {
+				value: value.slice(0, selectionStart) + "	" + value.slice(selectionEnd),
+				selectionStart: selectionStart + 1,
+				selectionEnd: selectionStart + 1
+			};
+			queueSelection({
+				start: next.selectionStart,
+				end: next.selectionEnd
+			});
+			onChange(next.value);
+		}
+	};
+	useLayoutEffect(() => {
+		const selection = takeQueuedSelection();
+		if (!selection) return;
+		const textarea = paneRef.current.querySelector("textarea");
+		textarea.focus();
+		textarea.setSelectionRange(selection.start, selection.end);
+	});
+	return /* @__PURE__ */ jsxs(EditorRoot, {
+		ref: paneRef,
+		flexDirection: "column",
+		flex: 1,
+		minWidth: 0,
+		gap: 1,
+		children: [/* @__PURE__ */ jsx(TextInput, {
+			multiline: true,
+			resize: true,
+			fullWidth: true,
+			variant,
+			color,
+			textColor,
+			size,
+			name,
+			id,
+			error,
+			required,
+			disabled,
+			minRows,
+			value,
+			placeholder,
+			onChange: (event) => onChange(event.target.value),
+			inputProps: {
+				"aria-label": "Markdown source",
+				"aria-describedby": showShortcutHint ? hintId : void 0,
+				onSelect: rememberSelection,
+				onBlur: rememberSelection,
+				onKeyDown: handleKeyDown
+			}
+		}), showShortcutHint && /* @__PURE__ */ jsx(Typography, {
+			id: hintId,
+			variant: "caption",
+			color: "secondary",
+			m: 0,
+			children: "Tab inserts a tab · press Escape or Ctrl/Cmd+Shift+M to move focus out."
+		})]
+	});
+}
+//#endregion
+export { Editor };

package/dist/Markdown/Preview.cjs

@@ -0,0 +1,241 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_rolldown_runtime = require("../rolldown-runtime-DDXJien1.cjs");
+const require_src = require("../src-BiocWFSR.cjs");
+const require_View = require("../View.cjs");
+const require_Typography = require("../Typography.cjs");
+const require_Checkbox = require("../Checkbox.cjs");
+const require_CodeBlock = require("../CodeBlock.cjs");
+const require_Image = require("../Image.cjs");
+const require_Link = require("../Link.cjs");
+const require_Quote = require("../Quote.cjs");
+const require_Table_Table = require("../Table/Table.cjs");
+const require_Table_TableBody = require("../Table/TableBody.cjs");
+const require_Table_TableCell = require("../Table/TableCell.cjs");
+const require_Table_TableContainer = require("../Table/TableContainer.cjs");
+const require_Table_TableHead = require("../Table/TableHead.cjs");
+const require_Table_TableRow = require("../Table/TableRow.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_markdown = require("react-markdown");
+react_markdown = require_rolldown_runtime.__toESM(react_markdown, 1);
+let remark_gfm = require("remark-gfm");
+remark_gfm = require_rolldown_runtime.__toESM(remark_gfm, 1);
+let rehype_highlight = require("rehype-highlight");
+rehype_highlight = require_rolldown_runtime.__toESM(rehype_highlight, 1);
+//#region src/Markdown/Preview/Preview.tsx
+const remarkPlugins = [remark_gfm.default];
+const rehypePlugins = [[rehype_highlight.default, { ignoreMissing: true }]];
+const PreviewRoot = require_src.styled(require_View.View, {
+	name: "MarkdownPreview",
+	label: "MarkdownPreview"
+})({
+	minWidth: 0,
+	maxWidth: "100%",
+	overflowWrap: "break-word"
+});
+const EMPTY_SLOT_PROPS = {};
+const SlotPropsContext = (0, react.createContext)(EMPTY_SLOT_PROPS);
+function slotted(render) {
+	function Slotted(props) {
+		return render((0, react.useContext)(SlotPropsContext), props);
+	}
+	return Slotted;
+}
+const components = {
+	h1: slotted(({ h1 }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		mt: 2,
+		variant: "h1",
+		color: "primary",
+		gutterBottom: true,
+		...h1,
+		children
+	})),
+	h2: slotted(({ h2 }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		mt: 2,
+		variant: "h2",
+		color: "primary",
+		gutterBottom: true,
+		...h2,
+		children
+	})),
+	h3: slotted(({ h3 }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		mt: 2,
+		variant: "h3",
+		color: "primary",
+		gutterBottom: true,
+		...h3,
+		children
+	})),
+	h4: slotted(({ h4 }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		mt: 2,
+		variant: "h4",
+		gutterBottom: true,
+		...h4,
+		children
+	})),
+	h5: slotted(({ h5 }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		mt: 2,
+		variant: "h5",
+		gutterBottom: true,
+		...h5,
+		children
+	})),
+	h6: slotted(({ h6 }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		mt: 2,
+		variant: "h6",
+		gutterBottom: true,
+		...h6,
+		children
+	})),
+	p: slotted(({ p }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		variant: "body1",
+		color: "secondary",
+		mb: 2,
+		lineHeight: "relaxed",
+		...p,
+		children
+	})),
+	a: slotted(({ a }, { href, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Link.Link, {
+		href,
+		underline: "hover",
+		...a,
+		children
+	})),
+	strong: slotted(({ strong }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		as: "strong",
+		variant: "inherit",
+		fontWeight: "extraBold",
+		...strong,
+		children
+	})),
+	em: slotted(({ em }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		as: "em",
+		variant: "inherit",
+		fontStyle: "italic",
+		...em,
+		children
+	})),
+	ul: slotted(({ ul }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_View.View, {
+		as: "ul",
+		pl: 3,
+		mb: 2,
+		...ul,
+		children
+	})),
+	ol: slotted(({ ol }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_View.View, {
+		as: "ol",
+		pl: 3,
+		mb: 2,
+		...ol,
+		children
+	})),
+	li: slotted(({ li }, { children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.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__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
+		checked: Boolean(checked),
+		disabled: true,
+		color: "primary",
+		size: "sm",
+		"aria-label": "Task item",
+		mr: 1,
+		...input
+	})),
+	blockquote: slotted(({ blockquote }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Quote.Quote, {
+		as: "blockquote",
+		pl: 3,
+		py: 1,
+		my: 2,
+		...blockquote,
+		children
+	})),
+	code: slotted(({ code }, { className, children }) => {
+		const isBlock = (className ?? "").includes("language-");
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.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 }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CodeBlock.CodeBlock, {
+		...pre,
+		children
+	})),
+	table: slotted(({ table }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table_TableContainer.TableContainer, {
+		my: 2,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table_Table.Table, {
+			bg: "terminal",
+			borderRadius: "md",
+			...table,
+			children
+		})
+	})),
+	thead: slotted(({ thead }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table_TableHead.TableHead, {
+		bg: "grid",
+		color: "primary",
+		...thead,
+		children
+	})),
+	tbody: slotted(({ tbody }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table_TableBody.TableBody, {
+		...tbody,
+		children
+	})),
+	tr: slotted(({ tr }, { children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table_TableRow.TableRow, {
+		isHoverable: true,
+		...tr,
+		children
+	})),
+	th: slotted(({ th }, { children, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table_TableCell.TableCell, {
+		style,
+		...th,
+		children
+	})),
+	td: slotted(({ td }, { children, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table_TableCell.TableCell, {
+		style,
+		...td,
+		children
+	})),
+	hr: slotted(({ hr }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_View.View, {
+		as: "hr",
+		my: 2,
+		height: "1px",
+		bg: "grid",
+		width: "100%",
+		border: "none",
+		...hr
+	})),
+	img: slotted(({ img }, { src, alt }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Image.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__ */ (0, react_jsx_runtime.jsx)(PreviewRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotPropsContext.Provider, {
+		value: slotProps ?? EMPTY_SLOT_PROPS,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
+			components,
+			remarkPlugins,
+			rehypePlugins,
+			children
+		})
+	}) });
+}
+//#endregion
+exports.Preview = Preview;

package/dist/Markdown/Preview.d.cts

@@ -0,0 +1,55 @@
+import { s as ViewProps } from "../index-FwTocqhP.cjs";
+import { a as TypographyProps } from "../index-CDVnvjIE.cjs";
+import { r as CheckboxProps } from "../index-DOPXpr2J.cjs";
+import { n as CodeBlockProps } from "../index-BPrjvi7B.cjs";
+import { n as ImageProps } from "../index-DD2AVtiR.cjs";
+import { n as LinkProps } from "../index-DTkQSXQD.cjs";
+import { n as QuoteProps } from "../index-DeiZHSwA.cjs";
+import { a as TableProps } from "../index-CM_KCTee.cjs";
+import { a as TableBodyProps } from "../index-GVsFY00r.cjs";
+import { o as TableCellProps } from "../index-4rC2j7fR.cjs";
+import { a as TableHeadProps } from "../index-CcYSvIJi.cjs";
+import { a as TableRowProps } from "../index-CT9uGKrs.cjs";
+import "../index-Nqco3fsM.cjs";
+//#region src/Markdown/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;
+}
+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/Markdown/Preview.d.mts

@@ -0,0 +1,55 @@
+import { s as ViewProps } from "../index-pX7tBQdJ.mjs";
+import { a as TypographyProps } from "../index-DE5PtzPn.mjs";
+import { r as CheckboxProps } from "../index-Bx24ZnOV.mjs";
+import { n as CodeBlockProps } from "../index-BoqlPb3Z.mjs";
+import { n as ImageProps } from "../index-DgRS5Aqv.mjs";
+import { n as LinkProps } from "../index-CdF_4ckE.mjs";
+import { n as QuoteProps } from "../index-Des8BisQ.mjs";
+import { a as TableProps } from "../index-CEOZI-6L.mjs";
+import { a as TableBodyProps } from "../index-C-P_hipv.mjs";
+import { o as TableCellProps } from "../index-BH8jQOdF.mjs";
+import { a as TableHeadProps } from "../index-DvW2eETV.mjs";
+import { a as TableRowProps } from "../index-CLU39rUS2.mjs";
+import "../index-Cl_yBpzW2.mjs";
+//#region src/Markdown/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;
+}
+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 };