@elcrm/form 0.0.87 → 0.1.0

package/dist/fields/Mask.js

@@ -1,119 +1 @@
-import e from "../styles/Field.module.js";
-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 o from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-//#region src/lib/fields/Mask.tsx
-function u(e) {
-	let t = window.getSelection();
-	if (!t || t.rangeCount === 0) return 0;
-	let n = t.getRangeAt(0);
-	if (!e.contains(n.startContainer)) return 0;
-	let r = document.createRange();
-	return r.selectNodeContents(e), r.setEnd(n.startContainer, n.startOffset), r.toString().length;
-}
-function d(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 f({ value: f = "", form: p, onValue: m, onBlur: h, name: g = "", format: _ = "+_(___) ___-__-__", placeholder: v = "", label: y = "", error: b = "", hidden: x = !1, disabled: S = !1, className: C = "", after: w = "", before: T = "", inputmode: E = "numeric", view: D }) {
-	let O = !S, { value: k, version: A } = n(p, g, f), j = o.useRef(null), M = o.useRef(!1), N = _, P = !0, F = 0, 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());
-	}, L = (e) => r.PasteOne(i(e)), R = (e) => {
-		N = _, P = !0, F = 0;
-		let t = 0, n = "", r = e.replace(/\D/g, "");
-		r === "" && (P = !0);
-		let i = r.split(""), a = "";
-		i.forEach((e) => {
-			P && (a += e, P && (F = ("" + a).length, N = _.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = ""), F > ("" + a).length && (P = !0, N = _.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = ""));
-		});
-		let o = N.replace(/\D/g, "");
-		return o.length >= r.length && (r = o), {
-			q: N.replace(/[_\d]/g, function() {
-				return r.charAt(t++) || "_";
-			}),
-			i: t,
-			v: r,
-			f: n
-		};
-	};
-	o.useLayoutEffect(() => {
-		if (M.current) return;
-		let e = j.current;
-		if (!e) return;
-		let t = R(String(k || ""));
-		e.textContent !== t.q && (e.textContent = t.q);
-	}, [
-		k,
-		A,
-		_
-	]), R(String(k || ""));
-	let z = (e) => {
-		let t = e.target, n = t.textContent || "", r = u(t), i = n.slice(0, r).replace(/\D/g, "").length, a = R(n);
-		t.textContent = a.q;
-		let o = d(a.q, i);
-		a.q.length > 0 && queueMicrotask(() => {
-			I(Math.min(o, a.q.length), t);
-		});
-		let s = {
-			value: a.q.replace(/\D/g, ""),
-			name: g
-		};
-		p && g && p.onValue(s), m && m !== p?.onValue && m(s);
-	}, B = (e) => {
-		e.key === "Enter" && e.preventDefault();
-	}, V = (e) => {
-		r.Blur(e), h && h({
-			value: (e.target.textContent ?? "").replace(/\D/g, ""),
-			name: g
-		}), M.current = !1;
-	}, H = (e) => {
-		M.current = !0, r.Focus({ target: e.currentTarget });
-	}, U = {};
-	v && (U.placeholder = v), U.inputMode = E ?? "numeric";
-	let W = String(k ?? "").replace(/\D/g, "");
-	return x && a(W) ? /* @__PURE__ */ c(s, {}) : /* @__PURE__ */ l(t, {
-		type: "input",
-		label: y,
-		error: b,
-		element_blok: { className: [C] },
-		element_input: { className: [e.w] },
-		children: [
-			T ? /* @__PURE__ */ c("span", {
-				className: e.affix,
-				children: T
-			}) : null,
-			/* @__PURE__ */ c("div", {
-				ref: j,
-				onPaste: L,
-				onInput: z,
-				onKeyDown: B,
-				onBlur: V,
-				onFocus: H,
-				role: "textbox",
-				spellCheck: !1,
-				"aria-label": y || v || g || "Маска",
-				"aria-disabled": !O,
-				tabIndex: S ? -1 : 0,
-				"data-disabled": !O,
-				contentEditable: O ? "plaintext-only" : !1,
-				suppressContentEditableWarning: !0,
-				...U
-			}),
-			w ? /* @__PURE__ */ c("span", {
-				className: e.affix,
-				children: w
-			}) : null
-		]
-	});
-}
-f.displayName = "MaskField";
-//#endregion
-export { f as default };
+import e from"../styles/Field.module.js";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 o from"react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";function u(e){let t=window.getSelection();if(!t||t.rangeCount===0)return 0;let n=t.getRangeAt(0);if(!e.contains(n.startContainer))return 0;let r=document.createRange();return r.selectNodeContents(e),r.setEnd(n.startContainer,n.startOffset),r.toString().length}function d(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 f({value:f=``,form:p,onValue:m,onBlur:h,name:g=``,format:_=`+_(___) ___-__-__`,placeholder:v=``,label:y=``,error:b=``,hidden:x=!1,disabled:S=!1,className:C=``,after:w=``,before:T=``,inputmode:E=`numeric`,view:D}){let O=!S,{value:k,version:A}=n(p,g,f),j=o.useRef(null),M=o.useRef(!1),N=_,P=!0,F=0,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())},L=e=>r.PasteOne(i(e)),R=e=>{N=_,P=!0,F=0;let t=0,n=``,r=e.replace(/\D/g,``);r===``&&(P=!0);let i=r.split(``),a=``;i.forEach(e=>{P&&(a+=e,P&&(F=(``+a).length,N=_.replace(RegExp(`[0-9]`,`g`),`_`),n=``),F>(``+a).length&&(P=!0,N=_.replace(RegExp(`[0-9]`,`g`),`_`),n=``))});let o=N.replace(/\D/g,``);return o.length>=r.length&&(r=o),{q:N.replace(/[_\d]/g,function(){return r.charAt(t++)||`_`}),i:t,v:r,f:n}};o.useLayoutEffect(()=>{if(M.current)return;let e=j.current;if(!e)return;let t=R(String(k||``));e.textContent!==t.q&&(e.textContent=t.q)},[k,A,_]),R(String(k||``));let z=e=>{let t=e.target,n=t.textContent||``,r=u(t),i=n.slice(0,r).replace(/\D/g,``).length,a=R(n);t.textContent=a.q;let o=d(a.q,i);a.q.length>0&&queueMicrotask(()=>{I(Math.min(o,a.q.length),t)});let s={value:a.q.replace(/\D/g,``),name:g};p&&g&&p.onValue(s),m&&m!==p?.onValue&&m(s)},B=e=>{e.key===`Enter`&&e.preventDefault()},V=e=>{r.Blur(e),h&&h({value:(e.target.textContent??``).replace(/\D/g,``),name:g}),M.current=!1},H=e=>{M.current=!0,r.Focus({target:e.currentTarget})},U={};v&&(U.placeholder=v),U.inputMode=E??`numeric`;let W=String(k??``).replace(/\D/g,``);return x&&a(W)?c(s,{}):l(t,{type:`input`,label:y,error:b,element_blok:{className:[C]},element_input:{className:[e.w]},children:[T?c(`span`,{className:e.affix,children:T}):null,c(`div`,{ref:j,onPaste:L,onInput:z,onKeyDown:B,onBlur:V,onFocus:H,role:`textbox`,spellCheck:!1,"aria-label":y||v||g||`Маска`,"aria-disabled":!O,tabIndex:S?-1:0,"data-disabled":!O,contentEditable:O?`plaintext-only`:!1,suppressContentEditableWarning:!0,...U}),w?c(`span`,{className:e.affix,children:w}):null]})}f.displayName=`MaskField`;export{f as default};

