@elcrm/form 0.0.63 → 0.0.65

package/README.md

@@ -0,0 +1,139 @@
+# @elcrm/form
+
+React-компоненты полей ввода для elCRM: текст, пароль, маски, деньги, даты, время, селект, диапазон и связка с хуком **`useForm`** (подписки по имени поля, без лишних перерисовок всей формы).
+
+## Установка
+
+```bash
+npm install @elcrm/form
+```
+
+**Peer-зависимости:** **`react`** и **`react-dom`** (версии — в `package.json`).
+
+## Стили и темы
+
+- Темы: **`@elcrm/form/light.css`**, **`@elcrm/form/dark.css`** — переключение через атрибут **`data-theme`** на контейнере.
+- Стили разметки полей (SCSS-модули): **`import "@elcrm/form/style.css"`** (или **`@elcrm/form/dist/style.css`**).
+
+## Быстрый старт
+
+```tsx
+import { useForm, StringField, PasswordField } from "@elcrm/form";
+import "@elcrm/form/light.css";
+
+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=""
+                label="Логин"
+                native
+                autoComplete="username"
+            />
+            <PasswordField
+                name="password"
+                form={form}
+                value=""
+                label="Пароль"
+            />
+        </form>
+    );
+}
+```
+
+### `Form.Init` (опционально)
+
+Нужен, если используются **уведомления** (например, копирование телефона в буфер) или **свои модалки** для **ModalField** / **OptionsField** (`modal="module.name"`). Рендерит **`null`**, дочерние элементы не оборачивает.
+
+```tsx
+import { Form, useForm, PhoneField } from "@elcrm/form";
+
+function Example() {
+    const form = useForm({ phone: "" });
+
+    return (
+        <>
+            <Form.Init
+                onNotice={(message) => {
+                    /* тост / snackbar */
+                }}
+                onModal={({
+                    module,
+                    modalName,
+                    fieldName,
+                    value,
+                    callback,
+                    options,
+                }) => {
+                    /* открыть модалку и передать результат в callback(...) */
+                }}
+            />
+            <PhoneField name="phone" form={form} label="Телефон" />
+        </>
+    );
+}
+```
+
+Без **`Form.Init`** колбэки **`onNotice`** и **`onModal`** из полей — заглушки (no-op).
+
+## Хук `useForm`
+
+- **`useForm(initialValues?)`** — хранение значений, **`onValue`** / **`setValue`** / **`setValues`**, подписки по имени поля.
+- Поля с **`name`** и **`form`** читают значение через **`useFormFieldState`** и обновляют форму согласно своей логике.
+
+Подробнее о API — в исходниках **`hooks/use.ts`** и **`CHANGELOG.md`**.
+
+## Общие пропы (`TInput`)
+
+База: **`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 по модулям**. Импорт из корня:
+
+```ts
+import { DateField, useForm } from "@elcrm/form";
+```
+
+Подключение только нужных файлов — **подпути** (имя файла совпадает с компонентом):
+
+```ts
+import DateField from "@elcrm/form/fields/Date";
+import { useForm } from "@elcrm/form/hooks/use";
+```
+
+Префиксы: **`fields/*`**, **`hooks/*`**, **`events/*`**, **`core/*`**, **`mask/*`** — см. **`exports`** в **`package.json`**.
+
+Объектные пропы (**`options`** у селекта и т.д.) не пересоздавайте на каждый рендер — вынесите в константы модуля.
+
+## Экспорт компонентов (корень пакета)
+
+`StringField`, `PasswordField`, `TextareaField`, `NumberField`, `MoneyField`, `MaskField`, `PhoneField`, `DateField`, `TimeField`, `SelectField`, `RangeField`, `ModalField`, `OptionsField`, **`Form`**, хуки **`useForm`**, **`useFormField`**, **`useFormFieldState`**, **`useFormInit`**.
+
+Типы: **`TInput`**, **`TPasswordField`**, **`TValue`**, **`TFieldFormBindings`**, **`TFieldPresentation`**, **`UseFormApi`**, **`FormInitProps`**, **`TModalOpenPayload`** и др.

package/dist/Form.d.ts

@@ -0,0 +1,20 @@
+import { TModalOpenPayload } from './FormInitContext';
+export type { TModalOpenPayload };
+export type FormInitProps = {
+    /** Уведомления (копирование в буфер и т.п.) */
+    onNotice?: (message: string) => void;
+    /** Модальные окна выбора для полей ModalField / OptionsField (`modal="module.name"`) */
+    onModal?: (payload: TModalOpenPayload) => void;
+};
+/**
+ * Регистрирует колбэки глобально для полей. Не рендерит разметку и не принимает `children`.
+ * Достаточно один раз смонтировать рядом с формой или в корне приложения.
+ */
+declare function Init({ onNotice, onModal }: FormInitProps): null;
+declare namespace Init {
+    var displayName: string;
+}
+/** Пространство имён: `Form.Init` */
+export declare const Form: {
+    Init: typeof Init;
+};

