@soroush.tech/design-system 0.1.0

package/dist/Toolbar-KbR97iJS.mjs

@@ -0,0 +1,448 @@
+import { d as styled } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { Flex } from "./Flex.mjs";
+import { Button } from "./Button.mjs";
+import { ButtonGroup } from "./ButtonGroup.mjs";
+import { Typography } from "./Typography.mjs";
+import { t as Icon } from "./Icon-CAKRmFz3.mjs";
+import { n as useMarkdownContext } from "./MarkdownContext-BN8A3W-J.mjs";
+import { NativeSelect } from "./NativeSelect.mjs";
+import { t as Popover } from "./Popover-B61J7C79.mjs";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "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 = 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[themeDefault(theme, "color", "primary")].main : theme.background[themeDefault(theme, "inputBg", "terminal")]
+}));
+/** A "Table" trigger that opens a hover grid for choosing table dimensions. */
+function TablePicker({ onSelect }) {
+	const [anchorEl, setAnchorEl] = useState(null);
+	const [hover, setHover] = useState({
+		rows: 0,
+		cols: 0
+	});
+	const [extent, setExtent] = 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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outlined",
+		size: "sm",
+		"aria-label": "Table",
+		"aria-haspopup": "grid",
+		"aria-expanded": open,
+		onClick: (event) => setAnchorEl(event.currentTarget),
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: "table",
+			size: "1.1rem"
+		})
+	}), /* @__PURE__ */ jsx(Popover, {
+		open,
+		anchorEl,
+		onClose: close,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		},
+		disableAriaHidden: true,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			flexDirection: "column",
+			gap: 2,
+			p: 2,
+			children: [/* @__PURE__ */ jsx(Flex, {
+				flexDirection: "column",
+				gap: 1,
+				role: "grid",
+				"aria-label": "Table size",
+				children: Array.from({ length: extent.rows }, (_, r) => /* @__PURE__ */ jsx(Flex, {
+					flexDirection: "row",
+					gap: 1,
+					role: "row",
+					children: Array.from({ length: extent.cols }, (_, c) => {
+						const rows = r + 1;
+						const cols = c + 1;
+						return /* @__PURE__ */ 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__ */ jsx(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 = styled(Flex, {
+	name: "MarkdownToolbar",
+	label: "MarkdownToolbar"
+})();
+const StrikeLabel = styled(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__ */ jsx(Icon, {
+		name: action.icon,
+		size: "1.1rem"
+	});
+	if (action.emphasis === "bold") return /* @__PURE__ */ jsx(Typography, {
+		as: "span",
+		variant: "inherit",
+		fontWeight: "extraBold",
+		children: action.label
+	});
+	if (action.emphasis === "italic") return /* @__PURE__ */ jsx(Typography, {
+		as: "span",
+		variant: "inherit",
+		fontStyle: "italic",
+		children: action.label
+	});
+	if (action.emphasis === "strike") return /* @__PURE__ */ jsx(StrikeLabel, {
+		as: "span",
+		variant: "inherit",
+		children: action.label
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children: action.label });
+}
+/** Formatting buttons, heading + code-language selects, and the table-size picker. */
+function Toolbar() {
+	const { dispatch } = useMarkdownContext();
+	const renderButton = (action) => /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outlined",
+		size: "sm",
+		"aria-label": action.ariaLabel,
+		onClick: () => dispatch(action),
+		children: /* @__PURE__ */ jsx(ActionLabel, { action })
+	}, action.id);
+	return /* @__PURE__ */ jsxs(ToolbarRoot, {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: 1,
+		role: "toolbar",
+		"aria-label": "Markdown formatting",
+		children: [
+			/* @__PURE__ */ jsx(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__ */ jsx(ButtonGroup, {
+				borderRadius: "sq",
+				size: "sm",
+				variant: "outlined",
+				children: segment.map(renderButton)
+			}, segment[0].id) : renderButton(segment[0])),
+			/* @__PURE__ */ jsx(TablePicker, { onSelect: (rows, cols) => dispatch({
+				id: "table",
+				label: "Table",
+				ariaLabel: "Table",
+				kind: "insert",
+				snippet: buildTableSnippet(rows, cols)
+			}) }),
+			/* @__PURE__ */ jsxs(Flex, {
+				flexDirection: "row",
+				gap: 0,
+				alignItems: "stretch",
+				children: [renderButton(INLINE_CODE_ACTION), /* @__PURE__ */ jsx(NativeSelect, {
+					size: "sm",
+					variant: "outlined",
+					placeholder: "Code",
+					value: "",
+					options: CODE_LANGUAGES,
+					onChange: (value) => dispatch(codeBlockAction(String(value))),
+					selectProps: { "aria-label": "Code block language" }
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { TablePicker as n, Toolbar as t };

package/dist/Typography.cjs

@@ -0,0 +1,64 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+let _emotion_react = require("@emotion/react");
+//#region src/Typography/Typography.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"noWrap",
+	"gutterBottom",
+	"align",
+	"textTransform"
+]);
+const colorSystem = (0, require_src.src_exports.system)({
+	color: {
+		property: "color",
+		scale: "text"
+	},
+	bg: {
+		property: "backgroundColor",
+		scale: "background"
+	},
+	opacity: { property: "opacity" },
+	textTransform: { property: "textTransform" }
+});
+const typographyVariants = ({ variant = "body1", theme }) => {
+	const { fontSize, fontWeight, letterSpacing, textTransform } = theme.typography[variant];
+	return {
+		...fontSize !== void 0 && { fontSize: theme.fontSizes[fontSize] },
+		...fontWeight && { fontWeight: theme.fontWeights[fontWeight] },
+		...letterSpacing && { letterSpacing: theme.letterSpacings[letterSpacing] },
+		...textTransform && { textTransform }
+	};
+};
+const TypographyBase = require_src.styled("p", {
+	name: "Typography",
+	label: "Typography",
+	shouldForwardProp,
+	systemProps: [
+		require_src.src_exports.space,
+		require_src.src_exports.layout,
+		colorSystem,
+		require_src.src_exports.typography,
+		require_src.src_exports.flexbox,
+		require_src.src_exports.border,
+		require_src.src_exports.position
+	]
+})(typographyVariants, ({ align }) => align ? { textAlign: align } : {}, ({ gutterBottom }) => gutterBottom ? { marginBottom: "0.5em" } : {}, ({ noWrap }) => noWrap ? {
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+} : {});
+function Typography({ variant = "body1", as, ...rest }) {
+	const theme = (0, _emotion_react.useTheme)();
+	const element = as ?? theme.typography[variant].element;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TypographyBase, {
+		as: element,
+		variant,
+		...rest
+	});
+}
+//#endregion
+exports.Typography = Typography;

package/dist/Typography.d.cts

@@ -0,0 +1,3 @@
+import { F as TypographyVariant } from "./themes-D81JYbqm.cjs";
+import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-CDVnvjIE.cjs";
+export { BackgroundToken, TextColorToken, Typography, TypographyAlign, TypographyProps, type TypographyVariant };

package/dist/Typography.d.mts

@@ -0,0 +1,3 @@
+import { F as TypographyVariant } from "./themes-D1SAp3SL.mjs";
+import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-DE5PtzPn.mjs";
+export { BackgroundToken, TextColorToken, Typography, TypographyAlign, TypographyProps, type TypographyVariant };

package/dist/Typography.mjs

@@ -0,0 +1,61 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports, u as useTheme } from "./src-DcNT2aIK.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Typography/Typography.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"noWrap",
+	"gutterBottom",
+	"align",
+	"textTransform"
+]);
+const colorSystem = (0, src_exports.system)({
+	color: {
+		property: "color",
+		scale: "text"
+	},
+	bg: {
+		property: "backgroundColor",
+		scale: "background"
+	},
+	opacity: { property: "opacity" },
+	textTransform: { property: "textTransform" }
+});
+const typographyVariants = ({ variant = "body1", theme }) => {
+	const { fontSize, fontWeight, letterSpacing, textTransform } = theme.typography[variant];
+	return {
+		...fontSize !== void 0 && { fontSize: theme.fontSizes[fontSize] },
+		...fontWeight && { fontWeight: theme.fontWeights[fontWeight] },
+		...letterSpacing && { letterSpacing: theme.letterSpacings[letterSpacing] },
+		...textTransform && { textTransform }
+	};
+};
+const TypographyBase = styled("p", {
+	name: "Typography",
+	label: "Typography",
+	shouldForwardProp,
+	systemProps: [
+		src_exports.space,
+		src_exports.layout,
+		colorSystem,
+		src_exports.typography,
+		src_exports.flexbox,
+		src_exports.border,
+		src_exports.position
+	]
+})(typographyVariants, ({ align }) => align ? { textAlign: align } : {}, ({ gutterBottom }) => gutterBottom ? { marginBottom: "0.5em" } : {}, ({ noWrap }) => noWrap ? {
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+} : {});
+function Typography({ variant = "body1", as, ...rest }) {
+	const theme = useTheme();
+	const element = as ?? theme.typography[variant].element;
+	return /* @__PURE__ */ jsx(TypographyBase, {
+		as: element,
+		variant,
+		...rest
+	});
+}
+//#endregion
+export { Typography };

package/dist/View.cjs

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+require("react");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/View/View.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"cursor",
+	"aspectRatio",
+	"order"
+]);
+const colorSystem = (0, require_src.src_exports.system)({
+	bg: {
+		property: "backgroundColor",
+		scale: "background"
+	},
+	borderColor: {
+		property: "borderColor",
+		scale: "border"
+	},
+	opacity: { property: "opacity" },
+	cursor: { property: "cursor" },
+	aspectRatio: { property: "aspectRatio" },
+	order: { property: "order" }
+});
+const View = require_src.styled("div", {
+	name: "View",
+	label: "View",
+	shouldForwardProp,
+	systemProps: [
+		require_src.src_exports.space,
+		require_src.src_exports.layout,
+		colorSystem,
+		require_src.src_exports.typography,
+		require_src.src_exports.border,
+		require_src.src_exports.position
+	]
+})();
+//#endregion
+exports.View = View;

package/dist/View.d.cts

@@ -0,0 +1,2 @@
+import { a as ViewBorderWidthToken, i as ViewBorderRadiusToken, n as ViewBackgroundToken, o as ViewColorToken, r as ViewBorderColorToken, s as ViewProps, t as View } from "./index-FwTocqhP.cjs";
+export { View, ViewBackgroundToken, ViewBorderColorToken, ViewBorderRadiusToken, ViewBorderWidthToken, ViewColorToken, ViewProps };

package/dist/View.d.mts

@@ -0,0 +1,2 @@
+import { a as ViewBorderWidthToken, i as ViewBorderRadiusToken, n as ViewBackgroundToken, o as ViewColorToken, r as ViewBorderColorToken, s as ViewProps, t as View } from "./index-pX7tBQdJ.mjs";
+export { View, ViewBackgroundToken, ViewBorderColorToken, ViewBorderRadiusToken, ViewBorderWidthToken, ViewColorToken, ViewProps };

package/dist/View.mjs

@@ -0,0 +1,38 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
+import "react";
+//#region src/View/View.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"cursor",
+	"aspectRatio",
+	"order"
+]);
+const colorSystem = (0, src_exports.system)({
+	bg: {
+		property: "backgroundColor",
+		scale: "background"
+	},
+	borderColor: {
+		property: "borderColor",
+		scale: "border"
+	},
+	opacity: { property: "opacity" },
+	cursor: { property: "cursor" },
+	aspectRatio: { property: "aspectRatio" },
+	order: { property: "order" }
+});
+const View = styled("div", {
+	name: "View",
+	label: "View",
+	shouldForwardProp,
+	systemProps: [
+		src_exports.space,
+		src_exports.layout,
+		colorSystem,
+		src_exports.typography,
+		src_exports.border,
+		src_exports.position
+	]
+})();
+//#endregion
+export { View };