@elcrm/form 0.1.2 → 0.1.4

package/dist/fields/Color.js

@@ -1 +1 @@
-import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{acquireOverlayZIndex as r,releaseOverlayZIndex as i}from"../overlayZ.js";import a from"../styles/Color.module.js";import o from"react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{createPortal as u}from"react-dom";var d=`#FF2D55.#FF3B30.#FF453A.#FF6961.#FF8A80.#C11F3E.#AF52DE.#BF5AF2.#DA8FFF.#5856D6.#5E5CE6.#7D7AFF.#007AFF.#0A84FF.#409CFF.#64D2FF.#70D7FF.#5AC8FA.#32ADE6.#64D2FF.#40C8E0.#00C7BE.#63E6E2.#66D4CF.#34C759.#30D158.#30DB5B.#4CD964.#6DE6A0.#8EEDB3.#A8E10C.#B5F200.#D0FF00.#E4FF66.#F2FF99.#C6FF00.#FFCC00.#FFD60A.#FFEA00.#FFE066.#FFF3A3.#FFEB3B.#FF9500.#FF9F0A.#FFB340.#FFB340.#FFD580.#FF8C00.#A2845E.#AC8E68.#C4A484.#8E8E93.#636366.#48484A.#3A3A3C.#2C2C2E.#1C1C1E`.split(`.`);function f(e,t,n){return Math.min(n,Math.max(t,e))}function p(e){return Math.round(f(e,0,255)).toString(16).padStart(2,`0`).toUpperCase()}function m(e,t,n){let r=(e%360+360)%360,i=n*t,a=i*(1-Math.abs(r/60%2-1)),o=n-i,s=0,c=0,l=0;return r<60?[s,c,l]=[i,a,0]:r<120?[s,c,l]=[a,i,0]:r<180?[s,c,l]=[0,i,a]:r<240?[s,c,l]=[0,a,i]:r<300?[s,c,l]=[a,0,i]:[s,c,l]=[i,0,a],{r:(s+o)*255,g:(c+o)*255,b:(l+o)*255}}function h(e,t,n){let r=e/255,i=t/255,a=n/255,o=Math.max(r,i,a),s=o-Math.min(r,i,a),c=0;s!==0&&(c=o===r?(i-a)/s%6:o===i?(a-r)/s+2:(r-i)/s+4,c*=60,c<0&&(c+=360));let l=o===0?0:s/o;return{h:c,s:l,v:o}}function g(e){if(typeof e!=`string`)return null;let t=e.trim();if(!t||(t[0]===`#`&&(t=t.slice(1)),![3,4,6,8].includes(t.length))||!/^[0-9a-fA-F]+$/.test(t))return null;let n=0,r=0,i=0,a=1;return t.length===3||t.length===4?(n=parseInt(t[0]+t[0],16),r=parseInt(t[1]+t[1],16),i=parseInt(t[2]+t[2],16),t.length===4&&(a=parseInt(t[3]+t[3],16)/255)):(n=parseInt(t.slice(0,2),16),r=parseInt(t.slice(2,4),16),i=parseInt(t.slice(4,6),16),t.length===8&&(a=parseInt(t.slice(6,8),16)/255)),{...h(n,r,i),a}}function _(e,t){let{r:n,g:r,b:i}=m(e.h,e.s,e.v),a=`#${p(n)}${p(r)}${p(i)}`;return!t||e.a>=.999?a:`${a}${p(e.a*255)}`}function v(e){let{r:t,g:n,b:r}=m(e.h,e.s,e.v),i=Math.round(t),a=Math.round(n),o=Math.round(r);return e.a>=.999?`rgb(${i}, ${a}, ${o})`:`rgba(${i}, ${a}, ${o}, ${Number(e.a.toFixed(3))})`}function y(e){let{r:t,g:n,b:r}=m(e,1,1);return`rgb(${Math.round(t)},${Math.round(n)},${Math.round(r)})`}function b(e){let t=g(e);return t?_(t,t.a<.999):e.toUpperCase()}function x(e){return e==null?!0:typeof e==`string`?e.trim()===``:!1}function S(e){if(!(e instanceof HTMLElement))return!1;let t=e.tagName;return t===`INPUT`||t===`TEXTAREA`||t===`SELECT`?!0:!!e.isContentEditable}function C(e){let t=(e||``).trim();if(!t)return null;let n=g(t)??g(t[0]===`#`?t:`#${t.replace(/^#/,``)}`);if(n)return n;let r=/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*([\d.]+))?\s*\)$/i.exec(t);if(r){let e=f(Number(r[1]),0,255),t=f(Number(r[2]),0,255),n=f(Number(r[3]),0,255),i=r[4]===void 0?1:f(Number(r[4]),0,1);return{...h(e,t,n),a:i}}return null}function w(){return typeof window<`u`&&`EyeDropper`in window}var T={h:0,s:1,v:.76,a:1};function E({value:r=``,form:i,onValue:f,onBlur:p,name:m=``,placeholder:h=`#000000`,label:v=``,error:y=``,hidden:b=!1,disabled:w=!1,className:E=``,after:O=``,before:k=``,colors:A,alpha:j=!0}){let{value:M}=n(i,m,r),N=typeof M==`string`?M:M==null?``:String(M),[P,F]=o.useState(!1),[I,L]=o.useState(null),[R,z]=o.useState(()=>g(N)??{...T}),[B,V]=o.useState(()=>_(g(N)??T,j)),H=A?.length?A:d,U=g(N),W=U??(x(N)?g(h):null),G=U?_(U,j):``,K=W?_(W,j):`transparent`;o.useEffect(()=>{let e=g(N);e&&(z(e),V(_(e,j)))},[N,j]);let q=o.useCallback((e,t)=>{let n=_(e,j),r={value:n,name:m||``};i&&m&&(t===`live`?i.onValue(r):i.setValue(r)),f&&f!==i?.onValue&&f(r),V(n)},[j,i,m,f]),J=e=>{if(w)return;let t=g(N)??{...R};z(t),V(_(t,j)),L(e.getBoundingClientRect()),F(!0)},Y=()=>{F(!1),p?.({value:_(R,j),name:m||``})};o.useEffect(()=>{if(!P||w)return;let e=``,t=t=>{let n=C(t);if(!n)return!1;let r={...n,a:j?n.a:1},i=_(r,j);return i===e?!0:(e=i,z(r),q(r,`commit`),!0)},n=e=>{S(e.target)||t(e.clipboardData?.getData(`text/plain`)??``)&&(e.preventDefault(),e.stopPropagation())},r=e=>{(e.ctrlKey||e.metaKey)&&(e.key!==`v`&&e.key!==`V`||S(e.target)||navigator.clipboard?.readText&&(e.preventDefault(),navigator.clipboard.readText().then(e=>{t(e)})))};return document.addEventListener(`paste`,n,!0),window.addEventListener(`keydown`,r,!0),()=>{document.removeEventListener(`paste`,n,!0),window.removeEventListener(`keydown`,r,!0)}},[P,w,j,q]);let X=e=>{if(!w){if(!P&&(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)){e.preventDefault(),J(e.currentTarget);return}P&&e.key===`Escape`&&(e.preventDefault(),Y())}};return b&&x(N)?null:l(s,{children:[l(t,{type:`color`,label:v,error:y,element_blok:{className:[E||``]},element_input:{className:[e.w],props:{"data-disabled":w?`true`:void 0}},children:[k?c(`span`,{className:e.a,children:k}):null,l(`div`,{className:a.t,role:`combobox`,tabIndex:w?-1:0,"aria-expanded":P,"aria-haspopup":`dialog`,"aria-disabled":w,"aria-label":v||`Цвет`,onClick:e=>J(e.currentTarget),onKeyDown:X,children:[c(`span`,{className:a.c,style:{"--preview-color":K}}),c(`span`,{className:[a.g,G?``:a.m].filter(Boolean).join(` `),children:G||h})]}),O?c(`span`,{className:e.a,children:O}):null]}),P&&u(c(D,{parent:I||void 0,hsva:R,setHsva:z,hexDraft:B,setHexDraft:V,alpha:j,palette:H,onLive:e=>q(e,`live`),onCommit:e=>q(e,`commit`),onClose:Y}),document.body)]})}E.displayName=`ColorField`;function D({parent:e,hsva:t,setHsva:n,hexDraft:u,setHexDraft:d,alpha:p,palette:m,onLive:h,onCommit:y,onClose:x}){let[S]=o.useState(()=>r());if(o.useEffect(()=>()=>i(S),[S]),!e)return null;let C=p?340:300,T=window.innerHeight-e.bottom<C+8?Math.max(8,e.top-C-8):Math.min(window.innerHeight-C-8,e.bottom+8),E=Math.min(Math.max(8,e.left),window.innerWidth-260-8),D=v({...t,a:1}),j=b(_(t,p)),N=(e,t)=>{n(e),t===`live`?h(e):y(e)},P=()=>{let e=g(u);if(!e){d(_(t,p));return}N(e,`commit`)},F=e=>{let n=e.replace(/[^\d]/g,``),r=f(Number(n||0),0,100);N({...t,a:r/100},`commit`)},I=async()=>{if(w())try{let e=window.EyeDropper,n=g((await new e().open()).sRGBHex);n&&N({...n,a:t.a},`commit`)}catch{}};return l(s,{children:[c(`div`,{className:a.o,style:{zIndex:S},onClick:x,"aria-hidden":!0}),l(`div`,{className:a.p,role:`dialog`,"aria-label":`Выбор цвета`,style:{top:T,left:E,width:260,zIndex:S+1},children:[c(O,{hsva:t,onChange:(e,n,r)=>N({...t,s:e,v:n},r)}),l(`div`,{className:a.r,children:[w()?c(`button`,{type:`button`,className:a.e,"aria-label":`Пипетка`,onClick:I,children:c(M,{})}):null,l(`div`,{className:a.s,children:[c(k,{h:t.h,onChange:(e,n)=>N({...t,h:e},n)}),p?c(A,{a:t.a,color:D,onChange:(e,n)=>N({...t,a:e},n)}):null]})]}),l(`div`,{className:a.i,children:[c(`span`,{className:a.f,children:`Hex`}),c(`input`,{className:a.n,value:u.replace(/^#/,``),spellCheck:!1,"aria-label":`Hex`,onChange:e=>{let t=e.target.value.replace(/[^0-9a-fA-F]/g,``);d(t?`#${t}`:``)},onBlur:P,onKeyDown:e=>{e.key===`Enter`&&(e.preventDefault(),e.target.blur())}}),p?c(`input`,{className:`${a.n} ${a.x}`,value:`${Math.round(t.a*100)} %`,"aria-label":`Прозрачность`,onChange:e=>F(e.target.value),onFocus:e=>e.target.select()}):null]}),c(`div`,{className:a.y,role:`listbox`,"aria-label":`Палитра`,children:m.map(e=>{let t=b(e)===j;return c(`button`,{type:`button`,role:`option`,"aria-checked":t,"aria-label":e,className:a.z,style:{"--swatch":e},onClick:()=>{let t=g(e);t&&N({...t,a:p?t.a:1},`commit`)}},e)})})]})]})}function O({hsva:e,onChange:t}){let n=o.useRef(null),r=o.useRef(!1),i=o.useRef(t);i.current=t;let s=(t,r)=>{let i=n.current;if(!i)return{s:e.s,v:e.v};let a=i.getBoundingClientRect();return{s:f((t-a.left)/a.width,0,1),v:f(1-(r-a.top)/a.height,0,1)}};return o.useEffect(()=>{let e=e=>{if(!r.current)return;let{s:t,v:n}=s(e.clientX,e.clientY);i.current(t,n,`live`)},t=e=>{if(!r.current)return;r.current=!1;let{s:t,v:n}=s(e.clientX,e.clientY);i.current(t,n,`commit`)};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,t),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,t)}},[]),l(`div`,{ref:n,className:a.v,style:{background:y(e.h)},onPointerDown:e=>{r.current=!0;let{s:t,v:n}=s(e.clientX,e.clientY);i.current(t,n,`live`)},children:[c(`div`,{className:a.w}),c(`div`,{className:a.b}),c(`div`,{className:a.h,style:{left:`${e.s*100}%`,top:`${(1-e.v)*100}%`,background:v({...e,a:1})}})]})}function k({h:e,onChange:t}){return c(j,{className:`${a.l} ${a.u}`,ratio:e/360,onRatio:(e,n)=>t(e*360,n),handleColor:y(e)})}function A({a:e,color:t,onChange:n}){return c(j,{className:`${a.l} ${a.a}`,style:{"--alpha-color":t},ratio:e,onRatio:n,handleColor:t})}function j({className:e,style:t,ratio:n,onRatio:r,handleColor:i}){let s=o.useRef(null),l=o.useRef(!1),u=(e,t)=>{let n=s.current;if(!n)return;let i=n.getBoundingClientRect();r(f((e-i.left)/i.width,0,1),t)};return o.useEffect(()=>{let e=e=>{l.current&&u(e.clientX,`live`)},t=e=>{l.current&&(l.current=!1,u(e.clientX,`commit`))};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,t),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,t)}},[r]),c(`div`,{ref:s,className:e,style:t,onPointerDown:e=>{l.current=!0,u(e.clientX,`live`)},children:c(`div`,{className:a.d,style:{left:`${f(n,0,1)*100}%`,background:i}})})}function M(){return l(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":!0,children:[c(`path`,{d:`m2 22 1-1h3l9-9`}),c(`path`,{d:`M3 21v-3l9-9`}),c(`path`,{d:`m15 5 3 3`}),c(`path`,{d:`M17.5 2.5a2.12 2.12 0 0 1 3 3L12 14l-4 1 1-4Z`})]})}export{d as DEFAULT_COLOR_PALETTE,E as default};
+import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{createFieldEmit as r}from"./emit.js";import i from"../styles/Color.module.js";import{DEFAULT_COLOR_PALETTE as a,formatHexColor as o,isEditablePasteTarget as s,isEmptyColor as c,normalizeHexCompare as l,parseClipboardColor as ee,parseHexColor as u}from"./colorUtils.js";import te from"./ColorPanel.js";import d from"react";import{Fragment as ne,jsx as f,jsxs as p}from"react/jsx-runtime";import{createPortal as re}from"react-dom";var m={h:0,s:1,v:.76,a:1};function h({value:h=``,form:g,onValue:_,onBlur:ie,name:v=``,placeholder:y=`#000000`,label:b=``,error:x=``,hidden:S=!1,disabled:C=!1,className:ae=``,after:w=``,before:T=``,colors:E,alpha:D=!0,inlinePalette:O=!1}){let{value:k}=n(g,v,h),A=typeof k==`string`?k:k==null?``:String(k),[j,M]=d.useState(!1),[oe,N]=d.useState(null),P=d.useRef(null),[F,I]=d.useState(()=>u(A)??{...m}),[L,R]=d.useState(()=>o(u(A)??m,D)),z=d.useCallback(()=>{let e=P.current;if(!e)return;let t=e.getBoundingClientRect();N(e=>e&&e.top===t.top&&e.left===t.left&&e.width===t.width&&e.height===t.height&&e.bottom===t.bottom?e:t)},[]);d.useEffect(()=>{if(!j)return;z();let e=()=>z();return window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[j,z]);let B=E?.length?E:a,V=u(A),H=V??(c(A)?u(y):null),U=V?o(V,D):``,W=H?o(H,D):`transparent`;d.useEffect(()=>{let e=u(A);e&&(I(e),R(o(e,D)))},[A,D]);let G=d.useCallback((e,t)=>{let n=o(e,D);r(g,v,_)(n,t===`commit`),R(n)},[D,g,v,_]),[K,q]=d.useState(null),[se,J]=d.useState(!1),Y=d.useRef(null),X=d.useRef(null);d.useEffect(()=>()=>{Y.current&&clearTimeout(Y.current),X.current&&clearTimeout(X.current)},[]);let ce=e=>{if(C)return;let t=u(e);if(!t)return;let n={...t,a:D?t.a:1};I(n),G(n,`commit`)},le=e=>{if(C||K)return;let t=l(e);Z&&t===Z||(q(e),Y.current&&clearTimeout(Y.current),Y.current=setTimeout(()=>{ce(e),q(null),J(!0),X.current&&clearTimeout(X.current),X.current=setTimeout(()=>{J(!1)},280)},220))},Z=V?l(o(V,D)):``,ue=d.useMemo(()=>{if(!O)return[];let e=K?l(K):``;return B.filter(t=>{let n=l(t);return e&&n===e?!0:!(Z&&n===Z)})},[O,B,Z,K]),Q=e=>{if(C)return;let t=u(A)??{...F};I(t),R(o(t,D)),N(e.getBoundingClientRect()),M(!0)},$=()=>{M(!1),ie?.({value:o(F,D),name:v||``})};d.useEffect(()=>{if(!j||C)return;let e=``,t=t=>{let n=ee(t);if(!n)return!1;let r={...n,a:D?n.a:1},i=o(r,D);return i===e?!0:(e=i,I(r),G(r,`commit`),!0)},n=e=>{s(e.target)||t(e.clipboardData?.getData(`text/plain`)??``)&&(e.preventDefault(),e.stopPropagation())},r=e=>{(e.ctrlKey||e.metaKey)&&(e.key!==`v`&&e.key!==`V`||s(e.target)||navigator.clipboard?.readText&&(e.preventDefault(),navigator.clipboard.readText().then(e=>{t(e)})))};return document.addEventListener(`paste`,n,!0),window.addEventListener(`keydown`,r,!0),()=>{document.removeEventListener(`paste`,n,!0),window.removeEventListener(`keydown`,r,!0)}},[j,C,D,G]);let de=e=>{if(!C){if(!j&&(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)){e.preventDefault(),Q(e.currentTarget);return}j&&e.key===`Escape`&&(e.preventDefault(),$())}};return S&&c(A)?null:p(ne,{children:[p(t,{type:`color`,label:b,error:x,element_blok:{className:[ae||``]},element_input:{className:[e.w,i.q],props:{"data-disabled":C?`true`:void 0}},children:[T?f(`span`,{className:e.a,children:T}):null,p(`div`,{ref:P,className:i.t,role:`combobox`,tabIndex:C?-1:0,"aria-expanded":j,"aria-haspopup":`dialog`,"aria-disabled":C,"aria-label":b||`Цвет`,onClick:e=>Q(e.currentTarget),onKeyDown:de,children:[f(`span`,{className:i.c,"data-enter":se?`true`:void 0,style:{"--preview-color":W}}),f(`span`,{className:[i.g,U?``:i.m].filter(Boolean).join(` `),children:U||y})]}),O?f(`div`,{className:i.j,role:`listbox`,"aria-label":`Палитра`,onClick:e=>e.stopPropagation(),onMouseDown:e=>e.stopPropagation(),children:ue.map(e=>{let t=K!=null&&l(e)===l(K);return f(`button`,{type:`button`,role:`option`,"aria-label":e,disabled:C||!!K,className:i.k,"data-exit":t?`true`:void 0,style:{"--swatch":e},onClick:t=>{t.stopPropagation(),le(e)}},e)})}):null,w?f(`span`,{className:e.a,children:w}):null]}),j&&re(f(te,{parent:oe||void 0,hsva:F,setHsva:I,hexDraft:L,setHexDraft:R,alpha:D,palette:B,showPalette:!O,onLive:e=>G(e,`live`),onCommit:e=>G(e,`commit`),onClose:$}),document.body)]})}h.displayName=`ColorField`;export{h as default};

package/dist/fields/ColorPanel.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { Hsva } from './colorUtils';
+/**
+ * Попап пикера {@link ColorField}: SV, hue, alpha, hex, опционально палитра.
+ * Не публичный API. Позиция — `parent` (rect триггера) + clamp во вьюпорт.
+ */
+export default function ColorPanel({ parent, hsva, setHsva, hexDraft, setHexDraft, alpha, palette, showPalette, onLive, onCommit, onClose, }: {
+    parent?: DOMRect;
+    hsva: Hsva;
+    setHsva: React.Dispatch<React.SetStateAction<Hsva>>;
+    hexDraft: string;
+    setHexDraft: React.Dispatch<React.SetStateAction<string>>;
+    alpha: boolean;
+    palette: string[];
+    /** false — пресеты уже в поле, в попапе не дублируем */
+    showPalette?: boolean;
+    onLive: (next: Hsva) => void;
+    onCommit: (next: Hsva) => void;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/fields/ColorPanel.js

@@ -0,0 +1 @@
+import{acquireOverlayZIndex as e,releaseOverlayZIndex as t}from"../overlayZ.js";import n from"../styles/Color.module.js";import{clamp as r,cssColor as i,formatHexColor as a,hasEyeDropper as o,hueCss as s,normalizeHexCompare as c,parseHexColor as l}from"./colorUtils.js";import u from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";function m({parent:s,hsva:m,setHsva:v,hexDraft:b,setHexDraft:x,alpha:S,palette:C,showPalette:w=!0,onLive:T,onCommit:E,onClose:D}){let[O]=u.useState(()=>e());if(u.useEffect(()=>()=>t(O),[O]),!s)return null;let k=(S?340:300)-(w?0:90),A=window.innerHeight-s.bottom<k+8?s.top-k-8:s.bottom+8;A=Math.min(A,window.innerHeight-k-8),A=Math.max(8,A);let j=Math.min(Math.max(8,s.left),window.innerWidth-260-8),M=i({...m,a:1}),N=c(a(m,S)),P=(e,t)=>{v(e),t===`live`?T(e):E(e)},F=()=>{let e=l(b);if(!e){x(a(m,S));return}P(e,`commit`)},I=e=>{let t=e.replace(/[^\d]/g,``),n=r(Number(t||0),0,100);P({...m,a:n/100},`commit`)},L=async()=>{if(o())try{let e=window.EyeDropper,t=l((await new e().open()).sRGBHex);t&&P({...t,a:m.a},`commit`)}catch{}};return p(d,{children:[f(`div`,{className:n.o,style:{zIndex:O},onClick:D,"aria-hidden":!0}),p(`div`,{className:n.p,role:`dialog`,"aria-label":`Выбор цвета`,style:{top:A,left:j,width:260,zIndex:O+1},children:[f(h,{hsva:m,onChange:(e,t,n)=>P({...m,s:e,v:t},n)}),p(`div`,{className:n.r,children:[o()?f(`button`,{type:`button`,className:n.e,"aria-label":`Пипетка`,onClick:L,children:f(y,{})}):null,p(`div`,{className:n.s,children:[f(g,{h:m.h,onChange:(e,t)=>P({...m,h:e},t)}),S?f(_,{a:m.a,color:M,onChange:(e,t)=>P({...m,a:e},t)}):null]})]}),p(`div`,{className:n.i,children:[f(`span`,{className:n.f,children:`Hex`}),f(`input`,{className:n.n,value:b.replace(/^#/,``),spellCheck:!1,"aria-label":`Hex`,onChange:e=>{let t=e.target.value.replace(/[^0-9a-fA-F]/g,``);x(t?`#${t}`:``)},onBlur:F,onKeyDown:e=>{e.key===`Enter`&&(e.preventDefault(),e.target.blur())}}),S?f(`input`,{className:`${n.n} ${n.x}`,value:`${Math.round(m.a*100)} %`,"aria-label":`Прозрачность`,onChange:e=>I(e.target.value),onFocus:e=>e.target.select()}):null]}),w?f(`div`,{className:n.y,role:`listbox`,"aria-label":`Палитра`,children:C.map(e=>{let t=c(e)===N;return f(`button`,{type:`button`,role:`option`,"aria-checked":t,"aria-label":e,className:n.z,style:{"--swatch":e},onClick:()=>{let t=l(e);t&&P({...t,a:S?t.a:1},`commit`)}},e)})}):null]})]})}function h({hsva:e,onChange:t}){let a=u.useRef(null),o=u.useRef(!1),c=u.useRef(t);c.current=t;let l=(t,n)=>{let i=a.current;if(!i)return{s:e.s,v:e.v};let o=i.getBoundingClientRect();return{s:r((t-o.left)/o.width,0,1),v:r(1-(n-o.top)/o.height,0,1)}};return u.useEffect(()=>{let e=e=>{if(!o.current)return;let{s:t,v:n}=l(e.clientX,e.clientY);c.current(t,n,`live`)},t=e=>{if(!o.current)return;o.current=!1;let{s:t,v:n}=l(e.clientX,e.clientY);c.current(t,n,`commit`)};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,t),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,t)}},[]),p(`div`,{ref:a,className:n.v,style:{background:s(e.h)},onPointerDown:e=>{o.current=!0;let{s:t,v:n}=l(e.clientX,e.clientY);c.current(t,n,`live`)},children:[f(`div`,{className:n.w}),f(`div`,{className:n.b}),f(`div`,{className:n.h,style:{left:`${e.s*100}%`,top:`${(1-e.v)*100}%`,background:i({...e,a:1})}})]})}function g({h:e,onChange:t}){return f(v,{className:`${n.l} ${n.u}`,ratio:e/360,onRatio:(e,n)=>t(e*360,n),handleColor:s(e)})}function _({a:e,color:t,onChange:r}){return f(v,{className:`${n.l} ${n.a}`,style:{"--alpha-color":t},ratio:e,onRatio:r,handleColor:t})}function v({className:e,style:t,ratio:i,onRatio:a,handleColor:o}){let s=u.useRef(null),c=u.useRef(!1),l=(e,t)=>{let n=s.current;if(!n)return;let i=n.getBoundingClientRect();a(r((e-i.left)/i.width,0,1),t)};return u.useEffect(()=>{let e=e=>{c.current&&l(e.clientX,`live`)},t=e=>{c.current&&(c.current=!1,l(e.clientX,`commit`))};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,t),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,t)}},[a]),f(`div`,{ref:s,className:e,style:t,onPointerDown:e=>{c.current=!0,l(e.clientX,`live`)},children:f(`div`,{className:n.d,style:{left:`${r(i,0,1)*100}%`,background:o}})})}function y(){return p(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":!0,children:[f(`path`,{d:`m2 22 1-1h3l9-9`}),f(`path`,{d:`M3 21v-3l9-9`}),f(`path`,{d:`m15 5 3 3`}),f(`path`,{d:`M17.5 2.5a2.12 2.12 0 0 1 3 3L12 14l-4 1 1-4Z`})]})}export{m as default};

