@elcrm/form 0.0.64 → 0.0.66

package/README.md

@@ -1,6 +1,6 @@
 # @elcrm/form
 
-React-компоненты полей ввода для elCRM: текст, пароль, маски, деньги, даты, селекты и связка с **`useForm`** (гранулярные подписки по имени поля).
+React-компоненты полей ввода для elCRM: текст, пароль, маски, деньги, даты, время, селект, диапазон и связка с хуком **`useForm`** (подписки по имени поля, без лишних перерисовок всей формы).
 
 ## Установка
 
@@ -8,9 +8,14 @@ React-компоненты полей ввода для elCRM: текст, па
 npm install @elcrm/form
 ```
 
-Требуются **peer-зависимости** (см. `package.json`): **`react`** и **`react-dom`**.
+**Peer-зависимости:** **`react`** и **`react-dom`** (версии — в `package.json`).
 
-**`Form.Init` не обязателен** — поля работают без него. Компонент нужен **только** если вы задаёте свои **`onModal`** и/или **`onNotice`** (см. ниже). Рендерит `null`, дерево приложения не оборачивает.
+## Стили и темы
+
+- **Базовые стили полей** (Field / Form / Select) подключаются **сами** при импорте из **корня** пакета: `import { … } from "@elcrm/form"` — отдельный **`import "@elcrm/form/style.css"`** не обязателен.
+- Если используете **только подпути** (`@elcrm/form/fields/Date` и т.д.) без входа с корня — один раз подключите **`@elcrm/form/style.css`** в приложении.
+- **Темы** (светлая / тёмная): **`@elcrm/form/light.css`**, **`@elcrm/form/dark.css`** — атрибут **`data-theme`** на контейнере (подключаются вручную).
+- Склеенный CSS модулей: **`@elcrm/form/style.css`** (дубликат того, что тянет корневой импорт).
 
 ## Быстрый старт
 
@@ -22,31 +27,33 @@ function Example() {
     const form = useForm({ login: "", password: "" });
 
     return (
-        <>
+        <form autoComplete="on" onSubmit={(e) => e.preventDefault()}>
+            {/*
+              Логин: native + autoComplete — нативный <input> для автозаполнения браузером.
+              Без native StringField рендерит contentEditable — автозаполнение логина как у обычной формы не гарантируется.
+            */}
             <StringField
                 name="login"
                 form={form}
                 value=""
-                title="Логин"
-                edit
-                active
+                label="Логин"
+                native
+                autoComplete="username"
             />
             <PasswordField
                 name="password"
                 form={form}
                 value=""
-                title="Пароль"
-                edit
-                active
+                label="Пароль"
             />
-        </>
+        </form>
     );
 }
 ```
 
 ### `Form.Init` (опционально)
 
-Подключайте, когда нужны **уведомления** (например после копирования телефона в буфер) или **свои модалки** для полей **ModalField**, **OptionsField** (`modal="module.name"`):
+Нужен, если используются **уведомления** (например, копирование телефона в буфер) или **свои модалки** для **ModalField** / **OptionsField** (`modal="module.name"`). Рендерит **`null`**, дочерние элементы не оборачивает.
 
 ```tsx
 import { Form, useForm, PhoneField } from "@elcrm/form";
@@ -71,43 +78,64 @@ function Example() {
                     /* открыть модалку и передать результат в callback(...) */
                 }}
             />
-            <PhoneField name="phone" form={form} title="Телефон" edit active />
+            <PhoneField name="phone" form={form} label="Телефон" />
         </>
     );
 }
 ```
 
-Без **`Form.Init`** вызовы **`onNotice` / `onModal`** из полей просто ничего не делают (пустые заглушки).
+Без **`Form.Init`** колбэки **`onNotice`** и **`onModal`** из полей — заглушки (no-op).
+
+## Хук `useForm`
+
+- **`useForm(initialValues?)`** — хранение значений, **`onValue`** / **`setValue`** / **`setValues`**, подписки по имени поля.
+- Поля с **`name`** и **`form`** читают значение через **`useFormFieldState`** и обновляют форму согласно своей логике.
+
+Подробнее о API — в исходниках **`hooks/use.ts`** и **`CHANGELOG.md`**.
 