package/dist/fields/Modal.js

@@ -1,68 +1 @@
-import e from "../styles/Field.module.js";
-import t from "../core/Field.js";
-import { useFormFieldState as n } from "../hooks/use.js";
-import { isEmptyTextLike as r } from "./visibility.js";
-import { useFormInit as i } from "../FormInitContext.js";
-import "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/lib/fields/Modal.tsx
-function c({ value: c, form: l, onValue: u, name: d, placeholder: f = "", label: p, error: m, hidden: h = !1, disabled: g = !1, after: _, before: v, view: y, modal: b, options: x, className: S }) {
-	let { onModal: C } = i(), { value: w } = n(l, d, c), T = w, E = (e) => e ? Array.isArray(e) ? e[1] || "" : e : "", D = (e) => {
-		if (Array.isArray(e) && e.length >= 2) return [e[0], String(e[1] ?? "")];
-		if (typeof e == "object" && e) {
-			let t = e;
-			if (t.id !== void 0 && t.name !== void 0) return [t.id, t.name];
-		}
-		return String(e ?? "");
-	}, O = (e) => {
-		let t = {
-			value: D(e),
-			name: d
-		};
-		l && d && l.setValue(t), u && u !== l?.onValue && u(t);
-	}, k = () => {
-		if (g) return;
-		if (!b) return console.error("modal - empty");
-		let e = b.split(".");
-		if (e.length < 2) return console.error("modal должен быть в формате 'module.name'");
-		let t = Array.isArray(T) ? T[0] : T;
-		C({
-			module: e[0],
-			modalName: e[1],
-			callback: O,
-			onValue: O,
-			options: x,
-			fieldName: d,
-			value: t
-		});
-	}, A = {};
-	f && (A.placeholder = f);
-	let j = r(E(T));
-	return h && j ? /* @__PURE__ */ o(a, {}) : /* @__PURE__ */ s(t, {
-		type: "input",
-		label: p,
-		element_blok: { className: [S || ""] },
-		error: m,
-		element_input: {
-			className: [e.w],
-			props: { onClick: k }
-		},
-		children: [
-			v ? /* @__PURE__ */ o("span", {
-				className: e.affix,
-				children: v
-			}) : null,
-			/* @__PURE__ */ o("div", {
-				...A,
-				children: E(T)
-			}),
-			_ ? /* @__PURE__ */ o("span", {
-				className: e.affix,
-				children: _
-			}) : null
-		]
-	});
-}
-c.displayName = "ModalField";
-//#endregion
-export { c as default };
+import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{isEmptyTextLike as r}from"./visibility.js";import{useFormInit as i}from"../FormInitContext.js";import"react";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";function c({value:c,form:l,onValue:u,name:d,placeholder:f=``,label:p,error:m,hidden:h=!1,disabled:g=!1,after:_,before:v,view:y,modal:b,options:x,className:S}){let{onModal:C}=i(),{value:w}=n(l,d,c),T=w,E=e=>e?Array.isArray(e)?e[1]||``:e:``,D=e=>{if(Array.isArray(e)&&e.length>=2)return[e[0],String(e[1]??``)];if(typeof e==`object`&&e){let t=e;if(t.id!==void 0&&t.name!==void 0)return[t.id,t.name]}return String(e??``)},O=e=>{let t={value:D(e),name:d};l&&d&&l.setValue(t),u&&u!==l?.onValue&&u(t)},k=()=>{if(g||!b)return;let e=b.split(`.`);if(e.length<2)return;let t=Array.isArray(T)?T[0]:T;C({module:e[0],modalName:e[1],callback:O,onValue:O,options:x,fieldName:d,value:t})},A={};f&&(A.placeholder=f);let j=r(E(T));return h&&j?o(a,{}):s(t,{type:`input`,label:p,element_blok:{className:[S||``]},error:m,element_input:{className:[e.w],props:{onClick:k}},children:[v?o(`span`,{className:e.affix,children:v}):null,o(`div`,{...A,children:E(T)}),_?o(`span`,{className:e.affix,children:_}):null]})}c.displayName=`ModalField`;export{c as default};