package/dist/fields/Date.d.ts

@@ -1,11 +1,25 @@
 import { default as React } from 'react';
 import { TInput } from './type';
-type TDate = TInput & {
+/**
+ * Дата с выпадающим календарём (портал).
+ *
+ * **В форме:** `string` `YYYY-MM-DD` или `""`.
+ *
+ * **Элементы:** капсула → кнопка-триггер с текстом `дд.мм.гггг`.
+ * `icon` — **полная замена** триггера (не слот `before`). `min`/`max` — `Date`.
+ *
+ * @example
+ * <DateField name="due" form={form} label="Срок" min={new Date()} />
+ */
+export type TDate = TInput & {
     max?: Date;
     min?: Date;
+    /** Полная замена UI своим триггером (не аффикс) */
     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;

package/dist/fields/Date.js

@@ -1 +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 i from"../styles/Form.module.js";import{acquireOverlayZIndex as a,releaseOverlayZIndex as o}from"../overlayZ.js";import s from"react";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import{createPortal as d}from"react-dom";function f(e){return!!(e==null||typeof e==`string`&&r(e)||e instanceof Date&&Number.isNaN(e.getTime()))}function p(e,t,n,r){let i=new Date(e,t-1,1);return!(n&&new Date(e,t,0)<n||r&&i>r)}function m(e,t,n){return!(t&&e<t.getFullYear()||n&&e>n.getFullYear())}function h(e,t,n){let r=e;if(t){let e=t.getFullYear();r+11<e&&(r=e-11),r<e&&(r=e)}if(n){let e=n.getFullYear();r>e&&(r=e-11),r+11>e&&(r=e-11)}return r}function g(e){if(!(e instanceof HTMLElement))return!1;let t=e.tagName;return t===`INPUT`||t===`TEXTAREA`||t===`SELECT`?!0:!!e.isContentEditable}function _(e){let t=(e||``).trim();if(!t)return null;let n=t.split(/\s+/)[0].replace(/,/g,`.`),r=(e,t,n)=>{if(t<1||t>12||n<1||n>31)return null;let r=e<100?2e3+e:e,i=new Date(r,t-1,n);return Number.isNaN(i.getTime())||i.getFullYear()!==r||i.getMonth()!==t-1||i.getDate()!==n?null:i},i=/^(\d{1,2})[./](\d{1,2})[./](\d{2,4})$/.exec(n);if(i)return r(parseInt(i[3],10),parseInt(i[2],10),parseInt(i[1],10));if(i=/^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(n),i)return r(parseInt(i[1],10),parseInt(i[2],10),parseInt(i[3],10));if(i=/^(\d{1,2})\/(\d{1,2})\/(\d{2,4})$/.exec(n),i)return r(parseInt(i[3],10),parseInt(i[2],10),parseInt(i[1],10));let a=n.replace(/\D/g,``);return a.length===8?r(parseInt(a.slice(4,8),10),parseInt(a.slice(2,4),10),parseInt(a.slice(0,2),10))||r(parseInt(a.slice(0,4),10),parseInt(a.slice(4,6),10),parseInt(a.slice(6,8),10)):null}function v(e,t,n){let r=e.getTime();return t&&r<t.getTime()&&(r=t.getTime()),n&&r>n.getTime()&&(r=n.getTime()),new Date(r)}function y(e){return e.getFullYear()+`-`+w(2,e.getMonth()+1)+`-`+w(2,e.getDate())}function b({label:i=``,error:a,hidden:o=!1,className:p,placeholder:m,disabled:h=!1,onValue:b,max:S,min:C,form:w,icon:E,name:D=``,value:O,after:k=``,before:A=``}){let j=s.useCallback(e=>{if(e==null||typeof e==`string`&&r(e))return``;if(e instanceof Date)return Number.isNaN(e.getTime())?``:e;if(typeof e==`string`||typeof e==`number`){let t=new Date(e);return Number.isNaN(t.getTime())?``:e}return``},[]),{value:M}=n(w,D,O),[N,P]=s.useState(j(M)),F=s.useRef(null),[I,L]=s.useState(null),[R,z]=s.useState(!1),B=s.useCallback(()=>{let e=F.current;if(!e)return;let t=e.getBoundingClientRect();L({x:t.left,y:t.top,b:t.bottom})},[]);s.useEffect(()=>{if(!R)return;B();let e=()=>{B()};return window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[R,B]),s.useEffect(()=>{P(j(M))},[M,j]);let V=s.useCallback(e=>{let t={value:e,name:D};P(e),w&&D&&w.setValue(t),b&&b!==w?.onValue&&b(t)},[w,D,b]);s.useEffect(()=>{if(!R||h)return;let e=``,t=t=>{let n=_(t);if(!n)return!1;let r=y(v(n,C,S));return r===e?!0:(e=r,V(r),z(!1),!0)},n=e=>{g(e.target)||t(e.clipboardData?.getData(`text/plain`)??``)&&(e.preventDefault(),e.stopPropagation())},r=e=>{(e.ctrlKey||e.metaKey)&&(e.key!==`v`&&e.key!==`V`||g(e.target)||navigator.clipboard?.readText&&(e.preventDefault(),navigator.clipboard.readText().then(e=>{t(e)})))};return document.addEventListener(`paste`,n,!0),window.addEventListener(`keydown`,r,!0),()=>{document.removeEventListener(`paste`,n,!0),window.removeEventListener(`keydown`,r,!0)}},[R,h,C,S,V]);let H=e=>{if(h)return;let t=e.currentTarget.getBoundingClientRect();L({x:t.left,y:t.top,b:t.bottom}),z(!0)},U={};m&&(U.placeholder=m);let W=M==null||M===``||typeof M==`string`&&r(M);return o&&W?l(c,{}):u(c,{children:[E?E():u(t,{type:`date`,label:i,error:a,element_blok:{className:[p||``]},element_input:{className:[e.w],props:{"data-disabled":h?`true`:void 0}},children:[A?l(`span`,{className:e.a,children:A}):null,l(`div`,{ref:F,onClick:H,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),H(e))},tabIndex:h?-1:0,role:`button`,"aria-haspopup":`dialog`,"aria-expanded":R,"aria-label":i||m||`Дата`,"data-edit":h?void 0:`true`,...U,style:{cursor:h?`not-allowed`:`pointer`},children:f(N)?``:T(N,`dd.mm.yyyy`)}),k?l(`span`,{className:e.a,children:k}):null]}),R&&I&&d(l(x,{position:I,onValue:V,date:N,max:S,min:C,onOpen:z,className:p},`elcrm-date-popup`),document.body)]})}b.displayName=`DateField`;var x=({date:e,onValue:t,position:n,max:r,min:d,className:f,onOpen:g})=>{let[_]=s.useState(()=>a());s.useEffect(()=>()=>o(_),[_]);let v=new Date,y=new Date(e);Number.isNaN(y.getTime())&&(y=new Date);let b={y:v.getFullYear(),d:v.getDate(),m:v.getMonth()+1},x={y:y.getFullYear(),d:y.getDate(),m:y.getMonth()+1},[S,T]=s.useState({y:x.y,m:x.m}),[E,D]=s.useState(`days`),[O,k]=s.useState(()=>h(x.y-5,d,r)),A=e=>{let t=e.getDay();return t===0&&(t=7),t-1},j=[`пн`,`вт`,`ср`,`чт`,`пт`,`сб`,`вс`],M=S.m-1,N=new Date(S.y,M),P=[];for(let e=0;e<A(N);e++)P.push(0);for(;N.getMonth()===M;)P.push(N.getDate()),N.setDate(N.getDate()+1);let F=()=>{g(!1)},I=()=>{W(S.m+1,S.y)},L=()=>{W(S.m-1,S.y)},R=()=>{E===`days`?L():E===`months`?W(S.m,S.y-1):k(e=>h(e-12,d,r))},z=()=>{E===`days`?I():E===`months`?W(S.m,S.y+1):k(e=>h(e+12,d,r))},B=e=>{e.stopPropagation(),k(h(S.y-5,d,r)),D(`years`)},V=e=>{p(S.y,e,d,r)&&(T({y:S.y,m:e}),D(`days`))},H=e=>{m(e,d,r)&&(T({y:e,m:S.m}),D(`days`))},U=e=>{t(S.y+`-`+w(2,S.m)+`-`+w(2,e)),F()},W=(e,t)=>{t=e>12?t+1:e<1?t-1:t,e=e>12?1:e<1?12:e,T({y:t,m:e})},G=e=>b.y===S.y&&b.m===S.m&&b.d===e?{"data-active":`true`}:{},K=e=>x.y===S.y&&x.m===S.m&&x.d===e?{"data-current":`true`}:{},q=e=>{let t=!0;return r&&r.getTime()<new Date(S.y,S.m-1,e).getTime()&&(t=!1),d&&d.getTime()>new Date(S.y,S.m-1,e).getTime()&&(t=!1),t},J=window.innerHeight-n.b<360?Math.max(8,n.y-360):n.b;J=Math.min(J,window.innerHeight-360-8),J=Math.max(8,J);let Y=window.innerWidth-n.x<270?n.x-246:n.x;return Y=Math.max(8,Math.min(Y,window.innerWidth-270-8)),u(c,{children:[l(`div`,{className:i.o,style:{zIndex:_},onClick:()=>F()}),u(`div`,{className:[i.c,f&&f+`-backdrop`].join(` `),style:{top:J+`px`,left:Y+`px`,zIndex:_+1},onClick:e=>e.stopPropagation(),children:[u(`s`,{children:[l(`i`,{onClick:e=>{e.stopPropagation(),R()},children:l(`svg`,{width:`16`,height:`16`,fill:`currentColor`,viewBox:`0 0 24 24`,xmlns:`http://www.w3.org/2000/svg`,children:l(`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`})})}),u(`h2`,{children:[l(`span`,{className:i.h,onClick:e=>{e.stopPropagation(),D(E===`years`?`months`:E===`months`?`days`:`months`)},title:E===`years`?`К списку месяцев`:E===`months`?`К календарю`:`Выбрать месяц`,children:C(S.m).name}),l(`span`,{className:i.y,onClick:e=>{e.stopPropagation(),E===`years`?D(`days`):B(e)},title:E===`years`?`К календарю`:`Выбрать год`,children:S.y})]}),l(`i`,{onClick:e=>{e.stopPropagation(),z()},children:l(`svg`,{width:`16`,height:`16`,fill:`currentColor`,viewBox:`0 0 24 24`,xmlns:`http://www.w3.org/2000/svg`,children:l(`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`})})})]}),E===`days`&&u(`div`,{"grid-calendar":``,role:`grid`,"aria-label":`Календарь`,children:[j.map((e,t)=>l(`p`,{role:`columnheader`,children:e},`v`+t)),P.map((e,t)=>l(`span`,{role:`gridcell`,children:e!==0&&q(e)?l(`b`,{role:`button`,tabIndex:0,"aria-label":`${e}`,...G(e),...K(e),"aria-selected":K(e)[`data-current`]?`true`:void 0,onClick:()=>U(e),onKeyDown:t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),U(e))},children:e}):l(`p`,{"aria-disabled":e===0?void 0:!0,...G(e),...K(e),children:e===0?``:e})},t))]}),E===`months`&&l(`div`,{"grid-month":``,role:`listbox`,"aria-label":`Месяц`,children:Array.from({length:12},(e,t)=>{let n=t+1,a=p(S.y,n,d,r),o=b.y===S.y&&b.m===n?{"data-active":`true`}:{},s=x.y===S.y&&x.m===n?{"data-current":`true`}:{};return l(`b`,{role:`option`,tabIndex:a?0:-1,"aria-selected":s[`data-current`]?`true`:`false`,"aria-disabled":a?void 0:!0,className:a?``:i.d,...o,...s,onClick:()=>a&&V(n),onKeyDown:e=>{a&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),V(n))},children:C(n).abc},n)})}),E===`years`&&l(`div`,{"grid-month":``,role:`listbox`,"aria-label":`Год`,children:Array.from({length:12},(e,t)=>{let n=O+t,a=m(n,d,r),o=b.y===n?{"data-active":`true`}:{},s=x.y===n?{"data-current":`true`}:{};return l(`b`,{role:`option`,tabIndex:a?0:-1,"aria-selected":s[`data-current`]?`true`:`false`,"aria-disabled":a?void 0:!0,className:a?``:i.d,...o,...s,onClick:()=>a&&H(n),onKeyDown:e=>{a&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),H(n))},children:n},n)})})]})]})},S={val:`01`,name:`—`,names:`—`,abc:`—`};function C(e){let t=typeof e==`number`?e:new Date(e).getMonth()+1;return(!Number.isFinite(t)||t<1||t>12)&&(t=new Date().getMonth()+1),{1:{val:`01`,name:`Январь`,names:`Января`,abc:`Янв`},2:{val:`02`,name:`Февраль`,names:`Февраля`,abc:`Февр`},3:{val:`03`,name:`Март`,names:`Марта`,abc:`Март`},4:{val:`04`,name:`Апрель`,names:`Апреля`,abc:`Апр`},5:{val:`05`,name:`Май`,names:`Мая`,abc:`Май`},6:{val:`06`,name:`Июнь`,names:`Июня`,abc:`Июнь`},7:{val:`07`,name:`Июль`,names:`Июля`,abc:`Июль`},8:{val:`08`,name:`Август`,names:`Августа`,abc:`Авг`},9:{val:`09`,name:`Сентябрь`,names:`Сентября`,abc:`Сент`},10:{val:`10`,name:`Октябрь`,names:`Октября`,abc:`Окт`},11:{val:`11`,name:`Ноябрь`,names:`Ноября`,abc:`Нояб`},12:{val:`12`,name:`Декабрь`,names:`Декабря`,abc:`Дек`}}[t]??S}function w(e,t){let n=t+``;for(;n.length<e;)n=`0`+n;return n}function T(e,t){let n,r;t===void 0?(r=String(e),n=new Date):(r=t,n=new Date(e)),Number.isNaN(n.getTime())&&(n=new Date);let i=r,a={yyyy:n.getFullYear(),yy:(``+n.getFullYear()).slice(-2),mm:(`0`+(n.getMonth()+1)).slice(-2),dd:(`0`+n.getDate()).slice(-2),HH:(`0`+n.getHours()).slice(-2),MM:(`0`+n.getMinutes()).slice(-2),SS:(`0`+n.getSeconds()).slice(-2),__:`  \xA0\xA0\xA0\xA0  `,_:`  \xA0\xA0  `};for(let e in a)i=i.replace(e,String(a[e]));return i}export{b as default};
+import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{createFieldEmit as r}from"./emit.js";import{isEmptyTextLike as i}from"./visibility.js";import{FormatDate as a,clampDateValue as o,isDateDisplayEmpty as s,isEditablePasteTarget as c,parseClipboardDate as l,toStoreDateString as u}from"./dateUtils.js";import d from"./DateCalendar.js";import f from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";import{createPortal as g}from"react-dom";function _({label:_=``,error:v,hidden:y=!1,className:b,placeholder:x,disabled:S=!1,onValue:C,max:w,min:T,form:E,icon:D,name:O=``,value:k,after:A=``,before:j=``}){let M=f.useCallback(e=>{if(e==null||typeof e==`string`&&i(e))return``;if(e instanceof Date)return Number.isNaN(e.getTime())?``:e;if(typeof e==`string`||typeof e==`number`){let t=new Date(e);return Number.isNaN(t.getTime())?``:e}return``},[]),{value:N}=n(E,O,k),[P,F]=f.useState(M(N)),I=f.useRef(null),[L,R]=f.useState(null),[z,B]=f.useState(!1),V=f.useCallback(()=>{let e=I.current;if(!e)return;let t=e.getBoundingClientRect();R({x:t.left,y:t.top,b:t.bottom})},[]);f.useEffect(()=>{if(!z)return;V();let e=()=>{V()};return window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[z,V]),f.useEffect(()=>{F(M(N))},[N,M]);let H=f.useCallback(e=>{F(e),r(E,O,C)(e,!0)},[E,O,C]);f.useEffect(()=>{if(!z||S)return;let e=``,t=t=>{let n=l(t);if(!n)return!1;let r=u(o(n,T,w));return r===e?!0:(e=r,H(r),B(!1),!0)},n=e=>{c(e.target)||t(e.clipboardData?.getData(`text/plain`)??``)&&(e.preventDefault(),e.stopPropagation())},r=e=>{(e.ctrlKey||e.metaKey)&&(e.key!==`v`&&e.key!==`V`||c(e.target)||navigator.clipboard?.readText&&(e.preventDefault(),navigator.clipboard.readText().then(e=>{t(e)})))};return document.addEventListener(`paste`,n,!0),window.addEventListener(`keydown`,r,!0),()=>{document.removeEventListener(`paste`,n,!0),window.removeEventListener(`keydown`,r,!0)}},[z,S,T,w,H]);let U=e=>{if(S)return;let t=e.currentTarget.getBoundingClientRect();R({x:t.left,y:t.top,b:t.bottom}),B(!0)},W={};x&&(W.placeholder=x);let G=N==null||N===``||typeof N==`string`&&i(N);return y&&G?m(p,{}):h(p,{children:[D?D():h(t,{type:`date`,label:_,error:v,element_blok:{className:[b||``]},element_input:{className:[e.w],props:{"data-disabled":S?`true`:void 0}},children:[j?m(`span`,{className:e.a,children:j}):null,m(`div`,{ref:I,onClick:U,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),U(e))},tabIndex:S?-1:0,role:`button`,"aria-haspopup":`dialog`,"aria-expanded":z,"aria-label":_||x||`Дата`,"data-edit":S?void 0:`true`,...W,style:{cursor:S?`not-allowed`:`pointer`},children:s(P)?``:a(P,`dd.mm.yyyy`)}),A?m(`span`,{className:e.a,children:A}):null]}),z&&L&&g(m(d,{position:L,onValue:H,date:P,max:w,min:T,onOpen:B,className:b},`elcrm-date-popup`),document.body)]})}_.displayName=`DateField`;export{_ as default};