package/dist/Form.js

@@ -0,0 +1,11 @@
+import { registerFormInitHandlers as e } from "./FormInitContext.js";
+import t from "react";
+//#region src/lib/Form.tsx
+var n = () => {}, r = (e) => {};
+function i({ onNotice: i, onModal: a }) {
+	return t.useLayoutEffect(() => e(i ?? n, a ?? r), [i, a]), null;
+}
+i.displayName = "Form.Init";
+var a = { Init: i };
+//#endregion
+export { a as Form };

package/dist/FormInitContext.d.ts

@@ -0,0 +1,25 @@
+import { TValue } from './fields/type';
+/**
+ * Аргументы для колбэка открытия модалки (замена бывшему Modal.Open из @elcrm/modal).
+ * `module` и `modalName` — части строки пропа `modal` вида `"module.modalName"`.
+ */
+export type TModalOpenPayload = {
+    module: string;
+    modalName: string;
+    /** Имя поля формы */
+    fieldName: string;
+    value?: unknown;
+    options?: Record<string, unknown>;
+    callback?: (value: unknown) => void;
+    onValue?: (data: TValue) => void | Promise<void>;
+};
+export type FormInitContextValue = {
+    /** Текст уведомления (например после копирования в буфер) */
+    onNotice: (message: string) => void;
+    /** Открыть модалку выбора — реализация на стороне приложения */
+    onModal: (payload: TModalOpenPayload) => void;
+};
+/** Регистрация колбэков из `Form.Init`; возвращает cleanup */
+export declare function registerFormInitHandlers(onNotice: FormInitContextValue["onNotice"], onModal: FormInitContextValue["onModal"]): () => void;
+/** Доступ к колбэкам в полях (без React Context и без обёртки-children) */
+export declare function useFormInit(): FormInitContextValue;

package/dist/FormInitContext.js

@@ -0,0 +1,20 @@
+var e = {
+	onNotice: () => {},
+	onModal: (e) => {}
+}, t = { current: e }, n = {
+	onNotice: (e) => t.current.onNotice(e),
+	onModal: (e) => t.current.onModal(e)
+};
+function r(n, r) {
+	return t.current = {
+		onNotice: n,
+		onModal: r
+	}, () => {
+		t.current = e;
+	};
+}
+function i() {
+	return n;
+}
+//#endregion
+export { r as registerFormInitHandlers, i as useFormInit };

package/dist/assets/styles/Field.module.css

@@ -0,0 +1 @@
+._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}

package/dist/assets/styles/Form.module.css

@@ -0,0 +1 @@
+._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}

package/dist/assets/styles/Select.module.css

@@ -0,0 +1 @@
+: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}

package/dist/core/Field.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+interface Input {
+    element_blok?: {
+        className?: string[];
+    };
+    element_input?: {
+        className?: string[];
+        props?: Record<string, unknown>;
+    };
+    /** Текст подписи поля (колонка `<dt>`) */
+    label?: string;
+    before?: ReactNode;
+    type?: string;
+    after?: ReactNode;
+    children?: ReactNode;
+    error?: string;
+}
+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

@@ -0,0 +1,33 @@
+import e from "../styles/Field.module.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/core/Field.tsx
+var r = ({ element_blok: r = { className: [] }, element_input: i = {
+	className: [],
+	props: {}
+}, 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: [
+		o ? /* @__PURE__ */ t("dt", {
+			className: e.t,
+			children: o
+		}) : "",
+		c,
+		/* @__PURE__ */ t("dd", {
+			className: [
+				e.f,
+				...i.className || [],
+				s && s.length > 0 ? e.e : ""
+			].join(" "),
+			...i.props || {},
+			children: u
+		}),
+		s && s.length > 0 ? /* @__PURE__ */ t("em", {
+			className: e.m,
+			children: s
+		}) : "",
+		l
+	]
+});
+//#endregion
+export { r as default };

package/dist/events/onEvent.d.ts