package/dist/fields/Money.js

@@ -1,125 +1 @@
-import e from "../styles/Field.module.js";
-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 o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/lib/fields/Money.tsx
-function l(e) {
-	let t = window.getSelection();
-	if (!t || t.rangeCount === 0) return 0;
-	let n = t.getRangeAt(0);
-	if (!e.contains(n.startContainer)) return 0;
-	let r = document.createRange();
-	return r.selectNodeContents(e), r.setEnd(n.startContainer, n.startOffset), r.toString().length;
-}
-function u(e, t, n) {
-	let r = Math.max(0, Math.min(t, e.length));
-	return n(e.slice(0, r)).length;
-}
-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 = M != null && (typeof M == "number" ? !0 : !a(String(M))), n = !g || t ? f(M ?? "", E) : "";
-		e.textContent !== n && (e.textContent = n);
-	}, [
-		M,
-		j,
-		g,
-		E
-	]);
-	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());
-	}, 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
-		};
-		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);
-		});
-	}, R = (e) => {
-		let t = e.target;
-		r.Blur(e), (t.textContent || "") === "" && (t.textContent = "0");
-		let n = {
-			value: Number(F(t.textContent || "")) * E,
-			name: h
-		};
-		p && h && p.setValue(n), x?.(n), m && m !== p?.onValue && m(n), t.textContent = f(F(t.textContent || "").trim() || "0"), P.current = !1;
-	}, z = (e) => {
-		P.current = !0;
-		let t = e.target;
-		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: h
-		};
-		p && h && p.setValue(n), m && m !== p?.onValue && m(n);
-	}, V = (e) => {
-		e.key === "Enter" && e.preventDefault();
-	}, 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: _,
-		error: v,
-		element_blok: { className: [S] },
-		element_input: { className: [e.w] },
-		children: [
-			w ? /* @__PURE__ */ s("span", {
-				className: e.affix,
-				children: w
-			}) : null,
-			/* @__PURE__ */ s("div", {
-				ref: N,
-				...G,
-				onInput: L,
-				onPaste: H,
-				onBlur: R,
-				onKeyDown: V,
-				onFocus: z,
-				role: "textbox",
-				spellCheck: !1,
-				"aria-label": _ || g || "Сумма",
-				"aria-disabled": !U,
-				tabIndex: b ? -1 : 0,
-				contentEditable: U ? "plaintext-only" : !1,
-				suppressContentEditableWarning: !0
-			}),
-			k && /* @__PURE__ */ s("button", {
-				type: "button",
-				onClick: B,
-				"aria-label": "Очистить поле",
-				children: "x"
-			}),
-			C ? /* @__PURE__ */ s("span", {
-				className: e.affix,
-				children: C
-			}) : null
-		]
-	});
-}
-d.displayName = "MoneyField";
-function f(e, t) {
-	let n;
-	if (typeof e == "string") {
-		let t = e.replace(/\s/g, "").replace(",", ".");
-		n = parseFloat(t === "" ? "0" : t);
-	} else n = Number(e ?? 0);
-	return Number.isNaN(n) && (n = 0), t != null && t > 0 && (n /= t), n.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1 ");
-}
-//#endregion
-export { d as default };
+import e from"../styles/Field.module.js";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 o from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l(e){let t=window.getSelection();if(!t||t.rangeCount===0)return 0;let n=t.getRangeAt(0);if(!e.contains(n.startContainer))return 0;let r=document.createRange();return r.selectNodeContents(e),r.setEnd(n.startContainer,n.startOffset),r.toString().length}function u(e,t,n){let r=Math.max(0,Math.min(t,e.length));return n(e.slice(0,r)).length}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=M!=null&&(typeof M==`number`?!0:!a(String(M))),n=!g||t?f(M??``,E):``;e.textContent!==n&&(e.textContent=n)},[M,j,g,E]);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())},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};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)})},R=e=>{let t=e.target;r.Blur(e),(t.textContent||``)===``&&(t.textContent=`0`);let n={value:Number(F(t.textContent||``))*E,name:h};p&&h&&p.setValue(n),x?.(n),m&&m!==p?.onValue&&m(n),t.textContent=f(F(t.textContent||``).trim()||`0`),P.current=!1},z=e=>{P.current=!0;let t=e.target;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:h};p&&h&&p.setValue(n),m&&m!==p?.onValue&&m(n)},V=e=>{e.key===`Enter`&&e.preventDefault()},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=``),c(t,{type:`input`,label:_,error:v,element_blok:{className:[S]},element_input:{className:[e.w]},children:[w?s(`span`,{className:e.affix,children:w}):null,s(`div`,{ref:N,...G,onInput:L,onPaste:H,onBlur:R,onKeyDown:V,onFocus:z,role:`textbox`,spellCheck:!1,"aria-label":_||g||`Сумма`,"aria-disabled":!U,tabIndex:b?-1:0,contentEditable:U?`plaintext-only`:!1,suppressContentEditableWarning:!0}),k&&s(`button`,{type:`button`,onClick:B,"aria-label":`Очистить поле`,children:`x`}),C?s(`span`,{className:e.affix,children:C}):null]})}d.displayName=`MoneyField`;function f(e,t){let n;if(typeof e==`string`){let t=e.replace(/\s/g,``).replace(`,`,`.`);n=parseFloat(t===``?`0`:t)}else n=Number(e??0);return Number.isNaN(n)&&(n=0),t!=null&&t>0&&(n/=t),n.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g,`$1 `)}export{d as default};

