@soroush.tech/design-system 0.1.0 → 1.1.0

package/dist/Markdown/Editor.mjs

@@ -1,128 +0,0 @@
-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

@@ -1,241 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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 };