@soroush.tech/design-system 0.1.0 → 1.1.0

package/dist/Toolbar-B-W22Sk4.cjs

@@ -1,459 +0,0 @@
-const require_src = require("./src-BiocWFSR.cjs");
-const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
-const require_Flex = require("./Flex.cjs");
-const require_Button = require("./Button.cjs");
-const require_ButtonGroup = require("./ButtonGroup.cjs");
-const require_Typography = require("./Typography.cjs");
-const require_Icon = require("./Icon-1YtNCUKo.cjs");
-const require_MarkdownContext = require("./MarkdownContext-DSwjzpH8.cjs");
-const require_NativeSelect = require("./NativeSelect.cjs");
-const require_Popover = require("./Popover-CRDLmywF.cjs");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Markdown/utils/buildTableSnippet.ts
-/**
-* Builds a GFM table snippet with `rows` total rows (a header row plus `rows - 1` body rows)
-* and `cols` columns, wrapped in blank lines so it sits on its own block.
-*/
-function buildTableSnippet(rows, cols) {
-	const row = (cell) => `| ${Array.from({ length: cols }, (_, index) => cell(index)).join(" | ")} |`;
-	return `\n${[
-		row((index) => `Column ${index + 1}`),
-		row(() => "---"),
-		...Array.from({ length: rows - 1 }, () => row(() => "Cell"))
-	].join("\n")}\n`;
-}
-//#endregion
-//#region src/Markdown/utils/groupToolbarActions.ts
-/**
-* Splits actions into render segments: consecutive actions sharing a `group` id collapse into
-* one segment (rendered as a joined `ButtonGroup`); ungrouped actions each get their own.
-*/
-function groupToolbarActions(actions) {
-	const segments = [];
-	actions.forEach((action) => {
-		const current = segments.at(-1);
-		if (current && action.group !== void 0 && current[0].group === action.group) current.push(action);
-		else segments.push([action]);
-	});
-	return segments;
-}
-//#endregion
-//#region src/Markdown/const.ts
-const LIST_MARKER = /^(?:- \[[ xX]\] |- |\d+\. )/;
-/**
-* Every formatting action the toolbar exposes — one per markdown feature the `Markdown`
-* renderer supports (GFM + the component map in `Markdown.Preview`). Data-driven so the
-* toolbar and the transform logic stay in sync.
-*/
-const TOOLBAR_ACTIONS = [
-	{
-		id: "bold",
-		label: "B",
-		ariaLabel: "Bold",
-		emphasis: "bold",
-		group: "inline",
-		kind: "wrap",
-		prefix: "**",
-		suffix: "**",
-		placeholder: "bold text"
-	},
-	{
-		id: "italic",
-		label: "I",
-		ariaLabel: "Italic",
-		emphasis: "italic",
-		group: "inline",
-		kind: "wrap",
-		prefix: "_",
-		suffix: "_",
-		placeholder: "italic text"
-	},
-	{
-		id: "strikethrough",
-		label: "S",
-		ariaLabel: "Strikethrough",
-		emphasis: "strike",
-		group: "inline",
-		kind: "wrap",
-		prefix: "~~",
-		suffix: "~~",
-		placeholder: "struck text"
-	},
-	{
-		id: "quote",
-		label: "Quote",
-		ariaLabel: "Blockquote",
-		icon: "format_quote",
-		kind: "linePrefix",
-		linePrefix: "> ",
-		family: /^> /
-	},
-	{
-		id: "ul",
-		label: "List",
-		ariaLabel: "Bulleted list",
-		icon: "format_list_bulleted",
-		group: "list",
-		kind: "linePrefix",
-		linePrefix: "- ",
-		family: LIST_MARKER
-	},
-	{
-		id: "ol",
-		label: "Ordered",
-		ariaLabel: "Numbered list",
-		icon: "format_list_numbered",
-		group: "list",
-		kind: "linePrefix",
-		linePrefix: "1. ",
-		family: LIST_MARKER
-	},
-	{
-		id: "task",
-		label: "Task",
-		ariaLabel: "Task list",
-		icon: "checklist",
-		group: "list",
-		kind: "linePrefix",
-		linePrefix: "- [ ] ",
-		family: LIST_MARKER
-	},
-	{
-		id: "link",
-		label: "Link",
-		ariaLabel: "Link",
-		icon: "link",
-		kind: "wrap",
-		prefix: "[",
-		suffix: "](url)",
-		placeholder: "link text"
-	},
-	{
-		id: "image",
-		label: "Image",
-		ariaLabel: "Image",
-		icon: "image",
-		kind: "wrap",
-		prefix: "![",
-		suffix: "](url)",
-		placeholder: "alt text"
-	},
-	{
-		id: "hr",
-		label: "HR",
-		ariaLabel: "Horizontal rule",
-		kind: "insert",
-		snippet: "\n\n---\n\n"
-	}
-];
-/** Fence languages offered by the code-block select; `value` is appended after the opening ```. */
-const CODE_LANGUAGES = [
-	{
-		label: "Plain",
-		value: "text"
-	},
-	{
-		label: "HTML",
-		value: "html"
-	},
-	{
-		label: "CSS",
-		value: "css"
-	},
-	{
-		label: "JavaScript",
-		value: "js"
-	},
-	{
-		label: "TypeScript",
-		value: "ts"
-	},
-	{
-		label: "JSON",
-		value: "json"
-	},
-	{
-		label: "Bash",
-		value: "bash"
-	},
-	{
-		label: "Python",
-		value: "python"
-	},
-	{
-		label: "Markdown",
-		value: "md"
-	}
-];
-/** Inline `code` — rendered next to the code-block select so both code controls sit together. */
-const INLINE_CODE_ACTION = {
-	id: "inline-code",
-	label: "Code",
-	ariaLabel: "Inline code",
-	icon: "code",
-	kind: "wrap",
-	prefix: "`",
-	suffix: "`",
-	placeholder: "code"
-};
-/** Builds the fenced-code-block wrap action for a chosen `language`. */
-const codeBlockAction = (language) => ({
-	id: "code-block",
-	label: "Code block",
-	ariaLabel: "Code block",
-	kind: "wrap",
-	prefix: `\`\`\`${language}\n`,
-	suffix: "\n```",
-	placeholder: "code",
-	block: true
-});
-const HEADING_MARKER = /^#{1,6} /;
-const headingAction = (level) => ({
-	id: `h${level}`,
-	label: `H${level}`,
-	ariaLabel: `Heading ${level}`,
-	kind: "linePrefix",
-	linePrefix: `${"#".repeat(level)} `,
-	family: HEADING_MARKER,
-	toggle: false
-});
-/** Every heading level the `Markdown` renderer supports (h1–h6) — offered via the toolbar select. */
-const HEADING_ACTIONS = [
-	1,
-	2,
-	3,
-	4,
-	5,
-	6
-].map(headingAction);
-//#endregion
-//#region src/Markdown/Toolbar/TablePicker.tsx
-/** Smallest grid shown, and the hard cap it grows to as the hover nears the edge. */
-const MIN_EXTENT = 8;
-const MAX_EXTENT = 20;
-const DEFAULT_EXTENT = {
-	rows: MIN_EXTENT,
-	cols: MIN_EXTENT
-};
-const growExtent = (current, hovered) => Math.min(MAX_EXTENT, Math.max(current, hovered + 1));
-const Cell = require_src.styled("button", {
-	name: "MarkdownToolbar",
-	slot: "tablePickerCell",
-	label: "MarkdownEditorTableCell",
-	shouldForwardProp: (prop) => prop !== "isActive"
-})(({ theme, isActive }) => ({
-	width: 16,
-	height: 16,
-	padding: 0,
-	margin: 0,
-	appearance: "none",
-	cursor: "pointer",
-	borderRadius: theme.radii.sm,
-	border: `${theme.borderWidths.thin} solid ${theme.border.light}`,
-	backgroundColor: isActive ? theme.palette[require_themeDefault.themeDefault(theme, "color", "primary")].main : theme.background[require_themeDefault.themeDefault(theme, "inputBg", "terminal")]
-}));
-/** A "Table" trigger that opens a hover grid for choosing table dimensions. */
-function TablePicker({ onSelect }) {
-	const [anchorEl, setAnchorEl] = (0, react.useState)(null);
-	const [hover, setHover] = (0, react.useState)({
-		rows: 0,
-		cols: 0
-	});
-	const [extent, setExtent] = (0, react.useState)(DEFAULT_EXTENT);
-	const open = anchorEl !== null;
-	const close = () => {
-		setAnchorEl(null);
-		setHover({
-			rows: 0,
-			cols: 0
-		});
-		setExtent(DEFAULT_EXTENT);
-	};
-	const hoverCell = (rows, cols) => {
-		setHover({
-			rows,
-			cols
-		});
-		setExtent((prev) => ({
-			rows: growExtent(prev.rows, rows),
-			cols: growExtent(prev.cols, cols)
-		}));
-	};
-	const pick = (rows, cols) => {
-		onSelect(rows, cols);
-		close();
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
-		type: "button",
-		variant: "outlined",
-		size: "sm",
-		"aria-label": "Table",
-		"aria-haspopup": "grid",
-		"aria-expanded": open,
-		onClick: (event) => setAnchorEl(event.currentTarget),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
-			name: "table",
-			size: "1.1rem"
-		})
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover, {
-		open,
-		anchorEl,
-		onClose: close,
-		anchorOrigin: {
-			vertical: "bottom",
-			horizontal: "left"
-		},
-		transformOrigin: {
-			vertical: "top",
-			horizontal: "left"
-		},
-		disableAriaHidden: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
-			flexDirection: "column",
-			gap: 2,
-			p: 2,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
-				flexDirection: "column",
-				gap: 1,
-				role: "grid",
-				"aria-label": "Table size",
-				children: Array.from({ length: extent.rows }, (_, r) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
-					flexDirection: "row",
-					gap: 1,
-					role: "row",
-					children: Array.from({ length: extent.cols }, (_, c) => {
-						const rows = r + 1;
-						const cols = c + 1;
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Cell, {
-							type: "button",
-							role: "gridcell",
-							isActive: rows <= hover.rows && cols <= hover.cols,
-							"aria-label": `${rows} by ${cols}`,
-							onMouseEnter: () => hoverCell(rows, cols),
-							onFocus: () => hoverCell(rows, cols),
-							onClick: () => pick(rows, cols)
-						}, c);
-					})
-				}, r))
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
-				variant: "caption",
-				color: "secondary",
-				align: "center",
-				m: 0,
-				children: hover.rows > 0 ? `${hover.rows} × ${hover.cols}` : "Select size"
-			})]
-		})
-	})] });
-}
-//#endregion
-//#region src/Markdown/Toolbar/Toolbar.tsx
-const HEADING_OPTIONS = HEADING_ACTIONS.map((action) => ({
-	label: action.label,
-	value: action.id
-}));
-const HEADING_BY_ID = Object.fromEntries(HEADING_ACTIONS.map((action) => [action.id, action]));
-const ToolbarRoot = require_src.styled(require_Flex.Flex, {
-	name: "MarkdownToolbar",
-	label: "MarkdownToolbar"
-})();
-const StrikeLabel = require_src.styled(require_Typography.Typography, {
-	name: "MarkdownToolbar",
-	slot: "strike",
-	label: "MarkdownStrike"
-})({ textDecoration: "line-through" });
-/** Renders a button's content: an icon, an emphasis-styled letter, or the plain label. */
-function ActionLabel({ action }) {
-	if (action.icon) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
-		name: action.icon,
-		size: "1.1rem"
-	});
-	if (action.emphasis === "bold") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
-		as: "span",
-		variant: "inherit",
-		fontWeight: "extraBold",
-		children: action.label
-	});
-	if (action.emphasis === "italic") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
-		as: "span",
-		variant: "inherit",
-		fontStyle: "italic",
-		children: action.label
-	});
-	if (action.emphasis === "strike") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StrikeLabel, {
-		as: "span",
-		variant: "inherit",
-		children: action.label
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: action.label });
-}
-/** Formatting buttons, heading + code-language selects, and the table-size picker. */
-function Toolbar() {
-	const { dispatch } = require_MarkdownContext.useMarkdownContext();
-	const renderButton = (action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
-		type: "button",
-		variant: "outlined",
-		size: "sm",
-		"aria-label": action.ariaLabel,
-		onClick: () => dispatch(action),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionLabel, { action })
-	}, action.id);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarRoot, {
-		flexDirection: "row",
-		flexWrap: "wrap",
-		gap: 1,
-		role: "toolbar",
-		"aria-label": "Markdown formatting",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NativeSelect.NativeSelect, {
-				size: "sm",
-				variant: "outlined",
-				placeholder: "Heading",
-				value: "",
-				options: HEADING_OPTIONS,
-				onChange: (value) => dispatch(HEADING_BY_ID[String(value)]),
-				selectProps: { "aria-label": "Heading level" }
-			}),
-			groupToolbarActions(TOOLBAR_ACTIONS).map((segment) => segment.length > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonGroup.ButtonGroup, {
-				borderRadius: "sq",
-				size: "sm",
-				variant: "outlined",
-				children: segment.map(renderButton)
-			}, segment[0].id) : renderButton(segment[0])),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TablePicker, { onSelect: (rows, cols) => dispatch({
-				id: "table",
-				label: "Table",
-				ariaLabel: "Table",
-				kind: "insert",
-				snippet: buildTableSnippet(rows, cols)
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
-				flexDirection: "row",
-				gap: 0,
-				alignItems: "stretch",
-				children: [renderButton(INLINE_CODE_ACTION), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NativeSelect.NativeSelect, {
-					size: "sm",
-					variant: "outlined",
-					placeholder: "Code",
-					value: "",
-					options: CODE_LANGUAGES,
-					onChange: (value) => dispatch(codeBlockAction(String(value))),
-					selectProps: { "aria-label": "Code block language" }
-				})]
-			})
-		]
-	});
-}
-//#endregion
-Object.defineProperty(exports, "TablePicker", {
-	enumerable: true,
-	get: function() {
-		return TablePicker;
-	}
-});
-Object.defineProperty(exports, "Toolbar", {
-	enumerable: true,
-	get: function() {
-		return Toolbar;
-	}
-});