package/dist/fields/NativeTextField.d.ts

@@ -0,0 +1,15 @@
+import { TInput } from './type';
+export type TNativeTextField = TInput & {
+    /** data-field / визуальный тип обёртки */
+    fieldType: string;
+    /** type у input */
+    inputType: "email" | "url" | "text" | "search" | "tel";
+    /** fallback для aria-label, если нет label/placeholder */
+    defaultAriaLabel: string;
+};
+/**
+ * Общее нативное текстовое поле (Email / Url и т.п.).
+ * Подпись и ошибка связываются через Field a11y (htmlFor / aria-describedby).
+ */
+declare function NativeTextField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, maxLength, autoComplete, inputmode, id, size, fieldType, inputType, defaultAriaLabel, }: TNativeTextField): import("react/jsx-runtime").JSX.Element | null;
+export default NativeTextField;

package/dist/fields/NativeTextField.js

@@ -0,0 +1 @@
+import e from"../styles/Field.module.js";import t,{useFieldA11y as n}from"../core/Field.js";import{useFormFieldState as r}from"../hooks/use.js";import{isEmptyTextLike as i}from"./visibility.js";import{createFieldEmit as a}from"./emit.js";import o from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l({value:n=``,form:l,onValue:d,onBlur:f,name:p=``,placeholder:m=``,label:h=``,error:g=``,hidden:_=!1,disabled:v=!1,className:y=``,after:b=``,before:x=``,maxLength:S,autoComplete:C,inputmode:w,id:T,size:E=`md`,fieldType:D,inputType:O,defaultAriaLabel:k}){let{value:A,version:j}=r(l,p,n),M=!v,N=typeof A==`string`||typeof A==`number`?String(A):``,P=o.useRef(null),F=a(l,p,d);return o.useEffect(()=>{let e=P.current;!e||e.value===N||(e.value=N)},[N,j]),_&&i(A)?null:c(t,{type:D,label:h,error:g,id:T,size:E,element_blok:{className:[y||``]},element_input:{className:[e.w],props:{"data-disabled":v||!M?`true`:void 0}},children:[x?s(`span`,{className:e.affix,children:x}):null,s(u,{inputRef:P,name:p,display:N,placeholder:m,maxLength:S,disabled:v,editable:M,autoComplete:C,inputMode:w,inputType:O,label:h,defaultAriaLabel:k,emit:F,onBlurField:f}),b?s(`span`,{className:e.affix,children:b}):null]})}function u({inputRef:t,name:r,display:i,placeholder:a,maxLength:o,disabled:c,editable:l,autoComplete:u,inputMode:d,inputType:f,label:p,defaultAriaLabel:m,emit:h,onBlurField:g}){let _=n();return s(`div`,{className:e.nativeWrap,children:s(`input`,{id:_?.controlId,ref:t,className:e.nativeInput,type:f,name:r||void 0,defaultValue:i,placeholder:a,maxLength:o,disabled:c,readOnly:!l,autoComplete:u,inputMode:d,spellCheck:!1,"aria-label":p?void 0:a||m,"aria-describedby":_?.describedBy,"aria-invalid":_?.errorId?!0:void 0,onChange:e=>h(e.target.value),onBlur:e=>{let t=(e.target.value||``).trim();h(t,!0),g?.({value:t,name:r})},onKeyDown:e=>{e.key===`Enter`&&e.preventDefault()}})})}export{l as default};

