@soroush.tech/design-system 0.1.0

package/dist/LinearProgress.mjs

@@ -0,0 +1,214 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports, s as keyframes } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { clamp } from "./utils.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/LinearProgress/LinearProgress.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"color",
+	"variant",
+	"thickness",
+	"value",
+	"buffer",
+	"valueBuffer",
+	"min",
+	"max",
+	"spinning",
+	"easing",
+	"showTrack",
+	"round"
+]);
+const THICKNESS_DEFAULT = 4;
+const indeterminateBar1 = keyframes({
+	"0%": {
+		left: "-35%",
+		right: "100%"
+	},
+	"60%": {
+		left: "100%",
+		right: "-90%"
+	},
+	"100%": {
+		left: "100%",
+		right: "-90%"
+	}
+});
+const indeterminateBar2 = keyframes({
+	"0%": {
+		left: "-200%",
+		right: "100%"
+	},
+	"60%": {
+		left: "107%",
+		right: "-8%"
+	},
+	"100%": {
+		left: "107%",
+		right: "-8%"
+	}
+});
+const bufferDots = keyframes({
+	"0%": {
+		opacity: 1,
+		backgroundPosition: "0 -23px"
+	},
+	"60%": {
+		opacity: 0,
+		backgroundPosition: "0 -23px"
+	},
+	"100%": {
+		opacity: 1,
+		backgroundPosition: "-200px -23px"
+	}
+});
+const travel = keyframes({
+	"0%": { transform: "translateX(0%)" },
+	"100%": { transform: "translateX(100%)" }
+});
+const LinearProgressTrack = styled("span", {
+	name: "LinearProgress",
+	slot: "track",
+	label: "LinearProgressTrack"
+})({
+	position: "absolute",
+	inset: 0,
+	backgroundColor: "currentColor",
+	opacity: .2
+});
+const LinearProgressDash = styled("span", {
+	name: "LinearProgress",
+	slot: "dash",
+	label: "LinearProgressDash"
+})({
+	position: "absolute",
+	inset: 0,
+	backgroundImage: "radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)",
+	backgroundSize: "10px 10px",
+	backgroundPosition: "0 -23px",
+	opacity: .3,
+	animation: `${bufferDots} 3s infinite linear`
+});
+const barShouldForwardProp = (prop) => prop !== "variant" && prop !== "buffer" && prop !== "easing";
+const LinearProgressBar = styled("span", {
+	name: "LinearProgress",
+	slot: "bar",
+	label: "LinearProgressBar",
+	shouldForwardProp: barShouldForwardProp
+})(({ variant, easing = "linear" }) => ({
+	position: "absolute",
+	top: 0,
+	bottom: 0,
+	left: 0,
+	transformOrigin: "left",
+	backgroundColor: "currentColor",
+	...variant === "determinate" ? {
+		width: "100%",
+		transition: `transform 0.4s ${easing}`
+	} : { animation: `${indeterminateBar1} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite` }
+}));
+const LinearProgressTraveler = styled("span", {
+	name: "LinearProgress",
+	slot: "traveler",
+	label: "LinearProgressTraveler",
+	shouldForwardProp: barShouldForwardProp
+})(({ easing = "linear" }) => ({
+	position: "absolute",
+	inset: 0,
+	animation: `${travel} 1.4s ${easing} infinite`
+}));
+const LinearProgressSegment = styled("span", {
+	name: "LinearProgress",
+	slot: "segment",
+	label: "LinearProgressSegment"
+})({
+	position: "absolute",
+	top: 0,
+	bottom: 0,
+	left: 0,
+	backgroundColor: "currentColor"
+});
+const LinearProgressBarSecondary = styled("span", {
+	name: "LinearProgress",
+	slot: "secondaryBar",
+	label: "LinearProgressBarSecondary",
+	shouldForwardProp: barShouldForwardProp
+})(({ buffer, easing = "linear" }) => ({
+	position: "absolute",
+	top: 0,
+	bottom: 0,
+	left: 0,
+	transformOrigin: "left",
+	backgroundColor: "currentColor",
+	...buffer ? {
+		width: "100%",
+		opacity: .4,
+		transition: `transform 0.4s ${easing}`
+	} : { animation: `${indeterminateBar2} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite` }
+}));
+const colorStyle = ({ color: colorProp, theme }) => {
+	const color = colorProp ?? themeDefault(theme, "color", "primary");
+	if (color === "inherit") return {};
+	return { color: theme.palette[color].main };
+};
+const baseStyle = {
+	display: "block",
+	position: "relative",
+	overflow: "hidden",
+	width: "100%"
+};
+const thicknessStyle = ({ thickness = THICKNESS_DEFAULT }) => ({ height: thickness });
+const directionStyle = ({ variant = "indeterminate" }) => variant === "query" ? { transform: "rotate(180deg)" } : {};
+const roundStyle = ({ round }) => round ? { borderRadius: "9999px" } : {};
+const LinearProgressRoot = styled("span", {
+	name: "LinearProgress",
+	label: "LinearProgress",
+	shouldForwardProp,
+	systemProps: [src_exports.space, src_exports.layout]
+})(baseStyle, thicknessStyle, colorStyle, directionStyle, roundStyle);
+function LinearProgress({ variant = "indeterminate", color, thickness = THICKNESS_DEFAULT, value, buffer = false, valueBuffer, min = 0, max = 100, spinning = false, easing = "linear", showTrack = true, round = false, ...rest }) {
+	const isDeterminate = variant === "determinate";
+	const isBuffer = isDeterminate && buffer;
+	const isSpinning = isDeterminate && spinning;
+	const normalizedValue = clamp(value ?? min, min, max);
+	const normalizedBuffer = clamp(valueBuffer ?? min, min, max);
+	const toPercent = (n) => max === 0 ? 0 : n / max * 100;
+	const valuePercent = toPercent(normalizedValue);
+	const barStyle = isDeterminate ? { transform: `translateX(${valuePercent - 100}%)` } : void 0;
+	const bufferBarStyle = isBuffer ? { transform: `translateX(${toPercent(normalizedBuffer) - 100}%)` } : void 0;
+	return /* @__PURE__ */ jsxs(LinearProgressRoot, {
+		role: "progressbar",
+		"aria-label": "Loading",
+		color,
+		variant,
+		thickness,
+		round,
+		...isDeterminate ? {
+			"aria-valuenow": normalizedValue,
+			"aria-valuemin": min,
+			"aria-valuemax": max
+		} : {},
+		...rest,
+		children: [
+			showTrack && (isBuffer ? /* @__PURE__ */ jsx(LinearProgressDash, {}) : /* @__PURE__ */ jsx(LinearProgressTrack, {})),
+			(!isDeterminate || isBuffer) && /* @__PURE__ */ jsx(LinearProgressBarSecondary, {
+				buffer: isBuffer,
+				easing,
+				style: bufferBarStyle
+			}),
+			isSpinning ? /* @__PURE__ */ jsxs(LinearProgressTraveler, {
+				easing,
+				children: [/* @__PURE__ */ jsx(LinearProgressSegment, { style: { width: `${valuePercent}%` } }), /* @__PURE__ */ jsx(LinearProgressSegment, { style: {
+					width: `${valuePercent}%`,
+					left: "-100%"
+				} })]
+			}) : /* @__PURE__ */ jsx(LinearProgressBar, {
+				variant,
+				easing,
+				style: barStyle
+			})
+		]
+	});
+}
+//#endregion
+export { LinearProgress };