package/dist/fields/DateCalendar.d.ts

@@ -0,0 +1,26 @@
+import { TDatePosition } from './dateUtils';
+/**
+ * Попап календаря {@link DateField} (портал в `document.body`, якорь при скролле).
+ * Не публичный API пакета.
+ */
+export type TDateCalendarProps = {
+    /** Текущая дата поля (пустое → сегодня в сетке, не в форме). */
+    date: Date | string | number;
+    /** Коммит `YYYY-MM-DD`. */
+    onValue: (value: string) => void;
+    /** Прямоугольник триггера для позиционирования. */
+    position: TDatePosition;
+    max?: Date;
+    min?: Date;
+    className?: string;
+    /** Закрытие попапа. */
+    onOpen: (open: boolean) => void;
+};
+/**
+ * Календарь: дни / месяцы / годы. z-index из общего стека оверлеев.
+ */
+declare function DateCalendar({ date, onValue, position, max, min, className, onOpen, }: TDateCalendarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DateCalendar {
+    var displayName: string;
+}
+export default DateCalendar;

package/dist/fields/DateCalendar.js

@@ -0,0 +1 @@
+import e from"../styles/Form.module.js";import{acquireOverlayZIndex as t,releaseOverlayZIndex as n}from"../overlayZ.js";import{FormatMonth as r,FormatNumber as i,clampYearPageStart as a,isMonthInRange as o,isYearInRange as s}from"./dateUtils.js";import c from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";function f({date:f,onValue:p,position:m,max:h,min:g,className:_,onOpen:v}){let[y]=c.useState(()=>t());c.useEffect(()=>()=>n(y),[y]);let b=new Date,x=new Date(f);Number.isNaN(x.getTime())&&(x=new Date);let S={y:b.getFullYear(),d:b.getDate(),m:b.getMonth()+1},C={y:x.getFullYear(),d:x.getDate(),m:x.getMonth()+1},[w,T]=c.useState({y:C.y,m:C.m}),[E,D]=c.useState(`days`),[O,k]=c.useState(()=>a(C.y-5,g,h)),A=e=>{let t=e.getDay();return t===0&&(t=7),t-1},j=[`пн`,`вт`,`ср`,`чт`,`пт`,`сб`,`вс`],M=w.m-1,N=new Date(w.y,M),P=[];for(let e=0;e<A(N);e++)P.push(0);for(;N.getMonth()===M;)P.push(N.getDate()),N.setDate(N.getDate()+1);let F=()=>{v(!1)},I=()=>{W(w.m+1,w.y)},L=()=>{W(w.m-1,w.y)},R=()=>{E===`days`?L():E===`months`?W(w.m,w.y-1):k(e=>a(e-12,g,h))},z=()=>{E===`days`?I():E===`months`?W(w.m,w.y+1):k(e=>a(e+12,g,h))},B=e=>{e.stopPropagation(),k(a(w.y-5,g,h)),D(`years`)},V=e=>{o(w.y,e,g,h)&&(T({y:w.y,m:e}),D(`days`))},H=e=>{s(e,g,h)&&(T({y:e,m:w.m}),D(`days`))},U=e=>{p(w.y+`-`+i(2,w.m)+`-`+i(2,e)),F()},W=(e,t)=>{t=e>12?t+1:e<1?t-1:t,e=e>12?1:e<1?12:e,T({y:t,m:e})},G=e=>S.y===w.y&&S.m===w.m&&S.d===e?{"data-active":`true`}:{},K=e=>C.y===w.y&&C.m===w.m&&C.d===e?{"data-current":`true`}:{},q=e=>{let t=!0;return h&&h.getTime()<new Date(w.y,w.m-1,e).getTime()&&(t=!1),g&&g.getTime()>new Date(w.y,w.m-1,e).getTime()&&(t=!1),t},J=window.innerHeight-m.b<360?Math.max(8,m.y-360):m.b;J=Math.min(J,window.innerHeight-360-8),J=Math.max(8,J);let Y=window.innerWidth-m.x<270?m.x-246:m.x;return Y=Math.max(8,Math.min(Y,window.innerWidth-270-8)),d(l,{children:[u(`div`,{className:e.o,style:{zIndex:y},onClick:()=>F()}),d(`div`,{className:[e.c,_&&_+`-backdrop`].join(` `),style:{top:J+`px`,left:Y+`px`,zIndex:y+1},onClick:e=>e.stopPropagation(),children:[d(`s`,{children:[u(`i`,{onClick:e=>{e.stopPropagation(),R()},children:u(`svg`,{width:`16`,height:`16`,fill:`currentColor`,viewBox:`0 0 24 24`,xmlns:`http://www.w3.org/2000/svg`,children:u(`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`})})}),d(`h2`,{children:[u(`span`,{className:e.h,onClick:e=>{e.stopPropagation(),D(E===`years`?`months`:E===`months`?`days`:`months`)},title:E===`years`?`К списку месяцев`:E===`months`?`К календарю`:`Выбрать месяц`,children:r(w.m).name}),u(`span`,{className:e.y,onClick:e=>{e.stopPropagation(),E===`years`?D(`days`):B(e)},title:E===`years`?`К календарю`:`Выбрать год`,children:w.y})]}),u(`i`,{onClick:e=>{e.stopPropagation(),z()},children:u(`svg`,{width:`16`,height:`16`,fill:`currentColor`,viewBox:`0 0 24 24`,xmlns:`http://www.w3.org/2000/svg`,children:u(`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`})})})]}),E===`days`&&d(`div`,{"grid-calendar":``,role:`grid`,"aria-label":`Календарь`,children:[j.map((e,t)=>u(`p`,{role:`columnheader`,children:e},`v`+t)),P.map((e,t)=>u(`span`,{role:`gridcell`,children:e!==0&&q(e)?u(`b`,{role:`button`,tabIndex:0,"aria-label":`${e}`,...G(e),...K(e),"aria-selected":K(e)[`data-current`]?`true`:void 0,onClick:()=>U(e),onKeyDown:t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),U(e))},children:e}):u(`p`,{"aria-disabled":e===0?void 0:!0,...G(e),...K(e),children:e===0?``:e})},t))]}),E===`months`&&u(`div`,{"grid-month":``,role:`listbox`,"aria-label":`Месяц`,children:Array.from({length:12},(t,n)=>{let i=n+1,a=o(w.y,i,g,h),s=S.y===w.y&&S.m===i?{"data-active":`true`}:{},c=C.y===w.y&&C.m===i?{"data-current":`true`}:{};return u(`b`,{role:`option`,tabIndex:a?0:-1,"aria-selected":c[`data-current`]?`true`:`false`,"aria-disabled":a?void 0:!0,className:a?``:e.d,...s,...c,onClick:()=>a&&V(i),onKeyDown:e=>{a&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),V(i))},children:r(i).abc},i)})}),E===`years`&&u(`div`,{"grid-month":``,role:`listbox`,"aria-label":`Год`,children:Array.from({length:12},(t,n)=>{let r=O+n,i=s(r,g,h),a=S.y===r?{"data-active":`true`}:{},o=C.y===r?{"data-current":`true`}:{};return u(`b`,{role:`option`,tabIndex:i?0:-1,"aria-selected":o[`data-current`]?`true`:`false`,"aria-disabled":i?void 0:!0,className:i?``:e.d,...a,...o,onClick:()=>i&&H(r),onKeyDown:e=>{i&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),H(r))},children:r},r)})})]})]})}f.displayName=`DateCalendar`;export{f as default};

package/dist/fields/Display.d.ts

@@ -1,17 +1,27 @@
 import { TInput } from './type';
 /**
- * DisplayField (Readonly) — только отображение значения в layout поля.
- * Не принимает ввод; удобно для превью / рассчитанных полей.
+ * Только показ значения (капсула как у String / Textarea, всегда `data-disabled`).
+ *
+ * **В форме:** любое; на экран идёт `format(value)` или `emptyText`.
+ *
+ * @example
+ * <DisplayField name="id" form={form} label="ID" format={(v) => `#${v}`} />
  */
 export type TDisplay = TInput & {
     /** Форматтер отображаемого текста */
     format?: (value: unknown) => string;
     emptyText?: string;
+    /**
+     * Многострочный вид (как TextareaField).
+     * По умолчанию — если в тексте есть переносы `\n`.
+     */
+    multiline?: boolean;
 };
-declare function DisplayField({ value, form, name, placeholder, label, error, hidden, className, after, before, format, emptyText, size, }: TDisplay): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Readonly-поле. Не пишет в форму при клике.
+ */
+declare function DisplayField({ value, form, name, placeholder, label, error, hidden, disabled, className, after, before, format, emptyText, size, multiline, }: TDisplay): import("react/jsx-runtime").JSX.Element | null;
 declare namespace DisplayField {
     var displayName: string;
 }
-/** @deprecated используйте `DisplayField` */
-export { DisplayField as ReadonlyField };
 export default DisplayField;

package/dist/fields/Display.js

@@ -1 +1,2 @@
-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"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o(e){if(e==null)return``;if(typeof e==`string`)return e;if(typeof e==`number`||typeof e==`boolean`)return String(e);if(Array.isArray(e))return e.map(String).join(`, `);try{return JSON.stringify(e)}catch{return String(e)}}function s({value:s=``,form:c,name:l=``,placeholder:u=``,label:d=``,error:f=``,hidden:p=!1,className:m=``,after:h=``,before:g=``,format:_=o,emptyText:v,size:y=`md`}){let{value:b}=n(c,l,s),x=_(b),S=!x.trim(),C=S?v||u||`—`:x;return p&&r(b)?null:a(t,{type:`display`,label:d,error:f,size:y,element_blok:{className:[m||``]},element_input:{className:[e.w,e.d],props:{"data-readonly":`true`}},children:[g?i(`span`,{className:e.a,children:g}):null,i(`div`,{className:S?e.z:void 0,"aria-label":d||`Значение`,children:C}),h?i(`span`,{className:e.a,children:h}):null]})}s.displayName=`DisplayField`;export{s 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"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o(e){if(e==null)return``;if(typeof e==`string`)return e;if(typeof e==`number`||typeof e==`boolean`)return String(e);if(Array.isArray(e))return e.map(String).join(`, `);try{return JSON.stringify(e)}catch{return String(e)}}function s({value:s=``,form:c,name:l=``,placeholder:u=``,label:d=``,error:f=``,hidden:p=!1,disabled:m=!1,className:h=``,after:g=``,before:_=``,format:v=o,emptyText:y,size:b=`m`,multiline:x}){let{value:S}=n(c,l,s),C=v(S),w=!C.trim(),T=w?y||u||`—`:C,E=x===!0||x!==!1&&T.includes(`
+`);return p&&r(S)?null:a(t,{type:`display`,label:d,error:f,size:b,element_blok:{className:[h||``]},element_input:{className:[E?e.n:e.w,e.d],props:{"data-readonly":`true`,"data-disabled":m?`true`:void 0,"data-multiline":E?`true`:void 0}},children:[_?i(`span`,{className:e.a,children:_}):null,i(`div`,{className:w?e.z:void 0,"aria-label":d||`Значение`,"aria-readonly":`true`,"aria-disabled":m?!0:void 0,children:T}),g?i(`span`,{className:e.a,children:g}):null]})}s.displayName=`DisplayField`;export{s as default};

package/dist/fields/DragDrop.d.ts

@@ -1,5 +1,17 @@
 import { TInput } from './type';
-/** DragDropField — зона перетаскивания файлов (+ клик для выбора). */
+/** Раскладка зоны: default · fill (100% родителя) · overlay (прозрачная поверх превью) */
+export type TDragDropLayout = "default" | "fill" | "overlay";
+/**
+ * Зона drag-and-drop (+ клик = тот же выбор файла).
+ *
+ * **В форме:** как {@link FileField} (`keepFile` / мета).
+ *
+ * **Элементы:** пунктирная зона `.z` внутри прозрачной капсулы; список файлов под ней.
+ * `layout`: `default` | `fill` | `overlay`.
+ *
+ * @example
+ * <DragDropField name="files" form={form} multiple maxFiles={5} hint="Перетащите сюда" />
+ */
 export type TDragDrop = TInput & {
     accept?: string;
     multiple?: boolean;
@@ -16,11 +28,22 @@ export type TDragDrop = TInput & {
     hint?: string;
     /** Дописывать к уже выбранным при multiple (по умолчанию true) */
     append?: boolean;
+    /**
+     * Раскладка без локальных !important-хаков.
+     * - `fill` — высота 100% контейнера
+     * - `overlay` — как fill + прозрачный фон (превью снизу)
+     */
+    layout?: TDragDropLayout;
+    /** CSS aspect-ratio на зоне (число или строка, напр. `1` / `"16/9"`) */
+    aspectRatio?: string | number;
+    /** Скрыть список файлов и «Очистить всё» (часто с overlay) */
+    hideList?: boolean;
 };
-declare function DragDropField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, accept, multiple, maxSize, maxFiles, keepFile, hint, append, }: TDragDrop): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Drop-зона. Капсула без рамки (`padding: 0`), рамка у внутренней зоны.
+ */
+declare function DragDropField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, accept, multiple, maxSize, maxFiles, keepFile, hint, append, layout, aspectRatio, hideList, }: TDragDrop): import("react/jsx-runtime").JSX.Element | null;
 declare namespace DragDropField {
     var displayName: string;
 }