package/dist/fields/Numeric.d.ts

@@ -1,8 +1,19 @@
 import { TInput } from './type';
+/**
+ * NumberField — целые цифры как **строка** в форме (`"123"`).
+ *
+ * **Не путать с PercentField:**
+ * - сюда в форму пишется **строка цифр**, не `number`;
+ * - проп **`max`** (и `maxLength`) — лимит **символов**, не верхняя граница числа;
+ * - дробных нет (только `\d`).
+ *
+ * Для процентов / clamp 0–100 / `number` используйте **`PercentField`**.
+ */
 type TNumeric = TInput & {
+    /** Макс. число символов (если нет `maxLength`). Не числовой максимум значения. */
     max?: number;
 };
-declare function NumberField({ value, form, onValue, name, placeholder, label, hidden, disabled, onBlur: onBlurField, className, after, before, error, size, inputmode, maxLength, max, view, }: TNumeric): import("react/jsx-runtime").JSX.Element;
+declare function NumberField({ value, form, onValue, name, placeholder, label, hidden, disabled, onBlur: onBlurField, className, after, before, error, size, inputmode, maxLength, max, view, }: TNumeric): import("react/jsx-runtime").JSX.Element | null;
 declare namespace NumberField {
     var displayName: string;
 }

package/dist/fields/Numeric.js