@@ -0,0 +1,55 @@
+/** Публичный тип цели для contentEditable-полей (фокус, вставка) */
+export type EditableFieldTarget = HTMLElement & {
+    textContent: string | null;
+    scrollLeft: number;
+    innerHTML: string;
+    querySelector: (selector: string) => HTMLElement | null;
+};
+type EditableTarget = EditableFieldTarget;
+type EditableEvent = {
+    key?: string;
+    preventDefault: () => void;
+    target: EditableTarget;
+};
+/** Событие вставки: target + текст из буфера (синхронно из clipboardData) */
+export type EditableClipboardEvent = {
+    preventDefault: () => void;
+    target: EditableFieldTarget;
+    /** plain text из события paste — без async navigator.clipboard */
+    clipboardText: string;
+};
+type BlurLikeEvent = {
+    target: HTMLElement;
+};
+/**
+ * Вставка уже отфильтрованного текста в позицию каретки и генерация `input`
+ * (для полей со своим правилом фильтрации, например Money).
+ */
+export declare function pastePlainTextIntoSelection(text: string, el: HTMLElement): void;
+/**
+ * Приводит ClipboardEvent к виду для Paste/PasteOne/PasteDigits
+ * (синхронный текст из clipboardData — надёжнее, чем navigator.clipboard.readText).
+ */
+export declare function asEditableClipboard(e: {
+    preventDefault: () => void;
+    currentTarget: HTMLElement;
+    clipboardData?: DataTransfer | null;
+}): EditableClipboardEvent;
+declare const _default: {
+    ContentEditable: string;
+    KeyDown(e: EditableEvent): void;
+    /**
+     * Маска / телефон: в буфере оставляем только цифры, затем вставка и input.
+     */
+    PasteOne(e: EditableClipboardEvent): void;
+    Paste(maxLength: number, e: EditableClipboardEvent): void;
+    /**
+     * Числовое поле: только цифры (и при необходимости ограничение длины).
+     */
+    PasteDigits(maxLength: number, e: EditableClipboardEvent): void;
+    Focus(e: {
+        target: EditableTarget;
+    }): void;
+    Blur(e: BlurLikeEvent): void;
+};
+export default _default;

package/dist/events/onEvent.js

@@ -0,0 +1,67 @@
+//#region src/lib/events/onEvent.ts
+var e = (e) => {
+	let t = window.getSelection();
+	if (!t || t.rangeCount === 0) return;
+	let n = t.getRangeAt(0);
+	n.deleteContents(), n.insertNode(document.createTextNode(e)), n.collapse(!1), t.removeAllRanges(), t.addRange(n);
+};
+function t(t, n) {
+	e(t), n.dispatchEvent(new Event("input", { bubbles: !0 }));
+}
+var n = (e) => {
+	let t = window.getSelection();
+	if (!t) return;
+	let n = document.createRange();
+	n.selectNodeContents(e), n.collapse(!1), t.removeAllRanges(), t.addRange(n);
+}, r = (e, t, n) => {
+	if (!t) return e;
+	let r = window.getSelection(), i = 0;
+	if (r && r.rangeCount > 0) {
+		let e = r.getRangeAt(0);
+		n.contains(e.commonAncestorContainer) && (i = e.toString().length);
+	}
+	let a = t - ((n.textContent || "").length - i);
+	return a <= 0 ? "" : e.slice(0, a);
+};
+function i(e) {
+	queueMicrotask(() => {
+		e.dispatchEvent(new Event("input", { bubbles: !0 }));
+	});
+}
+var a = {
+	KeyDown(e) {
+		e.key === "Enter" && e.preventDefault();
+	},
+	PasteOne(t) {
+		t.preventDefault(), e(t.clipboardText.replace(/\D/g, "")), i(t.target);
+	},
+	Paste(t, n) {
+		n.preventDefault();
+		let a = r(n.clipboardText, t, n.target);
+		a && (e(a.replace(/(\r\n|\n|\r)/gm, " ")), i(n.target));
+	},
+	PasteDigits(t, n) {
+		n.preventDefault();
+		let a = r(n.clipboardText.replace(/\D/g, ""), t, n.target);
+		a && (e(a), i(n.target));
+	},
+	Focus(e) {
+		(e.target.textContent || "").length || (e.target.innerHTML = "<br>"), n(e.target);
+	},
+	Blur(e) {
+		e.target.scrollLeft = 0, e.target.querySelector("br") !== null && e.target.querySelector("br")?.remove();
+	}
+}, o = "plaintext-only";
+function s(e) {
+	return {
+		preventDefault: () => e.preventDefault(),
+		target: e.currentTarget,
+		clipboardText: e.clipboardData?.getData("text/plain") ?? ""
+	};
+}
+var c = {
+	...a,
+	ContentEditable: o
+};
+//#endregion
+export { s as asEditableClipboard, c as default, t as pastePlainTextIntoSelection };

package/dist/fields/Date.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { TInput } from './type';
+type TDate = TInput & {
+    max?: Date;
+    min?: Date;
+    icon?: () => React.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;
+}
+export default DateField;