-/** Алиас на случай опечатки «DragonDrop» */
-export { DragDropField as DragonDropField };
 export default DragDropField;

package/dist/fields/DragDrop.js

@@ -1 +1 @@
-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/File.module.js";import i from"../styles/Drag.module.js";import a from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";function c(e){return{name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}}function l(e){return typeof File<`u`&&e instanceof File?c(e):e}function u(e){return e?Array.isArray(e)?e:typeof File<`u`&&e instanceof File||typeof e==`object`&&e&&`name`in e?[e]:[]:[]}function d(e){return e<1024?`${e} Б`:e<1024*1024?`${(e/1024).toFixed(1)} КБ`:`${(e/(1024*1024)).toFixed(1)} МБ`}function f(e,t){if(!t||!t.trim())return!0;let n=t.split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);if(n.length===0)return!0;let r=e.name.toLowerCase(),i=(e.type||``).toLowerCase();return n.some(e=>{if(e.startsWith(`.`))return r.endsWith(e);if(e.endsWith(`/*`)){let t=e.slice(0,-1);return i.startsWith(t)}return i===e})}function p(e){return`${e.name}:${e.size}`}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=``,accept:D,multiple:O=!0,maxSize:k,maxFiles:A,keepFile:j=!0,hint:M,append:N=!0}){let{value:P}=n(h,v,m),F=u(P),I=!C,L=a.useRef(null),[R,z]=a.useState(``),[B,V]=a.useState(!1),H=a.useRef(0),U=e=>{let t={value:e,name:v};h&&v&&h.setValue(t),g&&g!==h?.onValue&&g(t)},W=e=>{if(e.length===0)return;let t=e.filter(e=>!f(e,D));if(t.length>0){z(`Тип файла не подходит: ${t.map(e=>e.name).join(`, `)}`);return}if(k!==void 0){let t=e.find(e=>e.size>k);if(t){z(`Файл «${t.name}» больше ${d(k)}`);return}}let n;if(!O)n=[e[0]];else if(N&&F.length>0){let t=new Set(F.map(e=>p(e))),r=e.filter(e=>!t.has(p(e))),i=F.filter(e=>typeof File<`u`&&e instanceof File);n=j&&i.length===F.length?[...i,...r]:[...e]}else n=e;if(A!==void 0&&n.length>A){z(`Не больше ${A} файлов`);return}z(``);let r=j?O?n:n[0]:O?n.map(c):c(n[0]);U(r),_?.({value:r,name:v})},G=()=>{I&&(U(O?[]:null),L.current&&(L.current.value=``),z(``))},K=e=>{if(!I)return;if(!O){G();return}let t=F.filter((t,n)=>n!==e);U(j?t:t.map(l)),L.current&&(L.current.value=``)},q=e=>{e.preventDefault(),e.stopPropagation(),I&&(H.current+=1,V(!0))},J=e=>{e.preventDefault(),e.stopPropagation(),--H.current,H.current<=0&&(H.current=0,V(!1))},Y=e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect=I?`copy`:`none`)},X=e=>{e.preventDefault(),e.stopPropagation(),H.current=0,V(!1),I&&W(Array.from(e.dataTransfer.files||[]))},Z=F.length===0;if(S&&Z)return null;let Q=x||R,$=M||y;return s(t,{type:`dragdrop`,label:b,error:Q,element_blok:{className:[w||``]},element_input:{className:[i.r],props:{"data-disabled":C||!I?`true`:void 0,"data-dragging":B?`true`:void 0}},children:[E?o(`span`,{className:e.a,children:E}):null,s(`div`,{className:i.i,children:[o(`input`,{ref:L,type:`file`,className:r.p,accept:D,multiple:O,disabled:C||!I,"aria-label":b||y||`Файлы`,onChange:e=>{W(Array.from(e.target.files||[])),e.target.value=``}}),s(`button`,{type:`button`,className:i.z,disabled:!I,"data-dragging":B?`true`:void 0,onClick:()=>L.current?.click(),onDragEnter:q,onDragLeave:J,onDragOver:Y,onDrop:X,children:[o(`span`,{className:i.h,children:$}),D?o(`span`,{className:i.a,children:D}):null]}),Z?null:o(`ul`,{className:i.l,children:F.map((e,t)=>s(`li`,{className:i.t,children:[s(`div`,{className:i.m,children:[o(`span`,{className:i.n,title:e.name,children:e.name}),o(`span`,{className:i.s,children:d(e.size)})]}),I?o(`button`,{type:`button`,className:i.d,"aria-label":`Удалить ${e.name}`,onClick:()=>K(t),children:`×`}):null]},`${e.name}-${t}`))}),!Z&&I?o(`button`,{type:`button`,className:i.c,onClick:G,children:`Очистить всё`}):null]}),T?o(`span`,{className:e.a,children:T}):null]})}m.displayName=`DragDropField`;export{m as default};
+import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{createFieldEmit as r}from"./emit.js";import i from"../styles/File.module.js";import a from"../styles/Drag.module.js";import o from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l(e){return{name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}}function u(e){return typeof File<`u`&&e instanceof File?l(e):e}function d(e){return e?Array.isArray(e)?e:typeof File<`u`&&e instanceof File||typeof e==`object`&&e&&`name`in e?[e]:[]:[]}function f(e){return e<1024?`${e} Б`:e<1024*1024?`${(e/1024).toFixed(1)} КБ`:`${(e/(1024*1024)).toFixed(1)} МБ`}function p(e,t){if(!t||!t.trim())return!0;let n=t.split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);if(n.length===0)return!0;let r=e.name.toLowerCase(),i=(e.type||``).toLowerCase();return n.some(e=>{if(e.startsWith(`.`))return r.endsWith(e);if(e.endsWith(`/*`)){let t=e.slice(0,-1);return i.startsWith(t)}return i===e})}function m(e){return`${e.name}:${e.size}`}function h({value:h,form:g,onValue:_,onBlur:v,name:y=``,placeholder:b=`Перетащите файлы сюда или нажмите`,label:x=``,error:S=``,hidden:C=!1,disabled:w=!1,className:T=``,after:E=``,before:D=``,accept:O,multiple:k=!0,maxSize:A,maxFiles:j,keepFile:M=!0,hint:N,append:P=!0,layout:F=`default`,aspectRatio:I,hideList:L=!1}){let{value:R}=n(g,y,h),z=d(R),B=!w,V=o.useRef(null),[H,U]=o.useState(``),[W,G]=o.useState(!1),K=o.useRef(0),q=e=>{r(g,y,_)(e,!0)},J=e=>{if(e.length===0)return;let t=e.filter(e=>!p(e,O));if(t.length>0){U(`Тип файла не подходит: ${t.map(e=>e.name).join(`, `)}`);return}if(A!==void 0){let t=e.find(e=>e.size>A);if(t){U(`Файл «${t.name}» больше ${f(A)}`);return}}let n;if(!k)n=[e[0]];else if(P&&z.length>0){let t=new Set(z.map(e=>m(e))),r=e.filter(e=>!t.has(m(e))),i=z.filter(e=>typeof File<`u`&&e instanceof File);n=M&&i.length===z.length?[...i,...r]:[...e]}else n=e;if(j!==void 0&&n.length>j){U(`Не больше ${j} файлов`);return}U(``);let r=M?k?n:n[0]:k?n.map(l):l(n[0]);q(r),v?.({value:r,name:y})},Y=()=>{B&&(q(k?[]:null),V.current&&(V.current.value=``),U(``))},X=e=>{if(!B)return;if(!k){Y();return}let t=z.filter((t,n)=>n!==e);q(M?t:t.map(u)),V.current&&(V.current.value=``)},ee=e=>{e.preventDefault(),e.stopPropagation(),B&&(K.current+=1,G(!0))},te=e=>{e.preventDefault(),e.stopPropagation(),--K.current,K.current<=0&&(K.current=0,G(!1))},ne=e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect=B?`copy`:`none`)},re=e=>{e.preventDefault(),e.stopPropagation(),K.current=0,G(!1),B&&J(Array.from(e.dataTransfer.files||[]))},Z=z.length===0;if(C&&Z)return null;let ie=S||H,ae=N||b,Q=I==null?void 0:typeof I==`number`?String(I):I,$=!L&&!Z;return c(t,{type:`dragdrop`,label:x,error:ie,element_blok:{className:[T||``]},element_input:{className:[a.r],props:{"data-disabled":w||!B?`true`:void 0,"data-dragging":W?`true`:void 0,"data-layout":F===`default`?void 0:F,style:Q?{"--field-drag-aspect":Q}:void 0}},children:[D?s(`span`,{className:e.a,children:D}):null,c(`div`,{className:a.i,"data-layout":F===`default`?void 0:F,style:Q?{aspectRatio:Q}:void 0,children:[s(`input`,{ref:V,type:`file`,className:i.p,accept:O,multiple:k,disabled:w||!B,"aria-label":x||b||`Файлы`,onChange:e=>{J(Array.from(e.target.files||[])),e.target.value=``}}),c(`button`,{type:`button`,className:a.z,disabled:!B,"data-dragging":W?`true`:void 0,"data-layout":F===`default`?void 0:F,onClick:()=>V.current?.click(),onDragEnter:ee,onDragLeave:te,onDragOver:ne,onDrop:re,children:[s(`span`,{className:a.h,children:ae}),O&&F===`default`?s(`span`,{className:a.a,children:O}):null]}),$?s(`ul`,{className:a.l,children:z.map((e,t)=>c(`li`,{className:a.t,children:[c(`div`,{className:a.m,children:[s(`span`,{className:a.n,title:e.name,children:e.name}),s(`span`,{className:a.s,children:f(e.size)})]}),B?s(`button`,{type:`button`,className:a.d,"aria-label":`Удалить ${e.name}`,onClick:()=>X(t),children:`×`}):null]},`${e.name}-${t}`))}):null,$&&B?s(`button`,{type:`button`,className:a.c,onClick:Y,children:`Очистить всё`}):null]}),E?s(`span`,{className:e.a,children:E}):null]})}h.displayName=`DragDropField`;export{h as default};

