@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/Markdown/parse.js

@@ -0,0 +1,599 @@
+// src/components/Markdown/parse.ts
+/** Çok büyük girdide işleme sınırı (karakter); aşan kısım düz metin olarak kesilmez, reddedilir. */
+const MAX_MARKDOWN_LENGTH = 2e5;
+/** Kapsayıcı (alıntı, liste) iç içe geçme sınırı: kötü niyetli derin iç içe geçmeye karşı. */
+const MAX_DEPTH = 32;
+const LINK_SCHEMES = /* @__PURE__ */ new Set([
+	"http",
+	"https",
+	"mailto",
+	"tel"
+]);
+const IMAGE_SCHEMES = /* @__PURE__ */ new Set(["http", "https"]);
+/**
+* Adresi izin listesine göre süzer: `http`, `https`, `mailto`, `tel` (görselde yalnız `http(s)`)
+* ya da göreli adres. `javascript:`, `data:`, `vbscript:` ve bilinmeyen şemalar reddedilir
+* (`null`). Şema, kontrol karakterleri ve boşluklar temizlenerek okunur ("java\tscript:").
+*/
+function safeUrl(raw, kind = "link") {
+	const url = raw.trim();
+	if (!url) return null;
+	const probe = url.replace(/[\u0000- \u007f-\u009f]/g, "").toLowerCase();
+	const colon = probe.indexOf(":");
+	const firstBreak = probe.search(/[/?#]/);
+	if (!(colon > 0 && (firstBreak === -1 || colon < firstBreak))) {
+		if (probe.startsWith("//")) return kind === "link" ? url : null;
+		return kind === "image" && !probe.startsWith("/") && !probe.startsWith(".") ? null : url;
+	}
+	const scheme = probe.slice(0, colon);
+	return (kind === "image" ? IMAGE_SCHEMES : LINK_SCHEMES).has(scheme) ? url : null;
+}
+/** Dış (başka kökene giden) adres mi: `http(s)://` ya da `//` ile başlar. */
+const isExternal = (href) => /^(?:https?:)?\/\//i.test(href.trim());
+const RE = {
+	blank: /^[ \t]*$/,
+	fence: /^( {0,3})(`{3,}|~{3,})[ \t]*([^\s`]*)[^`]*$/,
+	atx: /^ {0,3}(#{1,6})(?:[ \t]+(.*)|[ \t]*)$/,
+	hr: /^ {0,3}(?:(?:-[ \t]*){3,}|(?:\*[ \t]*){3,}|(?:_[ \t]*){3,})$/,
+	quote: /^ {0,3}> ?/,
+	bullet: /^( {0,3})([-*+])([ \t]+|$)/,
+	ordered: /^( {0,3})(\d{1,9})([.)])([ \t]+|$)/,
+	setext1: /^ {0,3}=+[ \t]*$/,
+	setext2: /^ {0,3}-+[ \t]*$/,
+	tableDelim: /^ {0,3}\|?[ \t]*:?-+:?[ \t]*(?:\|[ \t]*:?-+:?[ \t]*)*\|?[ \t]*$/,
+	task: /^\[([ xX])\][ \t]+/
+};
+/** Sekmeyi 4 boşluk sayarak satır başındaki girintiyi ölçer. */
+function indentOf(line) {
+	let n = 0;
+	for (const ch of line) if (ch === " ") n += 1;
+	else if (ch === "	") n += 4 - n % 4;
+	else break;
+	return n;
+}
+/** Satırın başından `n` sütunluk girintiyi kaldırır (sekme ölçüsüyle). */
+function dedent(line, n) {
+	let col = 0;
+	let i = 0;
+	while (i < line.length && col < n) {
+		const ch = line[i];
+		if (ch === " ") col += 1;
+		else if (ch === "	") col += 4 - col % 4;
+		else break;
+		i += 1;
+	}
+	return line.slice(i);
+}
+function startsBlock(line) {
+	if (RE.fence.test(line) || RE.atx.test(line) || RE.hr.test(line) || RE.quote.test(line)) return true;
+	if (RE.bullet.test(line)) return !RE.blank.test(line.replace(RE.bullet, ""));
+	const o = RE.ordered.exec(line);
+	return o !== null && o[2] === "1" && !RE.blank.test(line.slice(o[0].length));
+}
+function splitRow(line) {
+	let s = line.trim();
+	if (s.startsWith("|")) s = s.slice(1);
+	if (s.endsWith("|") && !s.endsWith("\\|")) s = s.slice(0, -1);
+	const cells = [];
+	let cur = "";
+	let inCode = 0;
+	for (let i = 0; i < s.length; i++) {
+		const ch = s[i];
+		if (ch === "\\" && s[i + 1] === "|") {
+			cur += "|";
+			i += 1;
+		} else if (ch === "`") {
+			inCode = inCode ? 0 : 1;
+			cur += ch;
+		} else if (ch === "|" && !inCode) {
+			cells.push(cur.trim());
+			cur = "";
+		} else cur += ch;
+	}
+	cells.push(cur.trim());
+	return cells;
+}
+function parseBlocks(lines, depth) {
+	const blocks = [];
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		if (RE.blank.test(line)) {
+			i += 1;
+			continue;
+		}
+		const fence = RE.fence.exec(line);
+		if (fence) {
+			const [, indent = "", marker = "", lang] = fence;
+			const body = [];
+			i += 1;
+			while (i < lines.length) {
+				const l = lines[i];
+				const close = /^ {0,3}(`{3,}|~{3,})[ \t]*$/.exec(l);
+				if (close && close[1]?.[0] === marker[0] && (close[1]?.length ?? 0) >= marker.length) {
+					i += 1;
+					break;
+				}
+				body.push(dedent(l, indent.length));
+				i += 1;
+			}
+			blocks.push({
+				type: "code",
+				lang: lang || void 0,
+				value: body.join("\n")
+			});
+			continue;
+		}
+		const atx = RE.atx.exec(line);
+		if (atx) {
+			const level = atx[1]?.length ?? 1;
+			const text = (atx[2] ?? "").replace(/(?:^|[ \t]+)#+[ \t]*$/, "").trim();
+			blocks.push({
+				type: "heading",
+				level,
+				children: parseInline(text)
+			});
+			i += 1;
+			continue;
+		}
+		if (RE.hr.test(line)) {
+			blocks.push({ type: "hr" });
+			i += 1;
+			continue;
+		}
+		if (RE.quote.test(line) && depth < MAX_DEPTH) {
+			const inner = [];
+			while (i < lines.length && RE.quote.test(lines[i])) {
+				inner.push(lines[i].replace(RE.quote, ""));
+				i += 1;
+			}
+			blocks.push({
+				type: "blockquote",
+				children: parseBlocks(inner, depth + 1)
+			});
+			continue;
+		}
+		const bullet = RE.bullet.exec(line);
+		const ordered = bullet ? null : RE.ordered.exec(line);
+		if ((bullet || ordered) && depth < MAX_DEPTH) {
+			const isOrdered = Boolean(ordered);
+			const start = ordered ? Number(ordered[2]) : 1;
+			const markerChar = bullet ? bullet[2] : ordered?.[3];
+			const items = [];
+			let tight = true;
+			let sawBlankBetween = false;
+			while (i < lines.length) {
+				const l = lines[i];
+				const m = isOrdered ? RE.ordered.exec(l) : RE.bullet.exec(l);
+				const sameMarker = m && (isOrdered ? m[3] : m[2]) === markerChar;
+				if (!m || !sameMarker) break;
+				if (sawBlankBetween) tight = false;
+				const markerWidth = m[0].length;
+				const rest = l.slice(markerWidth);
+				const contentIndent = RE.blank.test(rest) ? indentOf(m[1] ?? "") + 2 : markerWidth;
+				const body = [rest];
+				i += 1;
+				let blankRun = 0;
+				while (i < lines.length) {
+					const next = lines[i];
+					if (RE.blank.test(next)) {
+						blankRun += 1;
+						body.push("");
+						i += 1;
+						continue;
+					}
+					if (indentOf(next) >= contentIndent) {
+						if (blankRun) tight = false;
+						blankRun = 0;
+						body.push(dedent(next, contentIndent));
+						i += 1;
+						continue;
+					}
+					if (RE.bullet.test(next) || RE.ordered.test(next)) break;
+					if (!blankRun && !startsBlock(next)) {
+						body.push(next);
+						i += 1;
+						continue;
+					}
+					break;
+				}
+				sawBlankBetween = blankRun > 0;
+				while (body.length && body[body.length - 1] === "") body.pop();
+				let checked = null;
+				const task = RE.task.exec(body[0] ?? "");
+				if (task) {
+					checked = task[1] !== " ";
+					body[0] = (body[0] ?? "").slice(task[0].length);
+				}
+				items.push({
+					checked,
+					children: parseBlocks(body, depth + 1)
+				});
+				if (sawBlankBetween && i < lines.length) {
+					const peek = lines[i];
+					if (!(isOrdered ? RE.ordered.exec(peek) : RE.bullet.exec(peek))) break;
+				}
+			}
+			blocks.push({
+				type: "list",
+				ordered: isOrdered,
+				start,
+				tight,
+				items
+			});
+			continue;
+		}
+		const next = lines[i + 1];
+		if (line.includes("|") && next !== void 0 && RE.tableDelim.test(next) && next.includes("-")) {
+			const head = splitRow(line);
+			const align = splitRow(next).map((c) => {
+				const l = c.startsWith(":");
+				const r = c.endsWith(":");
+				return l && r ? "center" : r ? "right" : l ? "left" : null;
+			});
+			if (align.length === head.length) {
+				i += 2;
+				const rows = [];
+				while (i < lines.length && !RE.blank.test(lines[i]) && lines[i].includes("|")) {
+					const cells = splitRow(lines[i]);
+					rows.push(head.map((_, c) => parseInline(cells[c] ?? "")));
+					i += 1;
+				}
+				blocks.push({
+					type: "table",
+					align,
+					head: head.map((h) => parseInline(h)),
+					rows
+				});
+				continue;
+			}
+		}
+		const para = [line];
+		i += 1;
+		let setext = 0;
+		while (i < lines.length) {
+			const l = lines[i];
+			if (RE.blank.test(l)) break;
+			if (RE.setext1.test(l)) {
+				setext = 1;
+				i += 1;
+				break;
+			}
+			if (RE.setext2.test(l)) {
+				setext = 2;
+				i += 1;
+				break;
+			}
+			if (startsBlock(l)) break;
+			para.push(l);
+			i += 1;
+		}
+		const text = para.map((p) => p.replace(/^[ \t]+/, "")).join("\n");
+		if (setext) blocks.push({
+			type: "heading",
+			level: setext,
+			children: parseInline(text.trim())
+		});
+		else blocks.push({
+			type: "paragraph",
+			children: parseInline(text.replace(/[ \t]+$/, ""))
+		});
+	}
+	return blocks;
+}
+const PUNCT = /[!-/:-@[-`{-~]/;
+const isSpace = (c) => c === void 0 || /\s/.test(c);
+const isWordChar = (c) => c !== void 0 && /[\p{L}\p{N}]/u.test(c);
+/** Satır içi metni ayrıştırır. */
+function parseInline(src, depth = 0) {
+	if (depth > MAX_DEPTH) return src ? [{
+		type: "text",
+		value: src
+	}] : [];
+	return scan(src, /* @__PURE__ */ new Set(), depth);
+}
+function scan(src, failed, depth) {
+	const out = [];
+	let pairs = null;
+	let text = "";
+	const flush = () => {
+		if (text) {
+			out.push({
+				type: "text",
+				value: text
+			});
+			text = "";
+		}
+	};
+	let i = 0;
+	while (i < src.length) {
+		const ch = src[i];
+		if (ch === "\\") {
+			const n = src[i + 1];
+			if (n === "\n") {
+				flush();
+				out.push({ type: "br" });
+				i += 2;
+				continue;
+			}
+			if (n !== void 0 && PUNCT.test(n)) {
+				text += n;
+				i += 2;
+				continue;
+			}
+		}
+		if (ch === "\n") {
+			const hard = / {2,}$/.test(text);
+			text = text.replace(/ +$/, "");
+			if (hard) {
+				flush();
+				out.push({ type: "br" });
+			} else text += "\n";
+			i += 1;
+			continue;
+		}
+		if (ch === "`") {
+			let n = 0;
+			while (src[i + n] === "`") n += 1;
+			const fence = "`".repeat(n);
+			let j = src.indexOf(fence, i + n);
+			while (j !== -1 && src[j + n] === "`") {
+				let k = j;
+				while (src[k] === "`") k += 1;
+				j = src.indexOf(fence, k);
+			}
+			if (j !== -1) {
+				let value = src.slice(i + n, j).replace(/\n/g, " ");
+				if (value.length > 2 && value.startsWith(" ") && value.endsWith(" ") && value.trim()) value = value.slice(1, -1);
+				flush();
+				out.push({
+					type: "code",
+					value
+				});
+				i = j + n;
+				continue;
+			}
+			text += fence;
+			i += n;
+			continue;
+		}
+		if (ch === "[" || ch === "!" && src[i + 1] === "[") {
+			const isImage = ch === "!";
+			pairs ??= bracketPairs(src);
+			const parsed = parseLinkAt(src, isImage ? i + 1 : i, pairs);
+			if (parsed) {
+				flush();
+				if (isImage) {
+					const src2 = safeUrl(parsed.dest, "image");
+					const alt = plainText(parseInline(parsed.label, depth + 1));
+					if (src2) out.push({
+						type: "image",
+						src: src2,
+						alt,
+						title: parsed.title
+					});
+					else text += alt;
+				} else {
+					const href = safeUrl(parsed.dest, "link");
+					const children = parseInline(parsed.label, depth + 1);
+					if (href) out.push({
+						type: "link",
+						href,
+						title: parsed.title,
+						children
+					});
+					else out.push(...children);
+				}
+				i = parsed.end;
+				continue;
+			}
+		}
+		if (ch === "<") {
+			const close = src.indexOf(">", i + 1);
+			if (close !== -1) {
+				const inner = src.slice(i + 1, close);
+				if (!/\s/.test(inner)) {
+					const isMail = /^[^@<>]+@[^@<>]+\.[^@<>]+$/.test(inner) && !inner.includes(":");
+					const href = safeUrl(isMail ? `mailto:${inner}` : inner, "link");
+					if (href && (isMail || /^[a-z][a-z0-9+.-]{1,31}:/i.test(inner))) {
+						flush();
+						out.push({
+							type: "link",
+							href,
+							children: [{
+								type: "text",
+								value: inner
+							}]
+						});
+						i = close + 1;
+						continue;
+					}
+				}
+			}
+		}
+		if ((ch === "h" || ch === "w") && !isWordChar(src[i - 1])) {
+			const m = /^(?:https?:\/\/|www\.)[^\s<]+/i.exec(src.slice(i, i + 2048));
+			if (m) {
+				let url = m[0];
+				url = url.replace(/[.,:;!?'"*_~]+$/, "");
+				while (url.endsWith(")") && (url.match(/\(/g)?.length ?? 0) < (url.match(/\)/g)?.length ?? 0)) url = url.slice(0, -1);
+				const href = safeUrl(url.startsWith("www.") ? `https://${url}` : url, "link");
+				const parts = (url.replace(/^https?:\/\//i, "").split(/[/?#]/)[0] ?? "").split(".");
+				const validHost = parts.length > 1 && !parts.slice(-2).some((p) => p.includes("_") || !p);
+				if (href && validHost) {
+					flush();
+					out.push({
+						type: "link",
+						href,
+						children: [{
+							type: "text",
+							value: url
+						}]
+					});
+					i += url.length;
+					continue;
+				}
+			}
+		}
+		if (ch === "*" || ch === "_" || ch === "~") {
+			let n = 0;
+			while (src[i + n] === ch) n += 1;
+			const before = src[i - 1];
+			const after = src[i + n];
+			if (!isSpace(after) && !(ch === "_" && isWordChar(before)) && (ch !== "~" || n === 2)) {
+				const size = ch === "~" ? 2 : n >= 2 ? 2 : 1;
+				const key = ch.repeat(size);
+				if (!failed.has(key)) {
+					const close = findCloser(src, i + size, ch, size);
+					if (close === -1) failed.add(key);
+					else {
+						flush();
+						const children = parseInline(src.slice(i + size, close), depth + 1);
+						out.push({
+							type: ch === "~" ? "del" : size === 2 ? "strong" : "em",
+							children
+						});
+						i = close + size;
+						continue;
+					}
+				}
+			}
+			text += ch.repeat(n);
+			i += n;
+			continue;
+		}
+		text += ch;
+		i += 1;
+	}
+	flush();
+	return out;
+}
+/** Vurgu kapatıcısı: önünde boşluk olmayan, aynı karakterden en az `size` uzunlukta dizi. */
+function findCloser(src, from, ch, size) {
+	let j = from;
+	while (j < src.length) {
+		const c = src[j];
+		if (c === "\\") {
+			j += 2;
+			continue;
+		}
+		if (c === "`") {
+			let n = 0;
+			while (src[j + n] === "`") n += 1;
+			const end = src.indexOf("`".repeat(n), j + n);
+			j = end === -1 ? j + n : end + n;
+			continue;
+		}
+		if (c === ch) {
+			let n = 0;
+			while (src[j + n] === ch) n += 1;
+			if (!isSpace(src[j - 1]) && !(ch === "_" && isWordChar(src[j + n])) && n >= size && j > from) {
+				if (size === 1 && n === 2) {
+					j += n;
+					continue;
+				}
+				return j;
+			}
+			j += n;
+			continue;
+		}
+		j += 1;
+	}
+	return -1;
+}
+/**
+* Köşeli ayraç eşleri: her `[` konumu için eşleşen `]` konumu (tek geçiş, yığınla; kaçışlı ayraçlar
+* ve kod içindekiler sayılmaz). Kapanmayan `[` için girdi yoktur. Bağlantı ayrıştırması böylece her
+* `[` için girdinin sonuna kadar taramaz (art arda binlerce `[` doğrusal sürede ayrıştırılır).
+*/
+function bracketPairs(src) {
+	const pairs = /* @__PURE__ */ new Map();
+	const stack = [];
+	for (let j = 0; j < src.length; j++) {
+		const c = src[j];
+		if (c === "\\") {
+			j += 1;
+			continue;
+		}
+		if (c === "`") {
+			let n = 0;
+			while (src[j + n] === "`") n += 1;
+			const end = src.indexOf("`".repeat(n), j + n);
+			if (end !== -1) {
+				j = end + n - 1;
+				continue;
+			}
+			j += n - 1;
+			continue;
+		}
+		if (c === "[") stack.push(j);
+		else if (c === "]") {
+			const open = stack.pop();
+			if (open !== void 0) pairs.set(open, j);
+		}
+	}
+	return pairs;
+}
+/** `[etiket](adres "başlık")` — `i` açılış köşeli ayracının konumu. */
+function parseLinkAt(src, i, pairs) {
+	const j = pairs.get(i);
+	if (j === void 0 || src[j + 1] !== "(") return null;
+	const label = src.slice(i + 1, j);
+	let k = j + 2;
+	while (src[k] === " ") k += 1;
+	let dest = "";
+	if (src[k] === "<") {
+		const close = src.indexOf(">", k);
+		if (close === -1) return null;
+		dest = src.slice(k + 1, close);
+		k = close + 1;
+	} else {
+		let paren = 0;
+		while (k < src.length) {
+			const c = src[k];
+			if (/\s/.test(c)) break;
+			if (c === "(") paren += 1;
+			if (c === ")") {
+				if (paren === 0) break;
+				paren -= 1;
+			}
+			dest += c;
+			k += 1;
+		}
+	}
+	while (src[k] === " ") k += 1;
+	let title;
+	const q = src[k];
+	if (q === "\"" || q === "'") {
+		const close = src.indexOf(q, k + 1);
+		if (close === -1) return null;
+		title = src.slice(k + 1, close);
+		k = close + 1;
+		while (src[k] === " ") k += 1;
+	}
+	if (src[k] !== ")") return null;
+	return {
+		label,
+		dest,
+		title,
+		end: k + 1
+	};
+}
+/** Satır içi düğümlerin düz metni (görsel alt metni ve başlık kimliği için). */
+function plainText(nodes) {
+	return nodes.map((n) => {
+		switch (n.type) {
+			case "text":
+			case "code": return n.value;
+			case "image": return n.alt;
+			case "br": return " ";
+			default: return plainText(n.children);
+		}
+	}).join("");
+}
+/** Markdown metnini blok ağacına çevirir. Satır sonları normalize edilir (CRLF, CR). */
+function parseMarkdown(source) {
+	if (source.length > 2e5) throw new RangeError(`Markdown en çok ${MAX_MARKDOWN_LENGTH} karakter olabilir.`);
+	return parseBlocks(source.replace(/\r\n?/g, "\n").replace(/\u0000/g, "�").split("\n"), 0);
+}
+export { MAX_MARKDOWN_LENGTH, isExternal, parseInline, parseMarkdown, plainText, safeUrl };

package/dist/components/MaskedField/MaskedField.d.ts

@@ -0,0 +1,28 @@
+import { TextFieldProps } from "../TextField/TextField.js";
+export interface MaskedFieldProps extends Omit<TextFieldProps, "type" | "value" | "defaultValue" | "onChange" | "pattern" | "minLength" | "maxLength"> {
+  /**
+   * Maske: `#` rakam, `A` harf, `*` harf ya da rakam; diğer karakterler sabittir. Örnekler:
+   * telefon "+90 (###) ### ## ##", plaka "## AAA ###", tarih "##.##.####".
+   */
+  mask: string;
+  /** Ham değer (yalnız doldurulan karakterler, sabitler olmadan). */
+  value?: string;
+  defaultValue?: string;
+  /** Ham ve biçimli değer. */
+  onChange?: (raw: string, formatted: string) => void;
+  /** Harfleri büyük harfe çevirir (Türkçe kurallarıyla: i → İ). Varsayılan açık. */
+  uppercase?: boolean;
+  /** Formun aldığı değer: ham (varsayılan) ya da biçimli. */
+  submit?: "raw" | "formatted";
+  /**
+   * Kabul edilen en az dolu yer sayısı; varsayılan maskenin tamamı. Uzunluğu değişen değerlerde
+   * (10 haneli VKN ya da 11 haneli TCKN) kısa olan kabul edilir.
+   */
+  minFilled?: number;
+}
+/**
+ * Maskeli metin alanı: yazarken ve yapıştırırken maskeye göre biçimlenir, imleç yerinde kalır,
+ * sabitin üstünden silmede önceki karakter silinir. Form ham değeri alır. Eksik doldurulan alan
+ * gönderimde hata verir.
+ */
+export declare function MaskedField({ mask, value, defaultValue, onChange, uppercase, submit, minFilled, name, placeholder, inputMode, autoCapitalize, validate, inputRef, ...rest }: MaskedFieldProps): import("react").JSX.Element;

package/dist/components/MaskedField/MaskedField.js

@@ -0,0 +1,74 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { TextField } from "../TextField/TextField.js";
+import { caretAfterRaw, extractRaw, formatMasked, maskPlaceholder, parseMask, rawCountBefore, slotCount } from "./mask.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+// src/components/MaskedField/MaskedField.tsx
+/**
+* Maskeli metin alanı: yazarken ve yapıştırırken maskeye göre biçimlenir, imleç yerinde kalır,
+* sabitin üstünden silmede önceki karakter silinir. Form ham değeri alır. Eksik doldurulan alan
+* gönderimde hata verir.
+*/
+function MaskedField({ mask, value, defaultValue, onChange, uppercase = true, submit = "raw", minFilled, name, placeholder, inputMode, autoCapitalize, validate, inputRef, ...rest }) {
+	const t = useMessages();
+	const slots = useMemo(() => parseMask(mask), [mask]);
+	const total = slotCount(slots);
+	const onlyDigits = slots.every((s) => s.kind === "literal" || s.kind === "digit");
+	const hasLetters = slots.some((s) => s.kind === "letter" || s.kind === "alnum");
+	const [inner, setInner] = useState(() => extractRaw(defaultValue ?? "", slots, uppercase));
+	const raw = value === void 0 ? inner : extractRaw(value, slots, uppercase);
+	const formatted = formatMasked(raw, slots);
+	const input = useRef(null);
+	const caret = useRef(null);
+	const [, rerender] = useState(0);
+	const setRef = useCallback((el) => {
+		input.current = el;
+		if (typeof inputRef === "function") inputRef(el);
+		else if (inputRef) inputRef.current = el;
+	}, [inputRef]);
+	useLayoutEffect(() => {
+		const el = input.current;
+		if (caret.current === null || !el || document.activeElement !== el) return;
+		const pos = caretAfterRaw(caret.current, slots, el.value);
+		el.setSelectionRange(pos, pos);
+		caret.current = null;
+	});
+	const change = (next) => {
+		const selection = input.current?.selectionStart ?? next.length;
+		let nextRaw = extractRaw(next, slots, uppercase);
+		let rawCaret = rawCountBefore(next, selection, slots);
+		if (nextRaw === raw && next.length < formatted.length && rawCaret > 0) {
+			const chars = Array.from(raw);
+			chars.splice(rawCaret - 1, 1);
+			nextRaw = chars.join("");
+			rawCaret -= 1;
+		}
+		caret.current = rawCaret;
+		rerender((n) => n + 1);
+		if (value === void 0) setInner(nextRaw);
+		onChange?.(nextRaw, formatMasked(nextRaw, slots));
+	};
+	const check = (v) => {
+		const r = extractRaw(v, slots, uppercase);
+		if (r && Array.from(r).length < (minFilled ?? total)) return t.maskIncomplete;
+		return validate?.(v);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TextField, {
+		...rest,
+		type: "text",
+		value: formatted,
+		onChange: change,
+		validate: check,
+		inputRef: setRef,
+		placeholder: placeholder ?? maskPlaceholder(slots),
+		inputMode: inputMode ?? (onlyDigits ? "numeric" : "text"),
+		autoCapitalize: autoCapitalize ?? (hasLetters && uppercase ? "characters" : "off"),
+		spellCheck: false
+	}), name ? /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name,
+		value: submit === "formatted" ? formatted : raw
+	}) : null] });
+}
+export { MaskedField };

package/dist/components/MaskedField/index.d.ts

@@ -0,0 +1,3 @@
+import { MaskedField, MaskedFieldProps } from "./MaskedField.js";
+import { MaskSlot, extractRaw, formatMasked, parseMask, slotCount } from "./mask.js";
+export { type MaskSlot, MaskedField, MaskedFieldProps, extractRaw, formatMasked, parseMask, slotCount };