@@ -1,105 +1 @@
-import e from "../styles/Field.module.js";
-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 o from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-//#region src/lib/fields/Numeric.tsx
-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 = "", size: C = "md", inputmode: w = "numeric", maxLength: T, max: E, view: D }) {
-	let O = !_, { value: k, version: A } = n(d, p, u);
-	m = m === void 0 ? "" : m, E = E === void 0 ? 99 : E;
-	let j = k != null && k !== "" ? String(k) : "", M = o.useRef(null), N = o.useRef(!1);
-	o.useLayoutEffect(() => {
-		if (N.current) return;
-		let e = M.current;
-		e && e.textContent !== j && (e.textContent = j);
-	}, [j, A]);
-	let P = T ?? E, F = !1, I = (e, t) => {
-		e.textContent !== t && (e.textContent = t, queueMicrotask(() => {
-			let n = e.firstChild;
-			if (n && n.nodeType === Node.TEXT_NODE) {
-				let e = t.length, r = window.getSelection(), i = document.createRange();
-				i.setStart(n, e), i.collapse(!0), r?.removeAllRanges(), r?.addRange(i);
-			} else t || (e.innerHTML = "<br>");
-		}));
-	}, L = (e) => {
-		let t = e.currentTarget, n = (t.textContent || "").replace(/\D/g, "");
-		P > 0 && n.length > P && (n = n.slice(0, P)), I(t, n);
-		let r = {
-			value: n,
-			name: p
-		};
-		d && p && d.onValue(r), f && f !== d?.onValue && f(r);
-	}, R = (e) => {
-		N.current = !0;
-		let t = e.currentTarget;
-		t.textContent = (t.textContent || "").replace(/\D/g, ""), r.Focus({ target: e.currentTarget });
-	}, z = (e) => {
-		if (F && e.which === 86) return;
-		if (e.which === 17 || e.which === 91) return F = !0;
-		if (e.key === "Backspace") return;
-		let t = (e.currentTarget.textContent ?? "").replace(/\D/g, "").length;
-		P > 0 && t >= P && e.key.length === 1 && /\d/.test(e.key) && e.preventDefault(), e.key === "Enter" && e.preventDefault(), e.key.length === 1 && !/\d/.test(e.key) && !e.metaKey && !e.ctrlKey && e.preventDefault();
-	}, B = (e) => {
-		if (e.which === 17 || e.which === 91) return F = !1;
-	}, V = (e) => {
-		r.PasteDigits(P, i(e)), queueMicrotask(() => {
-			let e = M.current;
-			if (!e) return;
-			let t = (e.textContent || "").replace(/\D/g, "");
-			P > 0 && t.length > P && (t = t.slice(0, P)), I(e, t), d && p && d.onValue({
-				value: t,
-				name: p
-			});
-		});
-	}, H = (e) => {
-		e.preventDefault();
-	}, U = (e) => {
-		r.Blur(e);
-		let t = (e.currentTarget.textContent || "").replace(/\D/g, "");
-		e.currentTarget.textContent !== t && (e.currentTarget.textContent = t), v?.({
-			value: t,
-			name: p
-		}), N.current = !1;
-	}, W = {};
-	return O && (W.edit = ""), W.inputMode = w ?? "numeric", m && (W.placeholder = m), g && a(k) ? /* @__PURE__ */ c(s, {}) : /* @__PURE__ */ l(t, {
-		type: "numeric",
-		label: h,
-		error: S,
-		size: C,
-		element_blok: { className: [y || ""] },
-		element_input: { className: [e.w] },
-		children: [
-			x ? /* @__PURE__ */ c("span", {
-				className: e.affix,
-				children: x
-			}) : null,
-			/* @__PURE__ */ c("div", {
-				ref: M,
-				onPaste: V,
-				onDrop: H,
-				onDragOver: (e) => e.preventDefault(),
-				onInput: L,
-				onFocus: R,
-				onBlur: U,
-				onKeyDown: z,
-				onKeyUp: B,
-				spellCheck: !1,
-				role: "textbox",
-				tabIndex: O ? 0 : -1,
-				"aria-label": h || m || "Число",
-				contentEditable: O ? "plaintext-only" : !1,
-				suppressContentEditableWarning: !0,
-				...W
-			}),
-			b ? /* @__PURE__ */ c("span", {
-				className: e.affix,
-				children: b
-			}) : null
-		]
-	});
-}
-u.displayName = "NumberField";
-//#endregion
-export { u as default };
+import e from"../styles/Field.module.js";import t,{useFieldA11y as n}from"../core/Field.js";import{useFormFieldState as r}from"../hooks/use.js";import i,{asEditableClipboard as a}from"../events/onEvent.js";import{isEmptyTextLike as o}from"./visibility.js";import s from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u({value:n,form:u,onValue:f,name:p=``,placeholder:m=``,label:h=``,hidden:g=!1,disabled:_=!1,onBlur:v,className:y=``,after:b=``,before:x=``,error:S=``,size:C=`md`,inputmode:w=`numeric`,maxLength:T,max:E,view:D}){let O=!_,{value:k,version:A}=r(u,p,n);m=m===void 0?``:m,E=E===void 0?99:E;let j=k!=null&&k!==``?String(k):``,M=s.useRef(null),N=s.useRef(!1);s.useLayoutEffect(()=>{if(N.current)return;let e=M.current;e&&e.textContent!==j&&(e.textContent=j)},[j,A]);let P=T??E,F=(e,t)=>{e.textContent!==t&&(e.textContent=t,queueMicrotask(()=>{let n=e.firstChild;if(n&&n.nodeType===Node.TEXT_NODE){let e=t.length,r=window.getSelection(),i=document.createRange();i.setStart(n,e),i.collapse(!0),r?.removeAllRanges(),r?.addRange(i)}else t||(e.innerHTML=`<br>`)}))},I=e=>{let t=e.currentTarget,n=(t.textContent||``).replace(/\D/g,``);P>0&&n.length>P&&(n=n.slice(0,P)),F(t,n);let r={value:n,name:p};u&&p&&u.onValue(r),f&&f!==u?.onValue&&f(r)},L=e=>{N.current=!0;let t=e.currentTarget;t.textContent=(t.textContent||``).replace(/\D/g,``),i.Focus({target:e.currentTarget})},R=e=>{if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()===`v`||e.key===`Backspace`)return;let t=(e.currentTarget.textContent??``).replace(/\D/g,``).length;P>0&&t>=P&&e.key.length===1&&/\d/.test(e.key)&&e.preventDefault(),e.key===`Enter`&&e.preventDefault(),e.key.length===1&&!/\d/.test(e.key)&&!e.metaKey&&!e.ctrlKey&&e.preventDefault()},z=e=>{i.PasteDigits(P,a(e)),queueMicrotask(()=>{let e=M.current;if(!e)return;let t=(e.textContent||``).replace(/\D/g,``);P>0&&t.length>P&&(t=t.slice(0,P)),F(e,t),u&&p&&u.onValue({value:t,name:p})})},B=e=>{e.preventDefault()},V=e=>{i.Blur(e);let t=(e.currentTarget.textContent||``).replace(/\D/g,``);e.currentTarget.textContent!==t&&(e.currentTarget.textContent=t),v?.({value:t,name:p}),N.current=!1},H={};return O&&(H.edit=``),H.inputMode=w??`numeric`,m&&(H.placeholder=m),g&&o(k)?null:l(t,{type:`numeric`,label:h,error:S,size:C,element_blok:{className:[y||``]},element_input:{className:[e.w]},children:[x?c(`span`,{className:e.affix,children:x}):null,c(d,{divRef:M,editable:O,label:h,placeholder:m,dd:H,onPaste:z,onDrop:B,onInput:I,onFocus:L,onBlur:V,onKeyDown:R}),b?c(`span`,{className:e.affix,children:b}):null]})}function d({divRef:e,editable:t,label:r,placeholder:i,dd:a,onPaste:o,onDrop:s,onInput:l,onFocus:u,onBlur:d,onKeyDown:f}){let p=n();return c(`div`,{ref:e,id:p?.controlId,onPaste:o,onDrop:s,onDragOver:e=>e.preventDefault(),onInput:l,onFocus:u,onBlur:d,onKeyDown:f,spellCheck:!1,role:`textbox`,"aria-multiline":`false`,tabIndex:t?0:-1,"aria-label":r?void 0:i||`Число`,"aria-describedby":p?.describedBy,"aria-invalid":p?.errorId?!0:void 0,contentEditable:t?`plaintext-only`:!1,suppressContentEditableWarning:!0,...a})}u.displayName=`NumberField`;export{u as default};