-Темы: подключите `@elcrm/form/light.css` и `@elcrm/form/dark.css`, переключайте `data-theme` на контейнере.
+## Общие пропы (`TInput`)
 
-Стили полей (классы из SCSS-модулей): `import "@elcrm/form/style.css"` (альтернатива — `@elcrm/form/dist/style.css`).
+База: **`TFieldFormBindings`** (связь с формой) + **`TFieldPresentation`** (оформление).
+
+| Проп                                                                   | Описание                                                                                                                                                           |
+| ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **`name`**, **`form`**, **`value`**, **`onValue`**, **`onBlur`**       | Связь с формой; **`onBlur`** — «коммит» после ухода фокуса, аргумент **`{ value, name }`**, не нативный `FocusEvent`.                                              |
+| **`label`**, **`placeholder`**, **`error`**, **`className`**, **`id`** | Подпись, плейсхолдер, текст ошибки, класс блока, id.                                                                                                               |
+| **`disabled`**                                                         | Только просмотр / без ввода.                                                                                                                                       |
+| **`hidden`**                                                           | При **`true`** поле **не рендерится, только если значение пустое**; при непустом — **показывается**.                                                               |
+| **`before`**, **`after`**                                              | Узлы до/после области ввода (например иконки).                                                                                                                     |
+| **`native`**                                                           | Только **`StringField`**: нативный **`<input>`** вместо **contentEditable** — для **автозаполнения** логина/почты; сочетать с **`autoComplete`**, **`inputType`**. |
+| **`autoComplete`**, **`inputType`**                                    | Атрибуты нативного поля при **`native`** (например **`username`**, **`email`**).                                                                                   |
+| **`inputmode`**, **`spellCheck`**, **`maxLength`**                     | Подсказки ввода (в т.ч. мобильная клавиатура), орфография, лимит длины — по смыслу каждого компонента.                                                             |
+
+У **`PasswordField`** свой тип **`TPasswordField`**: проп **`native`** там означает **«не рендерить компонент»** (внешний нативный пароль), не путать с **`native`** у **`StringField`**.
+
+### `PasswordField`
+
+- Нативный **`<input type="password"`** / **`text`** при показе пароля.
+- Переключатель «показать / скрыть» с **встроенными SVG-иконками**; свои иконки — проп **`eyes={[показать, скрыть]}`**.
 
 ### Минимальный бандл (tree-shaking)
 
-Пакет собран как **ESM по модулям** — бандлер приложения может отбросить неиспользуемые поля. Импорт из корня:
+Пакет собран как **ESM по модулям**. Импорт из корня:
 
 ```ts
 import { DateField, useForm } from "@elcrm/form";
 ```
 
-Чтобы подключать только нужные части, используйте **подпути** (имя совпадает с компонентом, например `Date` → поле даты):
+Подключение только нужных файлов — **подпути** (имя файла совпадает с компонентом):
 
 ```ts
 import DateField from "@elcrm/form/fields/Date";
 import { useForm } from "@elcrm/form/hooks/use";
 ```
 
-Доступные префиксы: `fields/*`, `hooks/*`, `events/*`, `core/*`, `mask/*` — см. поле **`exports`** в `package.json` пакета.
-
-Объектные пропы (например `options` у селекта) не создавайте заново на каждый рендер — вынесите в константу модуля или держите одну ссылку.
-
-Типы **`TModalOpenPayload`**, **`FormInitProps`** экспортируются из пакета. Хук **`useFormInit()`** внутри полей; без **`Form.Init`** возвращаются заглушки — можно вызывать и в своих компонентах.
+Префиксы: **`fields/*`**, **`hooks/*`**, **`events/*`**, **`core/*`**, **`mask/*`** — см. **`exports`** в **`package.json`**.
 
