@elcrm/form 0.0.68 → 0.0.70

package/dist/fields/Money.js

@@ -3,10 +3,10 @@ import t from "../core/Field.js";
 import { useFormFieldState as n } from "../hooks/use.js";
 import r, { pastePlainTextIntoSelection as i } from "../events/onEvent.js";
 import { isEmptyTextLike as a } from "./visibility.js";
-import "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/lib/fields/Money.tsx
-function c(e) {
+function l(e) {
 	let t = window.getSelection();
 	if (!t || t.rangeCount === 0) return 0;
 	let n = t.getRangeAt(0);
@@ -14,87 +14,100 @@ function c(e) {
 	let r = document.createRange();
 	return r.selectNodeContents(e), r.setEnd(n.startContainer, n.startOffset), r.toString().length;
 }
-function l(e, t, n) {
+function u(e, t, n) {
 	let r = Math.max(0, Math.min(t, e.length));
 	return n(e.slice(0, r)).length;
 }
-function u({ value: u, form: f, onValue: p, name: m = "", placeholder: h = "", label: g = "", error: _ = "", hidden: v = !1, disabled: y = !1, onBlur: b, className: x = "", after: S = "", before: C = "", inputmode: w = "decimal", course: T = 100, view: E, type: D, isClear: O = !1 }) {
-	let { value: k, version: A } = n(f, m || "", u), j = f && m ? k : u, M = (e) => D === "multi" ? e.replace(/[^+\d.+-]/g, "") : e.replace(/[^+\d.]/g, ""), N = (e, t) => {
+function d({ value: d, form: p, onValue: m, name: h = "", placeholder: g = "", label: _ = "", error: v = "", hidden: y = !1, disabled: b = !1, onBlur: x, className: S = "", after: C = "", before: w = "", inputmode: T = "decimal", course: E = 100, view: D, type: O, isClear: k = !1 }) {
+	let { value: A, version: j } = n(p, h || "", d), M = p && h ? A : d, N = o.useRef(null), P = o.useRef(!1);
+	o.useLayoutEffect(() => {
+		if (P.current) return;
+		let e = N.current;
+		if (!e) return;
+		let t = !g || M ? f(M ?? "") : "";
+		e.textContent !== t && (e.textContent = t);
+	}, [
+		M,
+		j,
+		g
+	]);
+	let F = (e) => O === "multi" ? e.replace(/[^+\d.+-]/g, "") : e.replace(/[^+\d.]/g, ""), I = (e, t) => {
 		let n = t.firstChild;
 		if (!n || n.nodeType !== Node.TEXT_NODE) return;
 		let r = n.textContent?.length ?? 0, i = Math.max(0, Math.min(e, r)), a = document.createRange(), o = window.getSelection();
 		o && (a.setStart(n, i), a.collapse(!0), o.removeAllRanges(), o.addRange(a), t.focus());
-	}, P = (e) => {
-		let t = e.target, n = t.textContent || "", r = c(t), i = M(n), a = l(n, r, M), o = {
-			value: Number(i || 0) * T,
-			name: m
+	}, L = (e) => {
+		let t = e.target, n = t.textContent || "", r = l(t), i = F(n), a = u(n, r, F), o = {
+			value: Number(i || 0) * E,
+			name: h
 		};
-		f && m && f.onValue(o), p && p !== f?.onValue && p(o), t.textContent = i, i.length > 0 && queueMicrotask(() => {
-			N(Math.min(a, i.length), t);
+		p && h && p.onValue(o), m && m !== p?.onValue && m(o), t.textContent = i, i.length > 0 && queueMicrotask(() => {
+			I(Math.min(a, i.length), t);
 		});
-	}, F = (e) => {
+	}, R = (e) => {
 		let t = e.target;
 		r.Blur(e), (t.textContent || "") === "" && (t.textContent = "0");
 		let n = {
-			value: Number(M(t.textContent || "")) * T,
-			name: m
+			value: Number(F(t.textContent || "")) * E,
+			name: h
 		};
-		b?.(n), f && m && f.setValue(n), p && p !== f?.onValue && p(n), t.textContent = d(t.textContent || "");
-	}, I = (e) => {
+		x?.(n), p && h && p.setValue(n), m && m !== p?.onValue && m(n), t.textContent = f(t.textContent || ""), P.current = !1;
+	}, z = (e) => {
+		P.current = !0;
 		let t = e.target;
-		t.textContent = M(t.textContent || ""), r.Focus({ target: e.currentTarget });
-	}, L = (e) => {
+		t.textContent = F(t.textContent || ""), r.Focus({ target: e.currentTarget });
+	}, B = (e) => {
 		let t = e.currentTarget.previousElementSibling;
 		t && (t.textContent = "");
 		let n = {
 			value: 0,
-			name: m
+			name: h
 		};
-		f && m && f.setValue(n), p && p !== f?.onValue && p(n);
-	}, R = (e) => {
+		p && h && p.setValue(n), m && m !== p?.onValue && m(n);
+	}, V = (e) => {
 		e.key === "Enter" && e.preventDefault();
-	}, z = (e) => {
-		e.preventDefault(), i(M(e.clipboardData?.getData("text/plain") ?? ""), e.currentTarget);
-	}, B = !y, V = j == null || (typeof j == "number" ? !1 : a(String(j ?? "")));
-	if (v && V) return "";
-	let H = {};
-	return H.inputMode = w ?? "decimal", h && (H.placeholder = h), B && (H.edit = ""), /* @__PURE__ */ s(t, {
+	}, H = (e) => {
+		e.preventDefault(), i(F(e.clipboardData?.getData("text/plain") ?? ""), e.currentTarget);
+	}, U = !b, W = M == null || (typeof M == "number" ? !1 : a(String(M ?? "")));
+	if (y && W) return "";
+	let G = {};
+	return G.inputMode = T ?? "decimal", g && (G.placeholder = g), U && (G.edit = ""), /* @__PURE__ */ c(t, {
 		type: "input",
-		label: g,
-		error: _,
-		element_blok: { className: [x] },
+		label: _,
+		error: v,
+		element_blok: { className: [S] },
 		element_input: { className: [e.w] },
 		children: [
-			C,
-			/* @__PURE__ */ o("div", {
-				...H,
-				onInput: P,
-				onPaste: z,
-				onBlur: F,
-				onKeyDown: R,
-				onFocus: I,
+			w,
+			/* @__PURE__ */ s("div", {
+				ref: N,
+				...G,
+				onInput: L,
+				onPaste: H,
+				onBlur: R,
+				onKeyDown: V,
+				onFocus: z,
 				role: "textbox",
 				spellCheck: !1,
-				"aria-label": g || h || "Сумма",
-				"aria-disabled": !B,
-				tabIndex: y ? -1 : 0,
-				contentEditable: B ? "plaintext-only" : !1,
-				suppressContentEditableWarning: !0,
-				children: !h || j ? d(j ?? "") : ""
-			}, A),
-			O && /* @__PURE__ */ o("button", {
+				"aria-label": _ || g || "Сумма",
+				"aria-disabled": !U,
+				tabIndex: b ? -1 : 0,
+				contentEditable: U ? "plaintext-only" : !1,
+				suppressContentEditableWarning: !0
+			}),
+			k && /* @__PURE__ */ s("button", {
 				type: "button",
-				onClick: L,
+				onClick: B,
 				"aria-label": "Очистить поле",
 				children: "x"
 			}),
-			S
+			C
 		]
 	});
 }
-u.displayName = "MoneyField";
-function d(e, t) {
+d.displayName = "MoneyField";
+function f(e, t) {
 	return t && (e = Number(e) / t), parseFloat(String(e || 0)).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1 ");
 }
 //#endregion
-export { u as default };
+export { d as default };

package/dist/fields/Numeric.js

@@ -3,15 +3,21 @@ import t from "../core/Field.js";
 import { useFormFieldState as n } from "../hooks/use.js";
 import r, { asEditableClipboard as i } from "../events/onEvent.js";
 import { isEmptyTextLike as a } from "./visibility.js";
-import "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/lib/fields/Numeric.tsx
-function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", label: m = "", hidden: h = !1, disabled: g = !1, onBlur: _, className: v = "", after: y = "", before: b = "", error: x = "", inputmode: S = "numeric", maxLength: C, max: w, view: T }) {
-	let E = !g, { value: D, version: O } = n(u, f, l);
-	p = p === void 0 ? "" : p, w = w === void 0 ? 99 : w;
-	let k = C ?? w, A = !1, j = (e) => {
+function u({ value: u, form: d, onValue: f, name: p = "", placeholder: m = "", label: h = "", hidden: g = !1, disabled: _ = !1, onBlur: v, className: y = "", after: b = "", before: x = "", error: S = "", inputmode: C = "numeric", maxLength: w, max: T, view: E }) {
+	let D = !_, { value: O, version: k } = n(d, p, u);
+	m = m === void 0 ? "" : m, T = T === void 0 ? 99 : T;
+	let A = O != null && O !== "" ? String(O) : "", j = o.useRef(null), M = o.useRef(!1);
+	o.useLayoutEffect(() => {
+		if (M.current) return;
+		let e = j.current;
+		e && e.textContent !== A && (e.textContent = A);
+	}, [A, k]);
+	let N = w ?? T, P = !1, F = (e) => {
 		let t = e.currentTarget, n = (t.textContent || "").replace(/\D/g, "");
-		n.length > k && (n = n.slice(0, k), t.textContent = n, queueMicrotask(() => {
+		n.length > N && (n = n.slice(0, N), t.textContent = n, queueMicrotask(() => {
 			let e = t.firstChild;
 			if (e && e.nodeType === Node.TEXT_NODE) {
 				let t = n.length, r = window.getSelection(), i = document.createRange();
@@ -20,54 +26,55 @@ function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", l
 		}));
 		let r = {
 			value: n,
-			name: f
+			name: p
 		};
-		u && f && u.onValue(r), d && d !== u?.onValue && d(r);
-	}, M = (e) => {
+		d && p && d.onValue(r), f && f !== d?.onValue && f(r);
+	}, I = (e) => {
+		M.current = !0;
 		let t = e.currentTarget;
 		t.textContent = (t.textContent || "").replace(/\D/g, ""), r.Focus({ target: e.currentTarget });
-	}, N = (e) => {
-		if (A && e.which === 86) return;
-		if (e.which === 17 || e.which === 91) return A = !0;
+	}, L = (e) => {
+		if (P && e.which === 86) return;
+		if (e.which === 17 || e.which === 91) return P = !0;
 		if (e.key === "Backspace") return;
 		let t = (e.currentTarget.textContent ?? "").replace(/\D/g, "").length;
-		k > 0 && t >= k && e.key.length === 1 && /\d/.test(e.key) && e.preventDefault(), e.key === "Enter" && e.preventDefault(), e.key.length === 1 && !/\d/.test(e.key) && e.preventDefault();
-	}, P = (e) => {
-		if (e.which === 17 || e.which === 91) return A = !1;
-	}, F = (e) => r.PasteDigits(k, i(e)), I = (e) => {
-		r.Blur(e), _?.({
+		N > 0 && t >= N && e.key.length === 1 && /\d/.test(e.key) && e.preventDefault(), e.key === "Enter" && e.preventDefault(), e.key.length === 1 && !/\d/.test(e.key) && e.preventDefault();
+	}, R = (e) => {
+		if (e.which === 17 || e.which === 91) return P = !1;
+	}, z = (e) => r.PasteDigits(N, i(e)), B = (e) => {
+		r.Blur(e), v?.({
 			value: e.currentTarget.textContent,
-			name: f
-		});
-	}, L = {};
-	return E && (L.edit = ""), L.inputMode = S ?? "numeric", p && (L.placeholder = p), h && a(D) ? /* @__PURE__ */ s(o, {}) : /* @__PURE__ */ c(t, {
+			name: p
+		}), M.current = !1;
+	}, V = {};
+	return D && (V.edit = ""), V.inputMode = C ?? "numeric", m && (V.placeholder = m), g && a(O) ? /* @__PURE__ */ c(s, {}) : /* @__PURE__ */ l(t, {
 		type: "numeric",
-		label: m,
-		error: x,
-		element_blok: { className: [v || ""] },
+		label: h,
+		error: S,
+		element_blok: { className: [y || ""] },
 		element_input: { className: [e.w] },
 		children: [
-			b,
-			/* @__PURE__ */ s("div", {
-				onPaste: F,
-				onInput: j,
-				onFocus: M,
-				onBlur: I,
-				onKeyDown: N,
-				onKeyUp: P,
+			x,
+			/* @__PURE__ */ c("div", {
+				ref: j,
+				onPaste: z,
+				onInput: F,
+				onFocus: I,
+				onBlur: B,
+				onKeyDown: L,
+				onKeyUp: R,
 				spellCheck: !1,
 				role: "textbox",
-				tabIndex: E ? 0 : -1,
-				"aria-label": m || p || "Число",
-				contentEditable: E ? "plaintext-only" : !1,
+				tabIndex: D ? 0 : -1,
+				"aria-label": h || m || "Число",
+				contentEditable: D ? "plaintext-only" : !1,
 				suppressContentEditableWarning: !0,
-				...L,
-				children: D
-			}, O),
-			y
+				...V
+			}),
+			b
 		]
 	});
 }
-l.displayName = "NumberField";
+u.displayName = "NumberField";
 //#endregion
-export { l as default };
+export { u as default };

package/dist/fields/Phone.js

@@ -5,10 +5,10 @@ import r, { asEditableClipboard as i } from "../events/onEvent.js";
 import { isEmptyTextLike as a } from "./visibility.js";
 import o from "../mask/MaskPhone.js";
 import { useFormInit as s } from "../FormInitContext.js";
-import "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import c from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/lib/fields/Phone.tsx
-function d(e) {
+function f(e) {
 	let t = window.getSelection();
 	if (!t || t.rangeCount === 0) return 0;
 	let n = t.getRangeAt(0);
@@ -16,97 +16,107 @@ function d(e) {
 	let r = document.createRange();
 	return r.selectNodeContents(e), r.setEnd(n.startContainer, n.startOffset), r.toString().length;
 }
-function f(e, t) {
+function p(e, t) {
 	if (t <= 0) return 0;
 	let n = 0;
 	for (let r = 0; r < e.length; r++) if (/\d/.test(e[r]) && (n++, n === t)) return r + 1;
 	return e.length;
 }
-function p({ value: p, form: m, onValue: h, onBlur: g, name: _ = "", placeholder: v = "", label: y = "", error: b = "", hidden: x = !1, disabled: S = !1, className: C = "", after: w = "", before: T = "", inputmode: E = "tel", view: D }) {
-	let { onNotice: O } = s(), k = !S, { value: A, version: j } = n(m, _, p), M = "+_(___) ___-__-__", N = !0, P = 0, F = (e, t) => {
+function m({ value: m, form: h, onValue: g, onBlur: _, name: v = "", placeholder: y = "", label: b = "", error: x = "", hidden: S = !1, disabled: C = !1, className: w = "", after: T = "", before: E = "", inputmode: D = "tel", view: O }) {
+	let { onNotice: k } = s(), A = !C, { value: j, version: M } = n(h, v, m), N = c.useRef(null), P = c.useRef(!1), F = "+_(___) ___-__-__", I = !0, L = 0, R = (e, t) => {
 		let n = t.firstChild;
 		if (!n || n.nodeType !== Node.TEXT_NODE) return;
 		let r = n.textContent?.length ?? 0, i = Math.max(0, Math.min(e, r)), a = document.createRange(), o = window.getSelection();
 		o && (a.setStart(n, i), a.collapse(!0), o.removeAllRanges(), o.addRange(a), t.focus());
-	}, I = (e) => {
-		let t = e.target, n = t.textContent || "", r = d(t), i = n.slice(0, r).replace(/\D/g, "").length, a = R(n);
+	}, z = (e) => {
+		let t = e.target, n = t.textContent || "", r = f(t), i = n.slice(0, r).replace(/\D/g, "").length, a = V(n);
 		t.textContent = a.q;
-		let o = f(a.q, i);
+		let o = p(a.q, i);
 		a.q.length > 0 && queueMicrotask(() => {
-			F(Math.min(o, a.q.length), t);
+			R(Math.min(o, a.q.length), t);
 		});
 		let s = {
 			value: a.q.replace(/\D/g, ""),
-			name: _ || ""
+			name: v || ""
 		};
-		m && _ && m.onValue(s), h && h !== m?.onValue && h(s);
-	}, L = (e) => r.PasteOne(i(e)), R = (e) => {
-		M = "+_(___) ___-__-__", N = !0, P = 0;
+		h && v && h.onValue(s), g && g !== h?.onValue && g(s);
+	}, B = (e) => r.PasteOne(i(e)), V = (e) => {
+		F = "+_(___) ___-__-__", I = !0, L = 0;
 		let t = 0, n = "", r = e.replace(/\D/g, "");
-		r === "" && (N = !0);
+		r === "" && (I = !0);
 		let i = r.split(""), a = "";
 		i.forEach((e) => {
-			N && (a += e, o[a] !== void 0 && N ? (N = !1, M = o[a].mask.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = o[a].code) : (N && (P = ("" + a).length, M = `+${a}_(___) ___-__-__`.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = ""), P > ("" + a).length && (N = !0, M = `+${a}_(___) ___-__-__`.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = "")));
+			I && (a += e, o[a] !== void 0 && I ? (I = !1, F = o[a].mask.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = o[a].code) : (I && (L = ("" + a).length, F = `+${a}_(___) ___-__-__`.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = ""), L > ("" + a).length && (I = !0, F = `+${a}_(___) ___-__-__`.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = "")));
 		});
-		let s = M.replace(/\D/g, "");
+		let s = F.replace(/\D/g, "");
 		return s.length >= r.length && (r = s), {
-			q: M.replace(/[_\d]/g, function() {
+			q: F.replace(/[_\d]/g, function() {
 				return r.charAt(t++) || "_";
 			}),
 			i: t,
 			v: r,
 			f: n
 		};
-	}, z = (e) => {
+	};
+	c.useLayoutEffect(() => {
+		if (P.current) return;
+		let e = N.current;
+		if (!e) return;
+		let t = V(String(j || ""));
+		e.textContent !== t.q && (e.textContent = t.q);
+	}, [j, M]);
+	let H = (e) => {
 		e.preventDefault();
 		let t = e.target;
 		navigator.clipboard.writeText((t.textContent || "").replace(/\D/g, "")).then(function() {
-			O("Данные в буфер обмене");
+			k("Данные в буфер обмене");
 		}, function(e) {
 			console.error("Async: Could not copy text: ", e);
 		});
-	}, B = R(String(A || "")), V = (e) => {
+	};
+	V(String(j || ""));
+	let U = (e) => {
 		e.key === "Enter" && e.preventDefault();
-	}, H = (e) => {
-		r.Blur(e), g && g({
+	}, W = (e) => {
+		r.Blur(e), _ && _({
 			value: (e.target.textContent || "").replace(/\D/g, ""),
-			name: _ || ""
-		});
-	}, U = (e) => {
-		r.Focus({ target: e.currentTarget });
-	}, W = {};
-	v && (W.placeholder = v), W.inputMode = E ?? "tel";
-	let G = String(A ?? "").replace(/\D/g, "");
-	return x && a(G) ? /* @__PURE__ */ l(c, {}) : /* @__PURE__ */ u(t, {
+			name: v || ""
+		}), P.current = !1;
+	}, G = (e) => {
+		P.current = !0, r.Focus({ target: e.currentTarget });
+	}, K = {};
+	y && (K.placeholder = y), K.inputMode = D ?? "tel";
+	let q = String(j ?? "").replace(/\D/g, "");
+	return S && a(q) ? /* @__PURE__ */ u(l, {}) : /* @__PURE__ */ d(t, {
 		type: "input",
-		label: y,
-		error: b,
-		element_blok: { className: [C] },
+		label: b,
+		error: x,
+		element_blok: { className: [w] },
 		element_input: { className: [e.w] },
 		children: [
-			T,
-			/* @__PURE__ */ l("div", {
-				onPaste: L,
-				onInput: I,
-				onKeyDown: V,
-				onContextMenu: z,
-				onBlur: H,
-				onFocus: U,
+			E,
+			/* @__PURE__ */ u("div", {
+				ref: N,
+				onPaste: B,
+				onInput: z,
+				onKeyDown: U,
+				onContextMenu: H,
+				onBlur: W,
+				onFocus: G,
 				spellCheck: !1,
 				role: "textbox",
-				"aria-label": y || v || "Телефон",
-				"aria-disabled": !k,
-				tabIndex: S ? -1 : 0,
-				"data-disabled": !k,
-				contentEditable: k ? "plaintext-only" : !1,
+				"aria-label": b || y || "Телефон",
+				"aria-disabled": !A,
+				tabIndex: C ? -1 : 0,
+				"data-disabled": !A,
+				contentEditable: A ? "plaintext-only" : !1,
 				suppressContentEditableWarning: !0,
-				...W,
-				children: B.q
-			}, j),
-			w
+				...K
+			}),
+			T
 		]
 	});
 }
-p.displayName = "PhoneField";
+m.displayName = "PhoneField";
 //#endregion
-export { p as default };
+export { m as default };

package/dist/fields/Textarea.js

@@ -3,50 +3,59 @@ import t from "../core/Field.js";
 import { useFormFieldState as n } from "../hooks/use.js";
 import r, { asEditableClipboard as i } from "../events/onEvent.js";
 import { isEmptyTextLike as a } from "./visibility.js";
-import "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/lib/fields/Textarea.tsx
-function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", label: m = "", hidden: h = !1, disabled: g = !1, onBlur: _, className: v = "", after: y = "", before: b = "", error: x = "", inputmode: S = "text", maxLength: C, spellCheck: w = !0 }) {
-	let { value: T, version: E } = n(u, f || "", l), D = !g, O = (e) => {
+function u({ value: u, form: d, onValue: f, name: p = "", placeholder: m = "", label: h = "", hidden: g = !1, disabled: _ = !1, onBlur: v, className: y = "", after: b = "", before: x = "", error: S = "", inputmode: C = "text", maxLength: w, spellCheck: T = !0 }) {
+	let { value: E, version: D } = n(d, p || "", u), O = !_, k = String(E ?? ""), A = o.useRef(null), j = o.useRef(!1);
+	o.useLayoutEffect(() => {
+		if (j.current) return;
+		let e = A.current;
+		e && e.innerText !== k && (e.innerText = k);
+	}, [k, D]);
+	let M = (e) => {
 		let t = {
 			value: e.currentTarget.innerText,
-			name: f || ""
+			name: p || ""
 		};
-		u && f && u.onValue(t), d && d !== u?.onValue && d(t);
-	}, k = (e) => {
+		d && p && d.onValue(t), f && f !== d?.onValue && f(t);
+	}, N = (e) => {
 		let t = (e.currentTarget.textContent ?? "").trim();
-		C && t.length >= C && e.key !== "Backspace" && e.preventDefault(), e.key === "Enter" && !e.shiftKey && e.preventDefault();
-	}, A = (e) => r.Paste(C || 0, i(e));
-	if (h && a(T)) return /* @__PURE__ */ s(o, {});
-	let j = {};
-	return p && (j.placeholder = p), D && (j.edit = ""), j.inputMode = S || "text", /* @__PURE__ */ c(t, {
+		w && t.length >= w && e.key !== "Backspace" && e.preventDefault(), e.key === "Enter" && !e.shiftKey && e.preventDefault();
+	}, P = (e) => r.Paste(w || 0, i(e));
+	if (g && a(E)) return /* @__PURE__ */ c(s, {});
+	let F = {};
+	return m && (F.placeholder = m), O && (F.edit = ""), F.inputMode = C || "text", /* @__PURE__ */ l(t, {
 		type: "note",
-		label: m,
-		error: x,
-		element_blok: { className: [v || ""] },
+		label: h,
+		error: S,
+		element_blok: { className: [y || ""] },
 		element_input: { className: [e.n] },
 		children: [
-			b,
-			/* @__PURE__ */ s("div", {
-				onPaste: A,
-				onInput: O,
+			x,
+			/* @__PURE__ */ c("div", {
+				ref: A,
+				onPaste: P,
+				onInput: M,
+				onFocus: () => {
+					j.current = !0;
+				},
 				onBlur: (e) => {
-					r.Blur(e), _?.({
+					r.Blur(e), v?.({
 						value: (e.currentTarget.textContent ?? "").trim(),
-						name: f || ""
-					});
+						name: p || ""
+					}), j.current = !1;
 				},
-				onKeyDown: k,
-				spellCheck: w,
-				contentEditable: D ? "plaintext-only" : !1,
+				onKeyDown: N,
+				spellCheck: T,
+				contentEditable: O ? "plaintext-only" : !1,
 				suppressContentEditableWarning: !0,
-				...j,
-				children: T
-			}, E),
-			y
+				...F
+			}),
+			b
 		]
 	});
 }
-l.displayName = "TextareaField";
+u.displayName = "TextareaField";
 //#endregion
-export { l as default };
+export { u as default };

package/dist/fields/Time.js

@@ -82,7 +82,7 @@ function _(e, t, n) {
 	}
 	return p(Math.floor(i / 60), i % 60);
 }
-function v({ value: h = "", form: v, onValue: ee, onBlur: y, name: b = "", placeholder: x = "", label: S = "", hidden: C = !1, disabled: w = !1, error: T = "", className: E = "", after: D = "", before: te = "", step: O = 60, min: k, max: A, id: j, spellCheck: M = !1, align: N = "start" }) {
+function v({ value: h = "", form: v, onValue: ee, onBlur: y, name: b = "", placeholder: x = "", label: S = "", hidden: C = !1, disabled: w = !1, error: T = "", className: E = "", after: te = "", before: D = "", step: O = 60, min: k, max: A, id: j, spellCheck: M = !1, align: N = "start" }) {
 	let { value: P, version: F } = n(v, b, h), I = d(P), L = !w, R = i.useRef(null), z = i.useRef(null), B = i.useRef(null), [V, H] = i.useState(!1);
 	i.useLayoutEffect(() => {
 		if (!V || !L) return;
@@ -198,7 +198,7 @@ function v({ value: h = "", form: v, onValue: ee, onBlur: y, name: b = "", place
 			props: { "data-disabled": w || !L ? "true" : void 0 }
 		},
 		children: [
-			te,
+			D,
 			/* @__PURE__ */ o("div", {
 				ref: B,
 				className: e.timeInner,
@@ -244,8 +244,8 @@ function v({ value: h = "", form: v, onValue: ee, onBlur: y, name: b = "", place
 						children: !L || !V ? Q === null ? "" : l(Q) : null
 					})
 				]
-			}, F),
-			D
+			}),
+			te
 		]
 	});
 }

package/dist/index.js

@@ -1,4 +1,14 @@
-import './embedBaseStyles.js';
+/* @elcrm/form:base-styles-inline */
+(function () {
+    if (typeof document === "undefined") return;
+    if (document.getElementById("elcrm-form-base-styles")) return;
+    var el = document.createElement("style");
+    el.id = "elcrm-form-base-styles";
+    el.setAttribute("data-elcrm", "form");
+    el.textContent = "._l_zzcgd_2{min-width:var(--field-width);gap:var(--field-block-gap,0);flex-direction:column;margin:0;padding:0;display:flex;position:relative}._l_zzcgd_2>dt,._l_zzcgd_2>dd{margin:0;padding:0}._l_zzcgd_2[data-field=group] div{cursor:pointer;border-bottom:var(--field-border);padding:var(--field-padding);margin:0}._l_zzcgd_2[data-field=group] div:last-child{border-bottom:0}._l_zzcgd_2 [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);display:block}._l_zzcgd_2 [placeholder]:focus:before{display:none}._f_zzcgd_33{box-sizing:border-box;align-items:center;gap:var(--field-icon-gap,10px);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:0 var(--field-side-padding,14px);transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}._f_zzcgd_33:hover{border-color:var(--field-border-hover,var(--field-border))}._f_zzcgd_33:focus-within{border-color:var(--field-border-focus,var(--field-border));box-shadow:0 0 0 3px var(--field-focus-ring,#0000);background:var(--field-background-focus,var(--field-background))}._f_zzcgd_33._e_zzcgd_57:focus-within{background:var(--field-error-background);color:var(--field-error-color)}._f_zzcgd_33[data-disabled=true]{background:var(--field-background-disabled,var(--field-background));border-color:var(--field-border-disabled,var(--field-border));color:var(--field-color-disabled,var(--field-placeholder));cursor:not-allowed;opacity:.85}._f_zzcgd_33[data-disabled=true]>*{cursor:not-allowed}._f_zzcgd_33>div{min-height:var(--field-height);line-height:calc(var(--field-height) - 2px);padding:var(--field-inner-padding,0 2px);font-size:var(--control-font-size,14px);text-wrap:pretty;outline:0;flex:1;margin:0}._f_zzcgd_33>div::selection{background:var(--field-selection-bg,#b3d4fc);color:var(--field-selection-color,inherit)}._f_zzcgd_33>:not(div){color:var(--field-icon-color,var(--field-placeholder));flex:none;justify-content:center;align-items:center;display:inline-flex}._f_zzcgd_33>:not(div) svg{width:20px;height:20px}._n_zzcgd_97 div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);padding-top:var(--field-note-padding,var(--field-note-padding-top,8px));padding-bottom:var(--field-note-padding,var(--field-note-padding-top,8px))}._w_zzcgd_104>div{text-wrap:nowrap;overflow:scroll hidden}._w_zzcgd_104>div::-webkit-scrollbar{width:0;height:0}._time_zzcgd_114>div{text-wrap:nowrap;align-items:center;min-width:0;display:flex;overflow:visible}._time_zzcgd_114 ._timeInner_zzcgd_121{justify-content:flex-start;align-items:center;gap:4px;width:100%;min-width:0;display:flex}._time_zzcgd_114._timeAlignCenter_zzcgd_132 ._timeInner_zzcgd_121{justify-content:center}._time_zzcgd_114 ._timeSep_zzcgd_135{opacity:.65;-webkit-user-select:none;user-select:none;flex:none;padding:0 2px;font-weight:500;transform:translateY(-1px)}._time_zzcgd_114 ._timePart_zzcgd_146{box-sizing:border-box;width:1em;min-width:0;color:inherit;font:inherit;line-height:inherit;text-align:left;min-height:var(--field-height);cursor:text;background:0 0;border:0;border-radius:6px;outline:none;flex:none;margin:0;padding:0}._time_zzcgd_114 ._timePart_zzcgd_146[contenteditable=false]{cursor:not-allowed;opacity:.7}._time_zzcgd_114 ._timePart_zzcgd_146:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:.6}._time_zzcgd_114 ._timePart_zzcgd_146:focus:empty:before{content:none}._time_zzcgd_114 ._timePart_zzcgd_146:focus-visible{background:0 0}._time_zzcgd_114._timeAlignCenter_zzcgd_132 ._timePart_zzcgd_146{text-align:center}._t_zzcgd_114{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:10px}._g_zzcgd_192{flex-direction:column}._range_zzcgd_196>div{box-sizing:border-box;min-width:0;min-height:var(--field-height);flex:1;align-items:center;line-height:normal;display:flex}._range_zzcgd_196 ._rangeTrack_zzcgd_205{box-sizing:border-box;width:100%;height:var(--field-range-bar-height,14px);background:var(--field-range-track,#e0e0e0);cursor:pointer;touch-action:none;border-radius:999px;outline:none;flex-shrink:0;position:relative;overflow:hidden}._range_zzcgd_196 ._rangeTrack_zzcgd_205:focus-visible{box-shadow:0 0 0 3px var(--field-focus-ring,#0000)}._range_zzcgd_196 ._rangeTrack_zzcgd_205[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}._range_zzcgd_196 ._rangeFill_zzcgd_226{background:var(--field-range-fill,#00b5ad);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}._range_zzcgd_196 ._rangeFillFull_zzcgd_237{border-radius:999px}._h_zzcgd_241{--field-border:0}._h_zzcgd_241 div{border:var(--field-check-box-border,--field-border);width:var(--field-height);height:var(--field-height);border-radius:var(--field-radius);background:var(--field-background);cursor:pointer;flex:none;gap:10px;margin:0;position:relative}._h_zzcgd_241 div[aria-checked=true]{background:var(--field-background-active)}._h_zzcgd_241 div:after{content:\"\";background:0 0;border-top:none;border-bottom:3px solid #fcfff4;border-left:3px solid #fcfff4;border-right:none;width:9px;height:5px;margin:4px;position:absolute;top:5px;left:4px;transform:rotate(-45deg)}._e_zzcgd_57{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}._m_zzcgd_280{color:var(--field-error-color);margin-top:6px;font-size:12px;font-style:normal}\n\n._o_j48yg_2{z-index:98;background:0 0;position:fixed;inset:0}._c_j48yg_13{background:var(--select-background);z-index:99;color:#fff;box-sizing:border-box;border-radius:10px;min-width:259px;max-height:min(92vh,480px);margin:0;padding:10px 12px 12px;display:block;position:absolute;overflow:hidden auto;box-shadow:5px 7px 18px #000000a8}._c_j48yg_13 [grid-calendar]{grid-template-columns:repeat(7,1fr);grid-auto-rows:34px;gap:2px;display:grid}._c_j48yg_13 [grid-calendar]>p{color:var(--color-placeholder);box-sizing:border-box;justify-content:center;align-items:center;margin:0;padding:0;font-size:.75rem;font-weight:500;line-height:1;display:flex}._c_j48yg_13 [grid-month]{grid-template-columns:1fr 1fr 1fr 1fr;width:250px;display:grid}._c_j48yg_13 b{cursor:pointer;text-align:center;border-radius:5px;padding:8px 5px;font-weight:400;display:block}._c_j48yg_13 b.__active_j48yg_64{background:var(--bg-select-active)}._c_j48yg_13 b:hover{background:var(--bg-select-hover)}._c_j48yg_13 p{color:var(--color-placeholder);text-align:center;cursor:default;pointer-events:none;padding:0}._c_j48yg_13 i{text-align:center;cursor:pointer;border-radius:5px;flex:0 30px;padding:9px}._c_j48yg_13 i:hover{background:var(--bg-select-hover)}._c_j48yg_13 i:before{cursor:pointer;display:block}._c_j48yg_13 s{align-items:center;gap:4px;padding-bottom:6px;font-style:normal;text-decoration:none;display:flex}._c_j48yg_13 s h2{text-align:center;color:#fff;cursor:default;flex-wrap:nowrap;flex:auto;justify-content:center;align-items:center;gap:8px;min-width:0;margin:0;padding:0;font-size:16px;font-weight:400;line-height:1.25;display:flex}._c_j48yg_13 ._dateHeaderMonth_j48yg_119,._c_j48yg_13 ._dateHeaderYear_j48yg_119{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:6px;padding:2px 8px}._c_j48yg_13 ._dateHeaderMonth_j48yg_119:hover,._c_j48yg_13 ._dateHeaderYear_j48yg_119:hover{background:var(--bg-select-hover)}._c_j48yg_13 ._dateHeaderDisabled_j48yg_129{cursor:not-allowed;opacity:.45;pointer-events:none}._c_j48yg_13 ._dateHeaderDisabled_j48yg_129[data-active=true],._c_j48yg_13 ._dateHeaderDisabled_j48yg_129[data-current=true]{opacity:.45}._c_j48yg_13 [grid-calendar] b[data-current=true],._c_j48yg_13 [grid-month] b[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);font-weight:600}._c_j48yg_13 [grid-calendar] b[data-active=true]:not([data-current=true]),._c_j48yg_13 [grid-month] b[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px}._c_j48yg_13 [grid-calendar] b[data-active=true][data-current=true],._c_j48yg_13 [grid-month] b[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}._c_j48yg_13 [grid-calendar] p[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);color:inherit;border-radius:5px;font-weight:600}._c_j48yg_13 [grid-calendar] p[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px;opacity:.85}._c_j48yg_13 [grid-calendar] p[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}._c_j48yg_13 span{text-align:center;padding:2px}._c_j48yg_13 span p{color:var(--color-placeholder);padding:8px 5px}._c_j48yg_13 [grid-calendar]>span{box-sizing:border-box;justify-content:stretch;align-items:stretch;min-height:0;padding:0;display:flex}._c_j48yg_13 [grid-calendar]>span>b,._c_j48yg_13 [grid-calendar]>span>p{box-sizing:border-box;border-radius:5px;flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;margin:0;padding:0;display:flex}._c_j48yg_13 ._as_j48yg_196{cursor:ns-resize}._c_j48yg_13 ._ap_j48yg_199{cursor:pointer}[field=password] dd{white-space:nowrap;font-style:unset;-webkit-text-security:disc;-webkit-user-select:text;user-select:text}[field=password][show] dd,[field=password] dd:before{-webkit-text-security:none}[field=code] div{gap:8px;display:flex}[field=select] dd{cursor:pointer}[field] dd:before{pointer-events:none}[field=check] dd{cursor:pointer;max-width:35px;padding:0}[field=check] [active]:after{content:\"\";background:#394264;border-radius:5px;width:15px;height:15px;display:block}[field=file] input{display:none}[field=file] dd{aspect-ratio:16/9;cursor:pointer;position:relative}[field=file] img{aspect-ratio:16/9;object-fit:contain;cursor:pointer;width:-webkit-fill-available;display:block}[field=file] label{aspect-ratio:16/9;object-fit:contain;cursor:pointer;width:-webkit-fill-available;display:block;position:absolute}[field=color] dd{border:0;gap:3px;padding:0;display:flex}[field=color] dd s{cursor:pointer;opacity:.6;border:1px solid #dde2e4;border-radius:6px;flex:1}[field=color] dd s:hover{opacity:.9}[field=color] dd s[active=true]{opacity:1}\n\n:root{--select-overlay:#0000;--select-height:52px;--select-separator:1px solid #40434c;--select-color:#e8e8eb;--select-background:#26282e;--select-icon:calc(--select-height / 1.5);--select-icon-padding:calc((--select-height - --select-icon) / 2);--select-font-size:13px}._o_1q26w_12{z-index:98;background:var(--select-overlay);position:fixed;inset:0}._l_1q26w_22{background:var(--select-background);z-index:99;border-radius:20px;max-height:300px;margin:0;padding:0;display:block;position:fixed;overflow:scroll}._l_1q26w_22::-webkit-scrollbar{width:0;height:0}._l_1q26w_22 ul{width:100%;max-height:300px;margin:0;padding:0;list-style:none;display:block;overflow:hidden auto}._l_1q26w_22 li{border-bottom:var(--select-separator);cursor:pointer;color:var(--select-color);height:var(--select-height);line-height:var(--select-height);font-size:var(--select-font-size);white-space:nowrap;text-overflow:ellipsis;opacity:1;margin:0;padding:0 14px;display:block;overflow:hidden;text-align:left!important;border-left:0!important}._l_1q26w_22 li:hover,._l_1q26w_22 li[data-focus=true]{background:#2f323a}._l_1q26w_22 li:last-child{border-bottom:0}._i_1q26w_80{width:var(--select-icon);height:var(--select-icon);color:var(--field-color);right:var(--select-icon-padding);top:var(--select-icon-padding);position:absolute}._f_1q26w_89{cursor:pointer}._f_1q26w_89[aria-disabled=true]{cursor:not-allowed}\n";
+    document.head.appendChild(el);
+})();
+
 import e from "./package.js";
 import { useForm as t, useFormField as n, useFormFieldState as r } from "./hooks/use.js";
 import i from "./fields/Range.js";