package/dist/fields/Options.js

@@ -1,69 +1 @@
-import e from "../styles/Field.module.js";
-import t from "../core/Field.js";
-import { useFormFieldState as n } from "../hooks/use.js";
-import { useFormInit as r } from "../FormInitContext.js";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/lib/fields/Options.tsx
-var s = (e, t = ",") => (e !== void 0 && e !== "" ? e.split(t) : []).filter((e) => e !== "").reduce((e, t) => (e[t] = !0, e), {});
-function c({ value: c, form: l, onValue: u, name: d, placeholder: f = "", separator: p = ",", label: m, error: h, hidden: g = !1, disabled: _ = !1, outFormat: v = "object", after: y, before: b, modal: x, options: S, className: C }) {
-	let { onModal: w } = r(), { value: T } = n(l, d, c), E = T, D = typeof E == "string" ? s(E, p) : E && typeof E == "object" ? E : {}, O = () => {
-		if (_) return;
-		if (!x) return console.error("modal - empty");
-		let e = x.split(".");
-		w({
-			module: e[0],
-			modalName: e[1],
-			callback: (e) => {
-				let t = e;
-				if (u) switch (v === "array" || v === "string" && Object.keys(t).filter((e) => t[e]).join(p), v) {
-					case "array":
-						u !== l?.onValue && u({
-							value: Object.keys(t),
-							name: d
-						});
-						break;
-					case "string":
-						u !== l?.onValue && u({
-							value: Object.keys(t).filter((e) => t[e]).join(p),
-							name: d
-						});
-						break;
-					default: u !== l?.onValue && u({
-						value: t,
-						name: d
-					});
-				}
-			},
-			onValue: u,
-			options: S,
-			fieldName: d,
-			value: D
-		});
-	}, k = {};
-	f && (k.placeholder = f);
-	let A = Object.keys(D).length === 0;
-	return g && A ? /* @__PURE__ */ a(i, {}) : /* @__PURE__ */ o(t, {
-		type: "group",
-		label: m,
-		error: h,
-		element_blok: { className: [C || ""] },
-		element_input: {
-			className: [e.g],
-			props: { onClick: O }
-		},
-		children: [
-			b ? /* @__PURE__ */ a("span", {
-				className: e.affix,
-				children: b
-			}) : null,
-			Object.keys(D).map((e) => /* @__PURE__ */ a("div", { children: S?.[e]?.label }, e)),
-			y ? /* @__PURE__ */ a("span", {
-				className: e.affix,
-				children: y
-			}) : null
-		]
-	});
-}
-c.displayName = "OptionsField";
-//#endregion
-export { c as default };
+import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{useFormInit as r}from"../FormInitContext.js";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";var s=(e,t=`,`)=>(e!==void 0&&e!==``?e.split(t):[]).filter(e=>e!==``).reduce((e,t)=>(e[t]=!0,e),{});function c({value:c,form:l,onValue:u,name:d,placeholder:f=``,separator:p=`,`,label:m,error:h,hidden:g=!1,disabled:_=!1,outFormat:v=`object`,after:y,before:b,modal:x,options:S,className:C}){let{onModal:w}=r(),{value:T}=n(l,d,c),E=T,D=typeof E==`string`?s(E,p):E&&typeof E==`object`?E:{},O=()=>{if(_||!x)return;let e=x.split(`.`);w({module:e[0],modalName:e[1],callback:e=>{let t=e;if(u)switch(v===`array`||v===`string`&&Object.keys(t).filter(e=>t[e]).join(p),v){case`array`:u!==l?.onValue&&u({value:Object.keys(t),name:d});break;case`string`:u!==l?.onValue&&u({value:Object.keys(t).filter(e=>t[e]).join(p),name:d});break;default:u!==l?.onValue&&u({value:t,name:d})}},onValue:u,options:S,fieldName:d,value:D})},k={};f&&(k.placeholder=f);let A=Object.keys(D).length===0;return g&&A?a(i,{}):o(t,{type:`group`,label:m,error:h,element_blok:{className:[C||``]},element_input:{className:[e.g],props:{onClick:O}},children:[b?a(`span`,{className:e.affix,children:b}):null,Object.keys(D).map(e=>a(`div`,{children:S?.[e]?.label},e)),y?a(`span`,{className:e.affix,children:y}):null]})}c.displayName=`OptionsField`;export{c as default};

package/dist/fields/Password.d.ts

@@ -1,5 +1,5 @@
 import { TPasswordField } from './type';
-declare function PasswordField({ value, form, onValue, name, placeholder, label, error, hidden, disabled, onBlur: onBlurField, className, after, before, native, maxLength, eyes, }: TPasswordField): import("react/jsx-runtime").JSX.Element | "";
+declare function PasswordField({ value, form, onValue, name, placeholder, label, error, hidden, disabled, onBlur: onBlurField, className, after, before, native, maxLength, eyes, id, size, }: TPasswordField): import("react/jsx-runtime").JSX.Element | "";
 declare namespace PasswordField {
     var displayName: string;
 }