-## История изменений
+Объектные пропы (**`options`** у селекта и т.д.) не пересоздавайте на каждый рендер — вынесите в константы модуля.
 
-Список версий и правок — в **`CHANGELOG.md`** в репозитории пакета.
+## Экспорт компонентов (корень пакета)
 
-## Лицензия
+`StringField`, `PasswordField`, `TextareaField`, `NumberField`, `MoneyField`, `MaskField`, `PhoneField`, `DateField`, `TimeField`, `SelectField`, `RangeField`, `ModalField`, `OptionsField`, **`Form`**, хуки **`useForm`**, **`useFormField`**, **`useFormFieldState`**, **`useFormInit`**.
 
-MIT — см. `package.json`.
+Типы: **`TInput`**, **`TPasswordField`**, **`TValue`**, **`TFieldFormBindings`**, **`TFieldPresentation`**, **`UseFormApi`**, **`FormInitProps`**, **`TModalOpenPayload`** и др.

package/dist/core/Field.d.ts

@@ -7,12 +7,13 @@ interface Input {
         className?: string[];
         props?: Record<string, unknown>;
     };
-    title?: string;
+    /** Текст подписи поля (колонка `<dt>`) */
+    label?: string;
     before?: ReactNode;
     type?: string;
     after?: ReactNode;
     children?: ReactNode;
     error?: string;
 }
-declare const Field: ({ element_blok, element_input, type, title, error, before, after, children, }: Input) => import("react/jsx-runtime").JSX.Element;
+declare const Field: ({ element_blok, element_input, type, label, error, before, after, children, }: Input) => import("react/jsx-runtime").JSX.Element;
 export default Field;

package/dist/core/Field.js