package/dist/Link.cjs

@@ -0,0 +1,64 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_Typography = require("./Typography.cjs");
+require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _emotion_react = require("@emotion/react");
+//#region src/Link/Link.tsx
+const underlineStyles = {
+	always: { textDecoration: "underline" },
+	none: { textDecoration: "none" },
+	hover: {
+		textDecoration: "none",
+		position: "relative",
+		"&::after": {
+			content: "\"\"",
+			position: "absolute",
+			bottom: 0,
+			left: 0,
+			width: "100%",
+			height: "1px",
+			background: "currentColor",
+			transform: "scaleX(0)",
+			transformOrigin: "right",
+			transition: "transform 0.2s ease"
+		},
+		"&:hover::after": {
+			transform: "scaleX(1)",
+			transformOrigin: "left"
+		}
+	}
+};
+const linkGapSystem = (0, require_src.src_exports.system)({ gap: {
+	property: "gap",
+	scale: "space"
+} });
+const LinkBase = require_src.styled(require_Typography.Typography, {
+	name: "Link",
+	label: "Link",
+	shouldForwardProp: (prop) => prop !== "underline"
+})(({ underline = "always" }) => underlineStyles[underline], ({ theme }) => ({
+	"&:hover": { color: theme.palette[require_themeDefault.themeDefault(theme, "color", "primary")].main },
+	"&:focus-visible": {
+		outline: `2px solid ${theme.palette[require_themeDefault.themeDefault(theme, "color", "primary")].main}`,
+		outlineOffset: "4px",
+		borderRadius: theme.radii.sm
+	}
+}), linkGapSystem);
+function Link({ underline: underlineProp, color, variant = "inherit", target, rel, ...rest }) {
+	const theme = (0, _emotion_react.useTheme)();
+	const underline = underlineProp ?? require_themeDefault.themeDefault(theme, "linkUnderline", "always");
+	const resolvedRel = target === "_blank" && rel === void 0 ? "noopener noreferrer" : rel;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkBase, {
+		as: "a",
+		underline,
+		color: color ?? require_themeDefault.themeDefault(theme, "accentTextColor", "primary"),
+		variant,
+		target,
+		rel: resolvedRel,
+		...rest
+	});
+}
+//#endregion
+exports.Link = Link;

