@soroush.tech/markdown 1.2.2 → 1.2.3-rc.1

package/README.md

@@ -1,6 +1,6 @@
 [![npm version](https://img.shields.io/npm/v/@soroush.tech/markdown.svg?cacheSeconds=86400)](https://www.npmjs.com/package/@soroush.tech/markdown)
 [![npm downloads](https://img.shields.io/npm/dm/@soroush.tech/markdown.svg?cacheSeconds=86400)](https://www.npmjs.com/package/@soroush.tech/markdown)
-[![coverage](https://codecov.io/gh/soroush-tech/core/branch/main/graph/badge.svg?flag=markdown)](https://app.codecov.io/gh/soroush-tech/core?flags%5B0%5D=markdown)
+[![coverage](https://codecov.io/gh/soroush-tech/design-system/branch/main/graph/badge.svg?flag=markdown)](https://app.codecov.io/gh/soroush-tech/design-system?flags%5B0%5D=markdown)
 [![unpacked size](https://img.shields.io/npm/unpacked-size/@soroush.tech/markdown.svg?cacheSeconds=86400)](https://www.npmjs.com/package/@soroush.tech/markdown)
 [![types included](https://img.shields.io/npm/types/@soroush.tech/markdown.svg?cacheSeconds=86400)](https://www.npmjs.com/package/@soroush.tech/markdown)
 [![license](https://img.shields.io/npm/l/@soroush.tech/markdown.svg?cacheSeconds=86400)](./LICENSE)
@@ -9,7 +9,7 @@
 
 Compose a toolbar, a source editor, and a live preview however your UI needs - and every element is styled by your theme. The renderer works standalone too, turning any markdown string into themed components, with support for tables, task lists, strikethrough, autolinks, syntax-highlighted code, and mermaid diagrams.
 
-![The Preview renderer output - a heading, a formatted paragraph, a task list, a blockquote, a code block, a table, and a mermaid sequence diagram, all as themed components](https://raw.githubusercontent.com/soroush-tech/core/main/packages/markdown/src/assets/demo.png)
+![The Preview renderer output - a heading, a formatted paragraph, a task list, a blockquote, a code block, a table, and a mermaid sequence diagram, all as themed components](https://raw.githubusercontent.com/soroush-tech/design-system/main/packages/markdown/src/assets/demo.png)
 
 ## Why headless?
 
@@ -128,7 +128,7 @@ There is intentionally **no Edit·Split·Preview switch** - which panes to show,
 | `Editor`  | The source `<textarea>` - Tab-to-indent, selection, caret restore.                |
 | `Preview` | Renders a markdown string (its child) to themed components.                       |
 
-`Toolbar` and `Editor` must be rendered inside `Control`; `Preview` works anywhere. Import each directly from the package - there is no `Markdown.*` namespace. Full prop references live in the [source on GitHub](https://github.com/soroush-tech/core/tree/main/packages/markdown/src).
+`Toolbar` and `Editor` must be rendered inside `Control`; `Preview` works anywhere. Import each directly from the package - there is no `Markdown.*` namespace. Full prop references live in the [source on GitHub](https://github.com/soroush-tech/design-system/tree/main/packages/markdown/src).
 
 ## Customizing the look
 

package/dist/{Toolbar-CRlLqvj9.cjs → Toolbar-BlMahuVU.cjs}

@@ -5,7 +5,8 @@ let _soroush_tech_design_system_Button = require("@soroush.tech/design-system/Bu
 let _soroush_tech_design_system_ButtonGroup = require("@soroush.tech/design-system/ButtonGroup");
 let _soroush_tech_design_system_Flex = require("@soroush.tech/design-system/Flex");
 let _soroush_tech_design_system_Icon = require("@soroush.tech/design-system/Icon");
-let _soroush_tech_design_system_NativeSelect = require("@soroush.tech/design-system/NativeSelect");
+let _soroush_tech_design_system_MenuItem = require("@soroush.tech/design-system/MenuItem");
+let _soroush_tech_design_system_Select = require("@soroush.tech/design-system/Select");
 let _soroush_tech_design_system_Typography = require("@soroush.tech/design-system/Typography");
 let _soroush_tech_design_system = require("@soroush.tech/design-system");
 let _soroush_tech_design_system_theme = require("@soroush.tech/design-system/theme");
@@ -481,6 +482,10 @@ const DIAGRAM_OPTIONS = MERMAID_DIAGRAMS.map((diagram) => ({
 	value: diagram.value
 }));
 const DIAGRAM_SNIPPET_BY_VALUE = Object.fromEntries(MERMAID_DIAGRAMS.map((diagram) => [diagram.value, diagram.snippet]));
+const menuItems = (options) => options.map(({ label, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_MenuItem.MenuItem, {
+	value,
+	children: label
+}, value));
 const HEADING_BY_ID = Object.fromEntries(HEADING_ACTIONS.map((action) => [action.id, action]));
 const ToolbarRoot = (0, _soroush_tech_design_system.styled)(_soroush_tech_design_system_Flex.Flex, {
 	name: "MarkdownToolbar",
@@ -534,14 +539,15 @@ function Toolbar() {
 		role: "toolbar",
 		"aria-label": "Markdown formatting",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_NativeSelect.NativeSelect, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Select.Select, {
+				native: true,
 				size: "sm",
 				variant: "outlined",
 				placeholder: "Heading",
 				value: "",
-				options: HEADING_OPTIONS,
 				onChange: (value) => dispatch(HEADING_BY_ID[String(value)]),
-				selectProps: { "aria-label": "Heading level" }
+				"aria-label": "Heading level",
+				children: menuItems(HEADING_OPTIONS)
 			}),
 			groupToolbarActions(TOOLBAR_ACTIONS).map((segment) => segment.length > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_ButtonGroup.ButtonGroup, {
 				borderRadius: "sq",
@@ -562,23 +568,25 @@ function Toolbar() {
 				alignItems: "stretch",
 				children: [
 					renderButton(INLINE_CODE_ACTION),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_NativeSelect.NativeSelect, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Select.Select, {
+						native: true,
 						size: "sm",
 						variant: "outlined",
 						placeholder: "Code",
 						value: "",
-						options: CODE_LANGUAGES,
 						onChange: (value) => dispatch(codeBlockAction(String(value))),
-						selectProps: { "aria-label": "Code block language" }
+						"aria-label": "Code block language",
+						children: menuItems(CODE_LANGUAGES)
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_NativeSelect.NativeSelect, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Select.Select, {
+						native: true,
 						size: "sm",
 						variant: "outlined",
 						placeholder: "Diagram",
 						value: "",
-						options: DIAGRAM_OPTIONS,
 						onChange: (value) => dispatch(mermaidDiagramAction(DIAGRAM_SNIPPET_BY_VALUE[String(value)])),
-						selectProps: { "aria-label": "Mermaid diagram type" }
+						"aria-label": "Mermaid diagram type",
+						children: menuItems(DIAGRAM_OPTIONS)
 					})
 				]
 			})

package/dist/{Toolbar-BoEuAIiw.mjs → Toolbar-zDEkBuqy.mjs}

@@ -5,7 +5,8 @@ import { Button } from "@soroush.tech/design-system/Button";
 import { ButtonGroup } from "@soroush.tech/design-system/ButtonGroup";
 import { Flex } from "@soroush.tech/design-system/Flex";
 import { Icon } from "@soroush.tech/design-system/Icon";
-import { NativeSelect } from "@soroush.tech/design-system/NativeSelect";
+import { MenuItem } from "@soroush.tech/design-system/MenuItem";
+import { Select } from "@soroush.tech/design-system/Select";
 import { Typography } from "@soroush.tech/design-system/Typography";
 import { styled } from "@soroush.tech/design-system";
 import { themeDefault } from "@soroush.tech/design-system/theme";
@@ -481,6 +482,10 @@ const DIAGRAM_OPTIONS = MERMAID_DIAGRAMS.map((diagram) => ({
 	value: diagram.value
 }));
 const DIAGRAM_SNIPPET_BY_VALUE = Object.fromEntries(MERMAID_DIAGRAMS.map((diagram) => [diagram.value, diagram.snippet]));
+const menuItems = (options) => options.map(({ label, value }) => /* @__PURE__ */ jsx(MenuItem, {
+	value,
+	children: label
+}, value));
 const HEADING_BY_ID = Object.fromEntries(HEADING_ACTIONS.map((action) => [action.id, action]));
 const ToolbarRoot = styled(Flex, {
 	name: "MarkdownToolbar",
@@ -534,14 +539,15 @@ function Toolbar() {
 		role: "toolbar",
 		"aria-label": "Markdown formatting",
 		children: [
-			/* @__PURE__ */ jsx(NativeSelect, {
+			/* @__PURE__ */ jsx(Select, {
+				native: true,
 				size: "sm",
 				variant: "outlined",
 				placeholder: "Heading",
 				value: "",
-				options: HEADING_OPTIONS,
 				onChange: (value) => dispatch(HEADING_BY_ID[String(value)]),
-				selectProps: { "aria-label": "Heading level" }
+				"aria-label": "Heading level",
+				children: menuItems(HEADING_OPTIONS)
 			}),
 			groupToolbarActions(TOOLBAR_ACTIONS).map((segment) => segment.length > 1 ? /* @__PURE__ */ jsx(ButtonGroup, {
 				borderRadius: "sq",
@@ -562,23 +568,25 @@ function Toolbar() {
 				alignItems: "stretch",
 				children: [
 					renderButton(INLINE_CODE_ACTION),
-					/* @__PURE__ */ jsx(NativeSelect, {
+					/* @__PURE__ */ jsx(Select, {
+						native: true,
 						size: "sm",
 						variant: "outlined",
 						placeholder: "Code",
 						value: "",
-						options: CODE_LANGUAGES,
 						onChange: (value) => dispatch(codeBlockAction(String(value))),
-						selectProps: { "aria-label": "Code block language" }
+						"aria-label": "Code block language",
+						children: menuItems(CODE_LANGUAGES)
 					}),
-					/* @__PURE__ */ jsx(NativeSelect, {
+					/* @__PURE__ */ jsx(Select, {
+						native: true,
 						size: "sm",
 						variant: "outlined",
 						placeholder: "Diagram",
 						value: "",
-						options: DIAGRAM_OPTIONS,
 						onChange: (value) => dispatch(mermaidDiagramAction(DIAGRAM_SNIPPET_BY_VALUE[String(value)])),
-						selectProps: { "aria-label": "Mermaid diagram type" }
+						"aria-label": "Mermaid diagram type",
+						children: menuItems(DIAGRAM_OPTIONS)
 					})
 				]
 			})

package/dist/Toolbar.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Toolbar = require("./Toolbar-CRlLqvj9.cjs");
+const require_Toolbar = require("./Toolbar-BlMahuVU.cjs");
 exports.TablePicker = require_Toolbar.TablePicker;
 exports.Toolbar = require_Toolbar.Toolbar;

package/dist/Toolbar.mjs

@@ -1,2 +1,2 @@
-import { n as TablePicker, t as Toolbar } from "./Toolbar-BoEuAIiw.mjs";
+import { n as TablePicker, t as Toolbar } from "./Toolbar-zDEkBuqy.mjs";
 export { TablePicker, Toolbar };

package/dist/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_Preview = require("./Preview-CnMWUtU2.cjs");
 const require_MarkdownContext = require("./MarkdownContext.cjs");
 const require_Control = require("./Control.cjs");
-const require_Toolbar = require("./Toolbar-CRlLqvj9.cjs");
+const require_Toolbar = require("./Toolbar-BlMahuVU.cjs");
 const require_Editor = require("./Editor.cjs");
 const require_CodeBlock = require("./CodeBlock-Cymx1ZAY.cjs");
 const require_Mermaid = require("./Mermaid-CkUan4z-.cjs");

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { MarkdownContext, useMarkdownContext } from "./MarkdownContext.mjs";
 import { Control } from "./Control.mjs";
-import { n as TablePicker, t as Toolbar } from "./Toolbar-BoEuAIiw.mjs";
+import { n as TablePicker, t as Toolbar } from "./Toolbar-zDEkBuqy.mjs";
 import { Editor } from "./Editor.mjs";
 import { n as syntaxLight, r as CodeBlock, t as syntaxDark } from "./CodeBlock-CVlrvVPP.mjs";
 import { t as Mermaid } from "./Mermaid-B7vDwGQG.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soroush.tech/markdown",
-  "version": "1.2.2",
+  "version": "1.2.3-rc.1",
   "description": "Headless, composable markdown editor + renderer for @soroush.tech/design-system - Control, Toolbar, Editor, and Preview built on react-markdown, remark-gfm, and rehype-highlight.",
   "keywords": [
     "markdown",
@@ -14,14 +14,14 @@
   ],
   "author": "Masoud Soroush <masoud@soroush.tech>",
   "license": "MIT",
-  "homepage": "https://soroush.tech",
+  "homepage": "https://soroush.tech/markdown",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/soroush-tech/core.git",
+    "url": "git+https://github.com/soroush-tech/design-system.git",
     "directory": "packages/markdown"
   },
   "bugs": {
-    "url": "https://github.com/soroush-tech/core/issues"
+    "url": "https://github.com/soroush-tech/design-system/issues"
   },
   "type": "module",
   "sideEffects": false,
@@ -65,9 +65,9 @@
     "unified": "^11.0.5"
   },
   "peerDependencies": {
+    "@soroush.tech/design-system": "^1.3.3 || ^2.0.0-alpha.0",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "@soroush.tech/design-system": "^1.3.3"
+    "react-dom": "^19.2.8"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.5.8",
@@ -85,7 +85,7 @@
     "tsdown": "^0.22.14",
     "typescript": "~7.0.2",
     "vitest": "^4.1.10",
-    "@soroush.tech/design-system": "1.3.3",
+    "@soroush.tech/design-system": "2.0.0-rc.1",
     "@soroush.tech/eslint-config": "0.0.0",
     "@soroush.tech/hooks": "0.1.0"
   },