package/dist/fields/Email.d.ts

@@ -1,8 +1,23 @@
 import { default as React } from 'react';
 import { TInput } from './type';
-/** EmailField — нативный input type=email (автозаполнение, мобильная клавиатура). */
-export type TEmail = TInput;
-declare function EmailField(props: TEmail): import("react/jsx-runtime").JSX.Element;
+/**
+ * Email. Нативный `<input type="email">`.
+ *
+ * **В форме:** `string`.
+ *
+ * @property validate — проверка формата на blur (по умолчанию `true`); ошибка «Некорректный email».
+ *
+ * @example
+ * <EmailField name="email" form={form} label="Почта" autoComplete="email" />
+ */
+export type TEmail = TInput & {
+    /** Проверка формата при blur (по умолчанию `true`) */
+    validate?: boolean;
+};
+/**
+ * Поле email. Справа при ошибке валидации — бейдж, если не задан `after`.
+ */
+declare function EmailField({ validate, error, onBlur, onValue, after, ...rest }: TEmail): import("react/jsx-runtime").JSX.Element;
 declare namespace EmailField {
     var displayName: string;
 }

package/dist/fields/Email.js

@@ -1 +1 @@
-import e from"./NativeTextField.js";import t from"react";import{jsx as n}from"react/jsx-runtime";function r(t){return n(e,{...t,fieldType:`email`,inputType:`email`,inputmode:t.inputmode??`email`,autoComplete:t.autoComplete??`email`,defaultAriaLabel:`Email`})}r.displayName=`EmailField`;var i=t.memo(r);export{i as default};
+import e from"./NativeTextField.js";import{validateEmail as t}from"./emailUtils.js";import n from"react";import{jsx as r}from"react/jsx-runtime";function i(){return r(`span`,{"aria-hidden":!0,style:{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,width:20,height:20,borderRadius:`50%`,background:`var(--field-error-color)`,color:`#fff`,fontSize:12,fontWeight:700,lineHeight:1,flexShrink:0},children:`i`})}function a({validate:a=!0,error:o=``,onBlur:s,onValue:c,after:l,...u}){let[d,f]=n.useState(``),p=o||d,m=l!=null&&l!==``,h=e=>{a&&d&&f(``),c?.(e)},g=e=>{a&&f(t(e.value)),s?.(e)};return r(e,{...u,error:p,fieldType:`email`,inputType:`email`,inputmode:u.inputmode??`email`,autoComplete:u.autoComplete??`email`,defaultAriaLabel:`Email`,onValue:h,onBlur:g,after:m?l:p?r(i,{}):void 0})}a.displayName=`EmailField`;var o=n.memo(a);export{o as default};