package/dist/Link.d.cts

@@ -0,0 +1,2 @@
+import { n as LinkProps, r as LinkUnderline, t as Link } from "./index-DTkQSXQD.cjs";
+export { Link, LinkProps, LinkUnderline };

package/dist/Link.d.mts

@@ -0,0 +1,2 @@
+import { n as LinkProps, r as LinkUnderline, t as Link } from "./index-CdF_4ckE.mjs";
+export { Link, LinkProps, LinkUnderline };

package/dist/Link.mjs

@@ -0,0 +1,62 @@
+import { d as styled, l as src_exports, u as useTheme } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { Typography } from "./Typography.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Link/Link.tsx
+const underlineStyles = {
+	always: { textDecoration: "underline" },
+	none: { textDecoration: "none" },
+	hover: {
+		textDecoration: "none",
+		position: "relative",
+		"&::after": {
+			content: "\"\"",
+			position: "absolute",
+			bottom: 0,
+			left: 0,
+			width: "100%",
+			height: "1px",
+			background: "currentColor",
+			transform: "scaleX(0)",
+			transformOrigin: "right",
+			transition: "transform 0.2s ease"
+		},
+		"&:hover::after": {
+			transform: "scaleX(1)",
+			transformOrigin: "left"
+		}
+	}
+};
+const linkGapSystem = (0, src_exports.system)({ gap: {
+	property: "gap",
+	scale: "space"
+} });
+const LinkBase = styled(Typography, {
+	name: "Link",
+	label: "Link",
+	shouldForwardProp: (prop) => prop !== "underline"
+})(({ underline = "always" }) => underlineStyles[underline], ({ theme }) => ({
+	"&:hover": { color: theme.palette[themeDefault(theme, "color", "primary")].main },
+	"&:focus-visible": {
+		outline: `2px solid ${theme.palette[themeDefault(theme, "color", "primary")].main}`,
+		outlineOffset: "4px",
+		borderRadius: theme.radii.sm
+	}
+}), linkGapSystem);
+function Link({ underline: underlineProp, color, variant = "inherit", target, rel, ...rest }) {
+	const theme = useTheme();
+	const underline = underlineProp ?? themeDefault(theme, "linkUnderline", "always");
+	const resolvedRel = target === "_blank" && rel === void 0 ? "noopener noreferrer" : rel;
+	return /* @__PURE__ */ jsx(LinkBase, {
+		as: "a",
+		underline,
+		color: color ?? themeDefault(theme, "accentTextColor", "primary"),
+		variant,
+		target,
+		rel: resolvedRel,
+		...rest
+	});
+}
+//#endregion
+export { Link };