@@ -4,7 +4,7 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 var r = ({ element_blok: r = { className: [] }, element_input: i = {
 	className: [],
 	props: {}
-}, type: a = "input", title: o, error: s, before: c, after: l, children: u }) => /* @__PURE__ */ n("dl", {
+}, type: a = "input", label: o, error: s, before: c, after: l, children: u }) => /* @__PURE__ */ n("dl", {
 	"data-field": a,
 	className: [e.l, ...r.className || []].filter((e) => e !== void 0).join(" "),
 	children: [

package/dist/fields/Date.d.ts

@@ -5,17 +5,8 @@ type TDate = TInput & {
     min?: Date;
     icon?: () => React.JSX.Element;
 };
-/**
- * DateField component
- *
- * @param {string} [title] - заголовок
- * @param {string} [error] - ошибка
- * @param {boolean} [edit] - редактировать
- * @param {boolean} [active] - активность
- * @param {string} [className] - css class
- * @param {string} [placeholder] - placeholder
- */
-declare function DateField({ title, label, error, edit, active, className, placeholder, max, min, onValue, form, icon, name, value, after, disabled, }: TDate): import("react/jsx-runtime").JSX.Element;
+/** DateField — дата с выпадающим календарём. */
+declare function DateField({ label, error, hidden, className, placeholder, disabled, onValue, max, min, form, icon, name, value, after, before, }: TDate): import("react/jsx-runtime").JSX.Element;
 declare namespace DateField {
     var displayName: string;
 }

package/dist/fields/Date.js

@@ -1,19 +1,20 @@
 import e from "../styles/Field.module.js";
-import t from "../core/Field.js";
-import { useFormFieldState as n } from "../hooks/use.js";
-import r from "../styles/Form.module.js";
-import i from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { createPortal as c } from "react-dom";
+import t from "../styles/Form.module.js";
+import n from "../core/Field.js";
+import { useFormFieldState as r } from "../hooks/use.js";
+import { isEmptyTextLike as i } from "./visibility.js";
+import a from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { createPortal as l } from "react-dom";
 //#region src/lib/fields/Date.tsx
-function l(e, t, n, r) {
+function u(e, t, n, r) {
 	let i = new Date(e, t - 1, 1);
 	return !(n && new Date(e, t, 0) < n || r && i > r);
 }
-function u(e, t, n) {
+function d(e, t, n) {
 	return !(t && e < t.getFullYear() || n && e > n.getFullYear());
 }
-function d(e, t, n) {
+function f(e, t, n) {
 	let r = e;
 	if (t) {
 		let e = t.getFullYear();
@@ -25,70 +26,76 @@ function d(e, t, n) {
 	}
 	return r;
 }
-function f({ title: r, label: l = "", error: u, edit: d = !0, active: f = !0, className: m, placeholder: h, max: _, min: v, onValue: y, form: b, icon: x, name: S = "", value: C, after: w, disabled: T = !1 }) {
-	let E = i.useCallback((e) => e == null ? /* @__PURE__ */ new Date() : e instanceof Date || typeof e == "string" || typeof e == "number" ? e : /* @__PURE__ */ new Date(), []), { value: D, version: O } = n(b, S, C), [k, A] = i.useState(E(D)), j = i.useRef({
+function p({ label: t = "", error: u, hidden: d = !1, className: f, placeholder: p, disabled: h = !1, onValue: g, max: v, min: y, form: b, icon: x, name: S = "", value: C, after: w = "", before: T = "" }) {
+	let E = a.useCallback((e) => e == null ? /* @__PURE__ */ new Date() : e instanceof Date || typeof e == "string" || typeof e == "number" ? e : /* @__PURE__ */ new Date(), []), { value: D, version: O } = r(b, S, C), [k, A] = a.useState(E(D)), j = a.useRef({
 		x: 0,
 		y: 0,
 		b: 0
-	}), [M, N] = i.useState(!1), P = !d && f;
-	i.useEffect(() => {
+	}), [M, N] = a.useState(!1);
+	a.useEffect(() => {
 		A(E(D));
 	}, [
 		D,
 		O,
 		E
 	]);
-	let F = (e) => {
+	let P = (e) => {
 		let t = {
 			value: e,
 			name: S
 		};
-		b && S ? b.setValue(t) : A(e), y && y !== b?.onValue && y(t);
-	}, I = (e) => {
-		if (T || !(d && f)) return;
+		b && S ? b.setValue(t) : A(e), g && g !== b?.onValue && g(t);
+	}, F = (e) => {
+		if (h) return;
 		let t = e.currentTarget.getBoundingClientRect();
 		j.current = {
 			x: t.left,
 			b: t.bottom,
 			y: t.top
 		}, N(!0);
-	}, L = {};
-	return h && (L.placeholder = h), P ? /* @__PURE__ */ o(a, {}) : /* @__PURE__ */ s(a, { children: [x ? x() : /* @__PURE__ */ s(t, {
+	}, I = {};
+	p && (I.placeholder = p);
+	let L = D == null || D === "" || typeof D == "string" && i(D);
+	return d && L ? /* @__PURE__ */ s(o, {}) : /* @__PURE__ */ c(o, { children: [x ? x() : /* @__PURE__ */ c(n, {
 		type: "date",
-		title: r || l,
+		label: t,
 		error: u,
-		element_blok: { className: [m || ""] },
+		element_blok: { className: [f || ""] },
 		element_input: {
 			className: [e.w],
-			props: { "data-disabled": T || !(d && f) ? "true" : void 0 }
+			props: { "data-disabled": h ? "true" : void 0 }
 		},
-		children: [/* @__PURE__ */ o("div", {
-			onClick: I,
-			onKeyDown: (e) => {
-				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), I(e));
-			},
-			tabIndex: T || !(d && f) ? -1 : 0,
-			role: "button",
-			"aria-haspopup": "dialog",
-			"aria-expanded": M,
-			"aria-label": r || l || h || "Дата",
-			"data-edit": d && f ? "true" : void 0,
-			...L,
-			style: { cursor: T || !(d && f) ? "not-allowed" : "pointer" },
-			children: g(k, "dd.mm.yyyy")
-		}, O), w]
-	}), M && c(/* @__PURE__ */ o(p, {
+		children: [
+			T,
+			/* @__PURE__ */ s("div", {
+				onClick: F,
+				onKeyDown: (e) => {
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), F(e));
+				},
+				tabIndex: h ? -1 : 0,
+				role: "button",
+				"aria-haspopup": "dialog",
+				"aria-expanded": M,
+				"aria-label": t || p || "Дата",
+				"data-edit": h ? void 0 : "true",
+				...I,
+				style: { cursor: h ? "not-allowed" : "pointer" },
+				children: _(k, "dd.mm.yyyy")
+			}, O),
+			w
+		]
+	}), M && l(/* @__PURE__ */ s(m, {
 		position: j.current,
-		onValue: F,
+		onValue: P,
 		date: k,
-		max: _,
-		min: v,
+		max: v,
+		min: y,
 		onOpen: N,
-		className: m
+		className: f
 	}, (/* @__PURE__ */ new Date()).getTime()), document.body)] });
 }
-f.displayName = "DateField";
-var p = ({ date: e, onValue: t, position: n, max: c, min: f, className: p, onOpen: g }) => {
+p.displayName = "DateField";
+var m = ({ date: e, onValue: n, position: r, max: i, min: l, className: p, onOpen: m }) => {
 	let _ = /* @__PURE__ */ new Date(), v = new Date(e), y = {
 		y: _.getFullYear(),
 		d: _.getDate(),
@@ -97,10 +104,10 @@ var p = ({ date: e, onValue: t, position: n, max: c, min: f, className: p, onOpe
 		y: v.getFullYear(),
 		d: v.getDate(),
 		m: v.getMonth() + 1
-	}, [x, S] = i.useState({
+	}, [x, S] = a.useState({
 		y: b.y,
 		m: b.m
-	}), [C, w] = i.useState("days"), [T, E] = i.useState(() => d(b.y - 5, f, c)), D = (e) => {
+	}), [C, w] = a.useState("days"), [T, E] = a.useState(() => f(b.y - 5, l, i)), D = (e) => {
 		let t = e.getDay();
 		return t === 0 && (t = 7), t - 1;
 	}, O = [
@@ -115,29 +122,29 @@ var p = ({ date: e, onValue: t, position: n, max: c, min: f, className: p, onOpe
 	for (let e = 0; e < D(A); e++) j.push(0);
 	for (; A.getMonth() === k;) j.push(A.getDate()), A.setDate(A.getDate() + 1);
 	let M = () => {
-		g(!1);
+		m(!1);
 	}, N = () => {
 		V(x.m + 1, x.y);
 	}, P = () => {
 		V(x.m - 1, x.y);
 	}, F = () => {
-		C === "days" ? P() : C === "months" ? V(x.m, x.y - 1) : E((e) => d(e - 12, f, c));
+		C === "days" ? P() : C === "months" ? V(x.m, x.y - 1) : E((e) => f(e - 12, l, i));
 	}, I = () => {
-		C === "days" ? N() : C === "months" ? V(x.m, x.y + 1) : E((e) => d(e + 12, f, c));
+		C === "days" ? N() : C === "months" ? V(x.m, x.y + 1) : E((e) => f(e + 12, l, i));
 	}, L = (e) => {
-		e.stopPropagation(), E(d(x.y - 5, f, c)), w("years");
+		e.stopPropagation(), E(f(x.y - 5, l, i)), w("years");
 	}, R = (e) => {
-		l(x.y, e, f, c) && (S({
+		u(x.y, e, l, i) && (S({
 			y: x.y,
 			m: e
 		}), w("days"));
 	}, z = (e) => {
-		u(e, f, c) && (S({
+		d(e, l, i) && (S({
 			y: e,
 			m: x.m
 		}), w("days"));
 	}, B = (e) => {
-		t(x.y + "-" + h(2, x.m) + "-" + h(2, e)), M();
+		n(x.y + "-" + g(2, x.m) + "-" + g(2, e)), M();
 	}, V = (e, t) => {
 		t = e > 12 ? t + 1 : e < 1 ? t - 1 : t, e = e > 12 ? 1 : e < 1 ? 12 : e, S({
 			y: t,
@@ -145,105 +152,105 @@ var p = ({ date: e, onValue: t, position: n, max: c, min: f, className: p, onOpe
 		});
 	}, H = (e) => y.y === x.y && y.m === x.m && y.d === e ? { "data-active": "true" } : {}, U = (e) => b.y === x.y && b.m === x.m && b.d === e ? { "data-current": "true" } : {}, W = (e) => {
 		let t = !0;
-		return c && c.getTime() < new Date(x.y, x.m - 1, e).getTime() && (t = !1), f && f.getTime() > new Date(x.y, x.m - 1, e).getTime() && (t = !1), t;
-	}, G = window.innerHeight - n.b < 360 ? Math.max(8, n.y - 360) : n.b, K = window.innerWidth - n.x < 270 ? n.x - 246 : n.x;
-	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
-		className: r.o,
+		return i && i.getTime() < new Date(x.y, x.m - 1, e).getTime() && (t = !1), l && l.getTime() > new Date(x.y, x.m - 1, e).getTime() && (t = !1), t;
+	}, G = window.innerHeight - r.b < 360 ? Math.max(8, r.y - 360) : r.b, K = window.innerWidth - r.x < 270 ? r.x - 246 : r.x;
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+		className: t.o,
 		onClick: () => M()
-	}), /* @__PURE__ */ s("div", {
-		className: [r.c, p && p + "-backdrop"].join(" "),
+	}), /* @__PURE__ */ c("div", {
+		className: [t.c, p && p + "-backdrop"].join(" "),
 		style: {
 			top: G + "px",
 			left: K + "px"
 		},
 		onClick: (e) => e.stopPropagation(),
 		children: [
-			/* @__PURE__ */ s("s", { children: [
-				/* @__PURE__ */ o("i", {
+			/* @__PURE__ */ c("s", { children: [
+				/* @__PURE__ */ s("i", {
 					onClick: (e) => {
 						e.stopPropagation(), F();
 					},
-					children: /* @__PURE__ */ o("svg", {
+					children: /* @__PURE__ */ s("svg", {
 						width: "16",
 						height: "16",
 						fill: "currentColor",
 						viewBox: "0 0 24 24",
 						xmlns: "http://www.w3.org/2000/svg",
-						children: /* @__PURE__ */ o("path", { d: "m15.09 4.594-7.646 6.553a1.126 1.126 0 0 0 0 1.708l7.647 6.552c.73.625 1.857.107 1.857-.854V5.447c0-.961-1.127-1.48-1.857-.853Z" })
+						children: /* @__PURE__ */ s("path", { d: "m15.09 4.594-7.646 6.553a1.126 1.126 0 0 0 0 1.708l7.647 6.552c.73.625 1.857.107 1.857-.854V5.447c0-.961-1.127-1.48-1.857-.853Z" })
 					})
 				}),
-				/* @__PURE__ */ s("h2", { children: [/* @__PURE__ */ o("span", {
-					className: r.dateHeaderMonth,
+				/* @__PURE__ */ c("h2", { children: [/* @__PURE__ */ s("span", {
+					className: t.dateHeaderMonth,
 					onClick: (e) => {
 						e.stopPropagation(), w(C === "years" ? "months" : C === "months" ? "days" : "months");
 					},
 					title: C === "years" ? "К списку месяцев" : C === "months" ? "К календарю" : "Выбрать месяц",
-					children: m(x.m).name
-				}), /* @__PURE__ */ o("span", {
-					className: r.dateHeaderYear,
+					children: h(x.m).name
+				}), /* @__PURE__ */ s("span", {
+					className: t.dateHeaderYear,
 					onClick: (e) => {
 						e.stopPropagation(), C === "years" ? w("days") : L(e);
 					},
 					title: C === "years" ? "К календарю" : "Выбрать год",
 					children: x.y
 				})] }),
-				/* @__PURE__ */ o("i", {
+				/* @__PURE__ */ s("i", {
 					onClick: (e) => {
 						e.stopPropagation(), I();
 					},
-					children: /* @__PURE__ */ o("svg", {
+					children: /* @__PURE__ */ s("svg", {
 						width: "16",
 						height: "16",
 						fill: "currentColor",
 						viewBox: "0 0 24 24",
 						xmlns: "http://www.w3.org/2000/svg",
-						children: /* @__PURE__ */ o("path", { d: "m8.91 19.406 7.646-6.552a1.125 1.125 0 0 0 0-1.709L8.91 4.593c-.73-.625-1.857-.107-1.857.854v13.107c0 .96 1.127 1.479 1.857.852Z" })
+						children: /* @__PURE__ */ s("path", { d: "m8.91 19.406 7.646-6.552a1.125 1.125 0 0 0 0-1.709L8.91 4.593c-.73-.625-1.857-.107-1.857.854v13.107c0 .96 1.127 1.479 1.857.852Z" })
 					})
 				})
 			] }),
-			C === "days" && /* @__PURE__ */ s("div", {
+			C === "days" && /* @__PURE__ */ c("div", {
 				"grid-calendar": "",
-				children: [O.map((e, t) => /* @__PURE__ */ o("p", { children: e }, "v" + t)), j.map((e, t) => /* @__PURE__ */ o("span", { children: e !== 0 && W(e) ? /* @__PURE__ */ o("b", {
+				children: [O.map((e, t) => /* @__PURE__ */ s("p", { children: e }, "v" + t)), j.map((e, t) => /* @__PURE__ */ s("span", { children: e !== 0 && W(e) ? /* @__PURE__ */ s("b", {
 					...H(e),
 					...U(e),
 					onClick: () => B(e),
 					children: e
-				}) : /* @__PURE__ */ o("p", {
+				}) : /* @__PURE__ */ s("p", {
 					...H(e),
 					...U(e),
 					children: e === 0 ? "" : e
 				}) }, t))]
 			}),
-			C === "months" && /* @__PURE__ */ o("div", {
+			C === "months" && /* @__PURE__ */ s("div", {
 				"grid-month": "",
-				children: Array.from({ length: 12 }, (e, t) => {
-					let n = t + 1, i = l(x.y, n, f, c), a = y.y === x.y && y.m === n ? { "data-active": "true" } : {}, s = b.y === x.y && b.m === n ? { "data-current": "true" } : {};
-					return /* @__PURE__ */ o("b", {
-						className: i ? "" : r.dateHeaderDisabled,
-						...a,
-						...s,
-						onClick: () => i && R(n),
-						children: m(n).abc
-					}, n);
+				children: Array.from({ length: 12 }, (e, n) => {
+					let r = n + 1, a = u(x.y, r, l, i), o = y.y === x.y && y.m === r ? { "data-active": "true" } : {}, c = b.y === x.y && b.m === r ? { "data-current": "true" } : {};
+					return /* @__PURE__ */ s("b", {
+						className: a ? "" : t.dateHeaderDisabled,
+						...o,
+						...c,
+						onClick: () => a && R(r),
+						children: h(r).abc
+					}, r);
 				})
 			}),
-			C === "years" && /* @__PURE__ */ o("div", {
+			C === "years" && /* @__PURE__ */ s("div", {
 				"grid-month": "",
-				children: Array.from({ length: 12 }, (e, t) => {
-					let n = T + t, i = u(n, f, c), a = y.y === n ? { "data-active": "true" } : {}, s = b.y === n ? { "data-current": "true" } : {};
-					return /* @__PURE__ */ o("b", {
-						className: i ? "" : r.dateHeaderDisabled,
-						...a,
-						...s,
-						onClick: () => i && z(n),
-						children: n
-					}, n);
+				children: Array.from({ length: 12 }, (e, n) => {
+					let r = T + n, a = d(r, l, i), o = y.y === r ? { "data-active": "true" } : {}, c = b.y === r ? { "data-current": "true" } : {};
+					return /* @__PURE__ */ s("b", {
+						className: a ? "" : t.dateHeaderDisabled,
+						...o,
+						...c,
+						onClick: () => a && z(r),
+						children: r
+					}, r);
 				})
 			})
 		]
 	})] });
 };
-function m(e) {
+function h(e) {
 	return e = typeof e == "number" ? e : new Date(e).getMonth() + 1, {
 		1: {
 			val: "01",
@@ -319,12 +326,12 @@ function m(e) {
 		}
 	}[e];
 }
-function h(e, t) {
+function g(e, t) {
 	let n = t + "";
 	for (; n.length < e;) n = "0" + n;
 	return n;
 }
-function g(e, t) {
+function _(e, t) {
 	let n, r;
 	t === void 0 ? (r = String(e), n = /* @__PURE__ */ new Date()) : (r = t, n = new Date(e));
 	let i = r, a = {
@@ -342,4 +349,4 @@ function g(e, t) {
 	return i;
 }
 //#endregion
-export { f as default };
+export { p as default };

package/dist/fields/Input.d.ts

@@ -1,27 +1,12 @@
 import { TInput } from './type';
 /**
- * StringField component
+ * StringField — текстовое поле (по умолчанию contentEditable).
  *
- * @param {string} value - Значение поля ввода.
- * @param {Function} onValue - Колбэк при изменении значения.
- * @param {Function} [onSave] - Колбэк при сохранении значения (например, при потере фокуса).
- * @param {string} [name] - Имя поля.
- * @param {string} [placeholder] - Текст-подсказка, отображаемый, когда поле пустое.
- * @param {string} [title] - Заголовок или подпись для поля.
- * @param {string} [label] - Метка поля (альтернативное описание).
- * @param {string} [error] - Текст ошибки для индикации некорректного ввода.
- * @param {boolean} [hide] - Признак скрытия поля.
- * @param {boolean} [edit] - Признак возможности редактировать поле.
- * @param {Boolean} [active] - Является ли поле активным.
- * @param {any} [after] - Контент, отображаемый после поля (например, иконка).
- * @param {any} [before] - Контент, отображаемый перед полем.
- * @param {Boolean} [show] - Показывать ли поле.
- * @param {string} [view] - Тип отображения поля.
- * @param {string} [id] - Уникальный идентификатор поля.
- * @param {string} [className] - Дополнительные CSS-классы.
- * @param {number} [maxLength] - Максимально допустимая длина значения.
- * @param {boolean} [isReload] - Нужно ли обновлять данные при изменении.
- * @param {boolean} [spellCheck] - Включить проверку орфографии.
+ * **Автозаполнение (логин + пароль):** менеджеры паролей опираются на нативные `<input>`.
+ * У `contentEditable` автозаполнение **не работает** как у поля логина.
+ * Включите **`native`** и задайте **`autoComplete="username"`** (и оберните поля в `<form>`, при необходимости).
+ *
+ * @param hidden — при true скрывает поле, только если значение пустое
  */
-declare function StringField({ value, form, onValue, name, inputmode, placeholder, title, label, show, hide, edit, active, maxLength, onSave, className, spellCheck, isReload, after, before, error, }: TInput): import("react/jsx-runtime").JSX.Element | "";
+declare function StringField({ value, form, onValue, name, placeholder, label, hidden, disabled, onBlur: onBlurField, className, after, before, error, inputmode, maxLength, spellCheck, native, autoComplete, inputType, id, }: TInput): import("react/jsx-runtime").JSX.Element | "";
 export default StringField;