package/dist/fields/FieldGroup.d.ts

@@ -0,0 +1,127 @@
+import { default as React, HTMLAttributes } from 'react';
+import { UseFormApi } from '../hooks/use';
+import { TInput, TValue } from './type';
+/**
+ * Тип поля в группе — соответствует компоненту `*Field`.
+ * `string` → StringField, `number` → NumberField, …
+ */
+export type FieldGroupFieldKind = "string" | "password" | "email" | "url" | "phone" | "number" | "money" | "percent" | "mask" | "date" | "time" | "textarea" | "select" | "radio" | "tabs" | "check" | "color" | "tags" | "rating" | "code" | "card" | "file" | "drag" | "rich" | "display" | "hidden" | "range" | "options" | "modal";
+/** Пропы, которые группа задаёт сама (item их не дублирует) */
+type GroupOwned = "form" | "onValue" | "onBlur";
+/**
+ * Частые пропы конкретных полей (без `[key: string]` — сохраняем типы `field`/`name`).
+ * Редкие пропы можно передать через assertion или расширить тип.
+ */
+type FieldGroupItemExtras = {
+    /** Select / Radio / Tabs / Options */
+    options?: unknown;
+    /** Select: порядок id */
+    order?: number[];
+    /** Mask: шаблон `_` */
+    format?: string;
+    /** Code: число ячеек */
+    length?: number;
+    /** Code: визуальные группы */
+    group?: number;
+    cellSize?: number | string;
+    numeric?: boolean;
+    /** Card / Email: проверка на blur */
+    validate?: boolean;
+    /** Money: множитель записи в форму */
+    course?: number;
+    isClear?: boolean;
+    decimals?: number;
+    min?: number | string | Date;
+    max?: number | string | Date;
+    step?: number;
+    variant?: string;
+    inline?: boolean;
+    equal?: boolean;
+    maxTags?: number;
+    separators?: string[];
+    allowClear?: boolean;
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    keepFile?: boolean;
+    hint?: string;
+    append?: boolean;
+    layout?: string;
+    aspectRatio?: string | number;
+    hideList?: boolean;
+    toolbar?: boolean;
+    colors?: string[];
+    alpha?: boolean;
+    emptyText?: string;
+    /** Options / Modal: `"module.name"` */
+    modal?: string;
+    inlinePalette?: boolean;
+    outFormat?: "array" | "string" | "object";
+    separator?: string;
+    picker?: boolean;
+    presets?: string[];
+    align?: "start" | "center" | "top" | "bottom";
+    showFocusRing?: boolean;
+    native?: boolean;
+    eyes?: [React.ReactNode?, React.ReactNode?];
+    autoComplete?: string;
+    inputType?: TInput["inputType"];
+};
+/**
+ * Элемент группы: обязательны `field` + `name`,
+ * остальное — пропы конкретного поля (`label`, `placeholder`, `options`, …).
+ */
+export type FieldGroupItem = {
+    /** Какое поле рендерить */
+    field: FieldGroupFieldKind;
+    /** Имя в form / onValue */
+    name: string;
+} & Partial<Omit<TInput, GroupOwned | "name">> & FieldGroupItemExtras;
+/**
+ * Несколько полей одним списком `items`.
+ *
+ * **Элементы:** `div[role=group]` → внутри обычные `*Field`.
+ * Общие `form` / `disabled` / `size` / `errors` на группе; у item — `field` + `name` + свои пропы.
+ *
+ * `field`: `string` → StringField, `select` → SelectField, `card` → CardField, …
+ *
+ * @example
+ * <FieldGroup form={form} items={[
+ *   { field: "string", name: "login", label: "Логин", native: true },
+ *   { field: "email", name: "email", label: "Почта" },
+ * ]} />
+ */
+export type FieldGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    items: FieldGroupItem[];
+    /** Общая форма для всех items */
+    form?: UseFormApi;
+    /** Общий onValue (если у item нет своего) */
+    onValue?: (data: TValue) => void | Promise<void>;
+    /** Общий onBlur */
+    onBlur?: (data: TValue) => void | Promise<void>;
+    /** disabled на всю группу (item.disabled перекрывает) */
+    disabled?: boolean;
+    /** размер по умолчанию */
+    size?: TInput["size"];
+    /**
+     * Ошибки по имени поля — удобно снаружи:
+     * `errors={{ email: "…", card: "…" }}`
+     */
+    errors?: Record<string, string>;
+    /**
+     * Значения без form (controlled map).
+     * Если есть `form` — обычно не нужно.
+     */
+    values?: Record<string, unknown>;
+    /** Переопределить `--field-group-gap` (число → px) */
+    gap?: number | string;
+};
+/**
+ * Группа полей. Не капсула — только раскладка и прокидывание `form`.
+ */
+declare function FieldGroup({ items, form, onValue, onBlur, disabled, size, errors, values, gap, className, style, ...rest }: FieldGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace FieldGroup {
+    var displayName: string;
+}
+export default FieldGroup;

package/dist/fields/FieldGroup.js

@@ -0,0 +1 @@
+import e from"./Range.js";import t from"./Money.js";import n from"./Mask.js";import r from"./Date.js";import i from"./Time.js";import a from"./Textarea.js";import o from"./Phone.js";import s from"./Input.js";import c from"./Numeric.js";import l from"./Options.js";import u from"./Select.js";import d from"./Modal.js";import f from"./Password.js";import p from"./Check.js";import m from"./Color.js";import h from"./Email.js";import g from"./Card.js";import _ from"./Url.js";import v from"./Percent.js";import y from"./Radio.js";import b from"./Tags.js";import x from"./Rating.js";import S from"./Code.js";import C from"./Tabs.js";import w from"./File.js";import T from"./DragDrop.js";import E from"./RichText.js";import D from"./Hidden.js";import O from"./Display.js";import k from"../styles/FieldGroup.module.js";import"react";import{jsx as A}from"react/jsx-runtime";var j=e=>e,M={string:j(s),password:j(f),email:j(h),url:j(_),phone:j(o),number:j(c),money:j(t),percent:j(v),mask:j(n),date:j(r),time:j(i),textarea:j(a),select:j(u),radio:j(y),tabs:j(C),check:j(p),color:j(m),tags:j(b),rating:j(x),code:j(S),card:j(g),file:j(w),drag:j(T),rich:j(E),display:j(O),hidden:j(D),range:j(e),options:j(l),modal:j(d)};function N({items:e,form:t,onValue:n,onBlur:r,disabled:i=!1,size:a,errors:o,values:s,gap:c,className:l,style:u,...d}){let f=c===void 0?u:{...u,"--field-group-gap":typeof c==`number`?`${c}px`:c};return A(`div`,{className:[k.r,l].filter(Boolean).join(` `),role:`group`,style:f,...d,children:e.map(e=>{let{field:c,name:l,disabled:u,size:d,error:f,value:p,...m}=e,h=M[c];if(!h)return null;let g=p===void 0?s?s[l]:void 0:p;return A(h,{name:l,form:t,onValue:n,onBlur:r,disabled:u??i,size:d??a,error:f??o?.[l]??``,...g===void 0?{}:{value:g},...m},l)})})}N.displayName=`FieldGroup`;export{N as default};

package/dist/fields/File.d.ts

@@ -1,11 +1,21 @@
 import { TInput } from './type';
-/** Метаданные выбранного файла (File в форме сериализовать нельзя надёжно). */
+/** Метаданные файла в форме, если не храните сам `File` (`keepFile={false}`). */
 export type TFileMeta = {
     name: string;
     size: number;
     type: string;
     lastModified: number;
 };
+/**
+ * Выбор файла(ов) кнопкой в капсуле.
+ *
+ * **В форме:** `File` / `File[]` при `keepFile`, иначе {@link TFileMeta} / массив меты.
+ *
+ * **Элементы:** кнопка «Выбрать» + имя/размер + крестик очистки.
+ *
+ * @example
+ * <FileField name="doc" form={form} label="Файл" accept=".pdf" maxSize={5_000_000} />
+ */
 export type TFile = TInput & {
     accept?: string;
     multiple?: boolean;
@@ -17,6 +27,9 @@ export type TFile = TInput & {
      */
     keepFile?: boolean;
 };
+/**
+ * Поле файла. Для drag-and-drop зоны смотрите {@link DragDropField}.
+ */
 declare function FileField({ value, form, onValue, onBlur: onBlurField, name, placeholder, label, error, hidden, disabled, className, after, before, accept, multiple, maxSize, keepFile, }: TFile): import("react/jsx-runtime").JSX.Element | null;
 declare namespace FileField {
     var displayName: string;

package/dist/fields/File.js

@@ -1 +1 @@
-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/File.module.js";import i from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s(e){return{name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}}function c(e){return e?Array.isArray(e)?e:typeof File<`u`&&e instanceof File||typeof e==`object`&&e&&`name`in e?[e]:[]:[]}function l(e){return e<1024?`${e} Б`:e<1024*1024?`${(e/1024).toFixed(1)} КБ`:`${(e/(1024*1024)).toFixed(1)} МБ`}function u({value:u,form:d,onValue:f,onBlur:p,name:m=``,placeholder:h=`Выберите файл`,label:g=``,error:_=``,hidden:v=!1,disabled:y=!1,className:b=``,after:x=``,before:S=``,accept:C,multiple:w=!1,maxSize:T,keepFile:E=!0}){let{value:D}=n(d,m,u),O=c(D),k=!y,A=i.useRef(null),[j,M]=i.useState(``),N=e=>{let t={value:e,name:m};d&&m&&d.setValue(t),f&&f!==d?.onValue&&f(t)},P=e=>{if(!e||e.length===0)return;let t=Array.from(e);if(T!==void 0){let e=t.find(e=>e.size>T);if(e){M(`Файл «${e.name}» больше ${l(T)}`);return}}M(``);let n=E?w?t:t[0]:w?t.map(s):s(t[0]);N(n),p?.({value:n,name:m})},F=()=>{k&&(N(w?[]:null),A.current&&(A.current.value=``),M(``))},I=O.length===0;return v&&I?null:o(t,{type:`file`,label:g,error:_||j,element_blok:{className:[b||``]},element_input:{className:[r.r],props:{"data-disabled":y||!k?`true`:void 0}},children:[S?a(`span`,{className:e.a,children:S}):null,o(`div`,{className:r.n,children:[a(`input`,{ref:A,type:`file`,className:r.p,accept:C,multiple:w,disabled:y||!k,"aria-label":g||h||`Файл`,onChange:e=>P(e.target.files)}),a(`button`,{type:`button`,className:r.b,disabled:!k,onClick:()=>A.current?.click(),children:h}),a(`div`,{className:r.l,children:I?a(`span`,{className:r.e,children:`Нет файла`}):O.map((e,t)=>o(`span`,{className:r.t,children:[a(`span`,{className:r.m,children:e.name}),a(`span`,{className:r.z,children:l(e.size)})]},`${e.name}-${t}`))}),!I&&k?a(`button`,{type:`button`,className:r.c,"aria-label":`Очистить`,onClick:F,children:`×`}):null]}),x?a(`span`,{className:e.a,children:x}):null]})}u.displayName=`FileField`;export{u as default};
+import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{createFieldEmit as r}from"./emit.js";import i from"../styles/File.module.js";import a from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";function c(e){return{name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}}function l(e){return e?Array.isArray(e)?e:typeof File<`u`&&e instanceof File||typeof e==`object`&&e&&`name`in e?[e]:[]:[]}function u(e){return e<1024?`${e} Б`:e<1024*1024?`${(e/1024).toFixed(1)} КБ`:`${(e/(1024*1024)).toFixed(1)} МБ`}function d({value:d,form:f,onValue:p,onBlur:m,name:h=``,placeholder:g=`Выберите файл`,label:_=``,error:v=``,hidden:y=!1,disabled:b=!1,className:x=``,after:S=``,before:C=``,accept:w,multiple:T=!1,maxSize:E,keepFile:D=!0}){let{value:O}=n(f,h,d),k=l(O),A=!b,j=a.useRef(null),[M,N]=a.useState(``),P=e=>{r(f,h,p)(e,!0)},F=e=>{if(!e||e.length===0)return;let t=Array.from(e);if(E!==void 0){let e=t.find(e=>e.size>E);if(e){N(`Файл «${e.name}» больше ${u(E)}`);return}}N(``);let n=D?T?t:t[0]:T?t.map(c):c(t[0]);P(n),m?.({value:n,name:h})},I=()=>{A&&(P(T?[]:null),j.current&&(j.current.value=``),N(``))},L=k.length===0;return y&&L?null:s(t,{type:`file`,label:_,error:v||M,element_blok:{className:[x||``]},element_input:{className:[i.r],props:{"data-disabled":b||!A?`true`:void 0}},children:[C?o(`span`,{className:e.a,children:C}):null,s(`div`,{className:i.n,children:[o(`input`,{ref:j,type:`file`,className:i.p,accept:w,multiple:T,disabled:b||!A,"aria-label":_||g||`Файл`,onChange:e=>F(e.target.files)}),o(`button`,{type:`button`,className:i.b,disabled:!A,onClick:()=>j.current?.click(),children:g}),o(`div`,{className:i.l,children:L?o(`span`,{className:i.e,children:`Нет файла`}):k.map((e,t)=>s(`span`,{className:i.t,children:[o(`span`,{className:i.m,children:e.name}),o(`span`,{className:i.z,children:u(e.size)})]},`${e.name}-${t}`))}),!L&&A?o(`button`,{type:`button`,className:i.c,"aria-label":`Очистить`,onClick:I,children:`×`}):null]}),S?o(`span`,{className:e.a,children:S}):null]})}d.displayName=`FileField`;export{d as default};

package/dist/fields/Hidden.d.ts

@@ -1,9 +1,14 @@
 import { TInput } from './type';
 /**
- * HiddenField — значение в форме без UI.
- * Рендерит нативный `<input type="hidden">` для submit обычных форм.
+ * Значение в форме без видимого UI.
+ *
+ * **Элементы:** только `<input type="hidden">` (для нативного submit).
+ * Пропы: `value`, `form`, `onValue`, `name`, `id`, `hidden`.
  */
 export type THidden = Pick<TInput, "value" | "form" | "onValue" | "name" | "id" | "hidden">;
+/**
+ * Скрытое поле. `hidden` на этом компоненте полностью убирает input.
+ */
 declare function HiddenField({ value, form, onValue, name, id, hidden, }: THidden): import("react/jsx-runtime").JSX.Element | null;
 declare namespace HiddenField {
     var displayName: string;

package/dist/fields/Hidden.js

@@ -1 +1 @@
-import{useFormFieldState as e}from"../hooks/use.js";import t from"react";import{jsx as n}from"react/jsx-runtime";function r({value:r=``,form:i,onValue:a,name:o=``,id:s,hidden:c=!1}){let{value:l}=e(i,o,r);if(t.useEffect(()=>{if(!i||!o||i.getValue(o)!==void 0)return;let e={value:l,name:o};i.onValue(e),a&&a!==i.onValue&&a(e)},[i,o,l,a]),c)return null;let u=l==null?``:typeof l==`string`||typeof l==`number`||typeof l==`boolean`?String(l):JSON.stringify(l);return n(`input`,{type:`hidden`,id:s,name:o||void 0,value:u,readOnly:!0,"data-field":`hidden`,"aria-hidden":!0})}r.displayName=`HiddenField`;export{r as default};
+import{useFormFieldState as e}from"../hooks/use.js";import{createFieldEmit as t}from"./emit.js";import n from"react";import{jsx as r}from"react/jsx-runtime";function i({value:i=``,form:a,onValue:o,name:s=``,id:c,hidden:l=!1}){let{value:u}=e(a,s,i);if(n.useEffect(()=>{!a||!s||a.getValue(s)===void 0&&t(a,s,o)(u)},[a,s,u,o]),l)return null;let d=u==null?``:typeof u==`string`||typeof u==`number`||typeof u==`boolean`?String(u):JSON.stringify(u);return r(`input`,{type:`hidden`,id:c,name:s||void 0,value:d,readOnly:!0,"data-field":`hidden`,"aria-hidden":!0})}i.displayName=`HiddenField`;export{i as default};

package/dist/fields/Input.d.ts

@@ -1,13 +1,18 @@
 import { default as React } from 'react';
 import { TInput } from './type';
 /**
- * StringField — текстовое поле (по умолчанию contentEditable).
+ * Однострочный текст.
  *
- * **Автозаполнение (логин + пароль):** менеджеры паролей опираются на нативные `<input>`.
- * У `contentEditable` автозаполнение **не работает** как у поля логина.
- * Включите **`native`** и задайте **`autoComplete="username"`** (и оберните поля в `<form>`, при необходимости).
+ * **В форме:** `string`.
  *
- * @param hidden — при true скрывает поле, только если значение пустое
+ * **Элементы:** подпись `label` → капсула → слоты `before` / `after`.
+ * Ввод по умолчанию — `contentEditable`; `native` — настоящий `<input>`
+ * (нужен для автозаполнения: `autoComplete="username"` + обёртка `<form>`).
+ *
+ * Общие пропы — {@link TInput}.
+ *
+ * @example
+ * <StringField name="login" form={form} label="Логин" native autoComplete="username" />
  */
 declare function StringField({ value, form, onValue, name, placeholder, label, hidden, disabled, onBlur: onBlurField, className, after, before, error, inputmode, maxLength, spellCheck, native, autoComplete, inputType, id, size, }: TInput): import("react/jsx-runtime").JSX.Element | "";
 declare const _default: React.MemoExoticComponent<typeof StringField>;