package/dist/Markdown/Control.cjs

@@ -0,0 +1,61 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_applyAction = require("../applyAction-B2uVHxOE.cjs");
+const require_MarkdownContext = require("../MarkdownContext-DSwjzpH8.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Markdown/Control/Control.tsx
+/**
+* The headless root of the Markdown compound: owns the shared value/selection state and exposes
+* it (plus a `dispatch` for toolbar actions) via context. It renders no UI of its own — the
+* consumer arranges the parts and decides which panes to show.
+*/
+function Control({ value, onChange, children }) {
+	const lastSelectionRef = (0, react.useRef)(null);
+	const pendingSelectionRef = (0, react.useRef)(null);
+	const context = (0, react.useMemo)(() => {
+		const dispatch = (action) => {
+			const { start, end } = lastSelectionRef.current ?? {
+				start: value.length,
+				end: value.length
+			};
+			const next = require_applyAction.applyAction(action, {
+				value,
+				selectionStart: start,
+				selectionEnd: end
+			});
+			const selection = {
+				start: next.selectionStart,
+				end: next.selectionEnd
+			};
+			pendingSelectionRef.current = selection;
+			lastSelectionRef.current = selection;
+			onChange(next.value);
+		};
+		const rememberSelection = (selection) => {
+			lastSelectionRef.current = selection;
+		};
+		const queueSelection = (selection) => {
+			pendingSelectionRef.current = selection;
+			lastSelectionRef.current = selection;
+		};
+		const takeQueuedSelection = () => {
+			const selection = pendingSelectionRef.current;
+			pendingSelectionRef.current = null;
+			return selection;
+		};
+		return {
+			value,
+			onChange,
+			dispatch,
+			rememberSelection,
+			queueSelection,
+			takeQueuedSelection
+		};
+	}, [value, onChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownContext.MarkdownContext.Provider, {
+		value: context,
+		children
+	});
+}
+//#endregion
+exports.Control = Control;

package/dist/Markdown/Control.d.cts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+//#region src/Markdown/Control/Control.d.ts
+interface ControlProps {
+  /** Current markdown source (controlled). */
+  value: string;
+  /** Called with the next source on edit or a toolbar action. */
+  onChange: (value: string) => void;
+  /** The composed parts — `Markdown.Toolbar`, `Markdown.Editor`, `Markdown.Preview`, … */
+  children: ReactNode;
+}
+/**
+ * The headless root of the Markdown compound: owns the shared value/selection state and exposes
+ * it (plus a `dispatch` for toolbar actions) via context. It renders no UI of its own — the
+ * consumer arranges the parts and decides which panes to show.
+ */
+declare function Control({ value, onChange, children }: Readonly<ControlProps>): import("react").JSX.Element;
+//#endregion
+export { Control, ControlProps };

package/dist/Markdown/Control.d.mts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+//#region src/Markdown/Control/Control.d.ts
+interface ControlProps {
+  /** Current markdown source (controlled). */
+  value: string;
+  /** Called with the next source on edit or a toolbar action. */
+  onChange: (value: string) => void;
+  /** The composed parts — `Markdown.Toolbar`, `Markdown.Editor`, `Markdown.Preview`, … */
+  children: ReactNode;
+}
+/**
+ * The headless root of the Markdown compound: owns the shared value/selection state and exposes
+ * it (plus a `dispatch` for toolbar actions) via context. It renders no UI of its own — the
+ * consumer arranges the parts and decides which panes to show.
+ */
+declare function Control({ value, onChange, children }: Readonly<ControlProps>): import("react").JSX.Element;
+//#endregion
+export { Control, ControlProps };

package/dist/Markdown/Control.mjs

@@ -0,0 +1,60 @@
+import { t as applyAction } from "../applyAction-B2B-hnP3.mjs";
+import { t as MarkdownContext } from "../MarkdownContext-BN8A3W-J.mjs";
+import { useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Markdown/Control/Control.tsx
+/**
+* The headless root of the Markdown compound: owns the shared value/selection state and exposes
+* it (plus a `dispatch` for toolbar actions) via context. It renders no UI of its own — the
+* consumer arranges the parts and decides which panes to show.
+*/
+function Control({ value, onChange, children }) {
+	const lastSelectionRef = useRef(null);
+	const pendingSelectionRef = useRef(null);
+	const context = useMemo(() => {
+		const dispatch = (action) => {
+			const { start, end } = lastSelectionRef.current ?? {
+				start: value.length,
+				end: value.length
+			};
+			const next = applyAction(action, {
+				value,
+				selectionStart: start,
+				selectionEnd: end
+			});
+			const selection = {
+				start: next.selectionStart,
+				end: next.selectionEnd
+			};
+			pendingSelectionRef.current = selection;
+			lastSelectionRef.current = selection;
+			onChange(next.value);
+		};
+		const rememberSelection = (selection) => {
+			lastSelectionRef.current = selection;
+		};
+		const queueSelection = (selection) => {
+			pendingSelectionRef.current = selection;
+			lastSelectionRef.current = selection;
+		};
+		const takeQueuedSelection = () => {
+			const selection = pendingSelectionRef.current;
+			pendingSelectionRef.current = null;
+			return selection;
+		};
+		return {
+			value,
+			onChange,
+			dispatch,
+			rememberSelection,
+			queueSelection,
+			takeQueuedSelection
+		};
+	}, [value, onChange]);
+	return /* @__PURE__ */ jsx(MarkdownContext.Provider, {
+		value: context,
+		children
+	});
+}
+//#endregion
+export { Control };

package/dist/Markdown/Editor.cjs

@@ -0,0 +1,130 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-BiocWFSR.cjs");
+const require_themeDefault = require("../themeDefault-B-QjpGEO.cjs");
+const require_Flex = require("../Flex.cjs");
+const require_Typography = require("../Typography.cjs");
+const require_applyAction = require("../applyAction-B2uVHxOE.cjs");
+const require_MarkdownContext = require("../MarkdownContext-DSwjzpH8.cjs");
+const require_TextInput = require("../TextInput-6o37Zddp.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _emotion_react = require("@emotion/react");
+//#region src/Markdown/Editor/Editor.tsx
+const EditorRoot = require_src.styled(require_Flex.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 = (0, react.useContext)(require_MarkdownContext.MarkdownContext);
+	const theme = (0, _emotion_react.useTheme)();
+	const textColor = textColorProp ?? require_themeDefault.themeDefault(theme, "textColor", "initial");
+	const hintId = (0, react.useId)();
+	const localPendingRef = (0, react.useRef)(null);
+	const value = context?.value ?? valueProp ?? "";
+	const onChange = context?.onChange ?? onChangeProp ?? noop;
+	const paneRef = (0, react.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") ? require_applyAction.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);
+		}
+	};
+	(0, react.useLayoutEffect)(() => {
+		const selection = takeQueuedSelection();
+		if (!selection) return;
+		const textarea = paneRef.current.querySelector("textarea");
+		textarea.focus();
+		textarea.setSelectionRange(selection.start, selection.end);
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EditorRoot, {
+		ref: paneRef,
+		flexDirection: "column",
+		flex: 1,
+		minWidth: 0,
+		gap: 1,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextInput.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__ */ (0, react_jsx_runtime.jsx)(require_Typography.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
+exports.Editor = Editor;

package/dist/Markdown/Editor.d.cts

@@ -0,0 +1,40 @@
+import { a as TextInputSize, o as TextInputTextColor, r as TextInputColor, s as TextInputVariant } from "../index-C5_ciaeo.cjs";
+//#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 };