@elcrm/form 0.0.63 → 0.0.64

package/dist/package.js

@@ -0,0 +1,96 @@
+var e = {
+	name: "@elcrm/form",
+	version: "0.0.64",
+	description: "React-компоненты полей формы и хук useForm для elCRM: текст, даты, маски, деньги, селект, связка с формой по имени поля (tree-shakeable ESM).",
+	type: "module",
+	author: "MaSkal <dev@elcrm.online>",
+	license: "MIT",
+	files: ["dist", "src/lib/styles"],
+	keywords: [
+		"elcrm",
+		"form",
+		"react"
+	],
+	main: "./dist/index.umd.js",
+	module: "./dist/index.js",
+	types: "./dist/index.d.ts",
+	exports: {
+		".": {
+			types: "./dist/index.d.ts",
+			import: "./dist/index.js",
+			require: "./dist/index.umd.js"
+		},
+		"./fields/*": {
+			types: "./dist/fields/*.d.ts",
+			import: "./dist/fields/*.js"
+		},
+		"./hooks/*": {
+			types: "./dist/hooks/*.d.ts",
+			import: "./dist/hooks/*.js"
+		},
+		"./events/*": {
+			types: "./dist/events/*.d.ts",
+			import: "./dist/events/*.js"
+		},
+		"./core/*": {
+			types: "./dist/core/*.d.ts",
+			import: "./dist/core/*.js"
+		},
+		"./mask/*": {
+			types: "./dist/mask/*.d.ts",
+			import: "./dist/mask/*.js"
+		},
+		"./Form": {
+			types: "./dist/Form.d.ts",
+			import: "./dist/Form.js"
+		},
+		"./FormInitContext": {
+			types: "./dist/FormInitContext.d.ts",
+			import: "./dist/FormInitContext.js"
+		},
+		"./style.css": {
+			import: "./dist/style.css",
+			require: "./dist/style.css"
+		},
+		"./light.css": {
+			import: "./src/lib/styles/light.css",
+			require: "./src/lib/styles/light.css"
+		},
+		"./dark.css": {
+			import: "./src/lib/styles/dark.css",
+			require: "./src/lib/styles/dark.css"
+		},
+		"./dist/style.css": {
+			import: "./dist/style.css",
+			require: "./dist/style.css"
+		}
+	},
+	scripts: {
+		dev: "vite --config test/vite.config.ts",
+		build: "vite build && node scripts/merge-dist-css.mjs && vite build --config vite.umd.config.ts",
+		test: "vitest run",
+		"test:watch": "vitest",
+		"test:build": "vite build --config test/vite.config.ts",
+		"test:preview": "vite preview --config test/vite.config.ts"
+	},
+	peerDependencies: {
+		react: ">=18",
+		"react-dom": ">=18"
+	},
+	devDependencies: {
+		"@elcrm/storybook": "^0.0.3",
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/react": "^16.3.2",
+		"@types/react": "^19.2.14",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^6.0.1",
+		jsdom: "^29.0.1",
+		react: "^19.2.4",
+		"react-dom": "^19.2.4",
+		"sass-embedded": "^1.98.0",
+		vite: "^8.0.1",
+		vitest: "^4.1.0"
+	}
+};
+//#endregion
+export { e as default };

package/dist/style.css

@@ -0,0 +1,5 @@
+._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}
+
+._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}
+
+: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/styles/Field.module.js

@@ -0,0 +1,22 @@
+import '../assets/styles/Field.module.css';var e = {
+	l: "_l_zzcgd_2",
+	f: "_f_zzcgd_33",
+	e: "_e_zzcgd_57",
+	n: "_n_zzcgd_97",
+	w: "_w_zzcgd_104",
+	time: "_time_zzcgd_114",
+	timeInner: "_timeInner_zzcgd_121",
+	timeAlignCenter: "_timeAlignCenter_zzcgd_132",
+	timeSep: "_timeSep_zzcgd_135",
+	timePart: "_timePart_zzcgd_146",
+	t: "_t_zzcgd_114",
+	g: "_g_zzcgd_192",
+	range: "_range_zzcgd_196",
+	rangeTrack: "_rangeTrack_zzcgd_205",
+	rangeFill: "_rangeFill_zzcgd_226",
+	rangeFillFull: "_rangeFillFull_zzcgd_237",
+	h: "_h_zzcgd_241",
+	m: "_m_zzcgd_280"
+};
+//#endregion
+export { e as default };

package/dist/styles/Form.module.js

@@ -0,0 +1,12 @@
+import '../assets/styles/Form.module.css';var e = {
+	o: "_o_j48yg_2",
+	c: "_c_j48yg_13",
+	_active: "__active_j48yg_64",
+	dateHeaderMonth: "_dateHeaderMonth_j48yg_119",
+	dateHeaderYear: "_dateHeaderYear_j48yg_119",
+	dateHeaderDisabled: "_dateHeaderDisabled_j48yg_129",
+	as: "_as_j48yg_196",
+	ap: "_ap_j48yg_199"
+};
+//#endregion
+export { e as default };

package/dist/styles/Select.module.js

@@ -0,0 +1,8 @@
+import '../assets/styles/Select.module.css';var e = {
+	o: "_o_1q26w_12",
+	l: "_l_1q26w_22",
+	i: "_i_1q26w_80",
+	f: "_f_1q26w_89"
+};
+//#endregion
+export { e as default };

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "@elcrm/form",
-    "version": "0.0.63",
-    "description": "plugin for elCRM",
+    "version": "0.0.64",
+    "description": "React-компоненты полей формы и хук useForm для elCRM: текст, даты, маски, деньги, селект, связка с формой по имени поля (tree-shakeable ESM).",
     "type": "module",
     "author": "MaSkal <dev@elcrm.online>",
     "license": "MIT",
     "files": [
-        "dist"
+        "dist",
+        "src/lib/styles"
     ],
     "keywords": [
         "elcrm",
@@ -14,23 +15,83 @@
         "react"
     ],
     "main": "./dist/index.umd.js",
-    "module": "./dist/index.es.js",
+    "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "import": "./dist/index.es.js",
+            "import": "./dist/index.js",
             "require": "./dist/index.umd.js"
         },
+        "./fields/*": {
+            "types": "./dist/fields/*.d.ts",
+            "import": "./dist/fields/*.js"
+        },
+        "./hooks/*": {
+            "types": "./dist/hooks/*.d.ts",
+            "import": "./dist/hooks/*.js"
+        },
+        "./events/*": {
+            "types": "./dist/events/*.d.ts",
+            "import": "./dist/events/*.js"
+        },
+        "./core/*": {
+            "types": "./dist/core/*.d.ts",
+            "import": "./dist/core/*.js"
+        },
+        "./mask/*": {
+            "types": "./dist/mask/*.d.ts",
+            "import": "./dist/mask/*.js"
+        },
+        "./Form": {
+            "types": "./dist/Form.d.ts",
+            "import": "./dist/Form.js"
+        },
+        "./FormInitContext": {
+            "types": "./dist/FormInitContext.d.ts",
+            "import": "./dist/FormInitContext.js"
+        },
+        "./style.css": {
+            "import": "./dist/style.css",
+            "require": "./dist/style.css"
+        },
+        "./light.css": {
+            "import": "./src/lib/styles/light.css",
+            "require": "./src/lib/styles/light.css"
+        },
+        "./dark.css": {
+            "import": "./src/lib/styles/dark.css",
+            "require": "./src/lib/styles/dark.css"
+        },
         "./dist/style.css": {
-            "import": "./dist/index.css",
-            "require": "./dist/index.css"
+            "import": "./dist/style.css",
+            "require": "./dist/style.css"
         }
     },
+    "scripts": {
+        "dev": "vite --config test/vite.config.ts",
+        "build": "vite build && node scripts/merge-dist-css.mjs && vite build --config vite.umd.config.ts",
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "test:build": "vite build --config test/vite.config.ts",
+        "test:preview": "vite preview --config test/vite.config.ts"
+    },
     "peerDependencies": {
-        "@elcrm/router": "^0.0.42",
-        "@elcrm/event": "^0.0.1",
-        "@elcrm/setting": "^0.0.6",
-        "@elcrm/notice": "^0.0.1"
+        "react": ">=18",
+        "react-dom": ">=18"
+    },
+    "devDependencies": {
+        "@elcrm/storybook": "^0.0.3",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.2",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.1",
+        "jsdom": "^29.0.1",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "sass-embedded": "^1.98.0",
+        "vite": "^8.0.1",
+        "vitest": "^4.1.0"
     }
 }

package/src/lib/styles/Field.module.scss

@@ -0,0 +1,315 @@
+.l {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    min-width: var(--field-width);
+    gap: var(--field-block-gap, 0);
+    margin: 0;
+    padding: 0;
+    & > dt,
+    & > dd {
+        margin: 0;
+        padding: 0;
+    }
+    &[data-field="group"] {
+        & div {
+            cursor: pointer;
+            border-bottom: var(--field-border);
+            margin: 0;
+            padding: var(--field-padding);
+        }
+        & div:last-child {
+            border-bottom: 0;
+        }
+    }
+    & [placeholder]:empty:before {
+        content: attr(placeholder);
+        display: block;
+        color: var(--field-placeholder);
+    }
+    & [placeholder]:focus:before {
+        display: none;
+    }
+}
+
+.f {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--field-icon-gap, 10px);
+    border: var(--field-border);
+    border-radius: var(--field-radius);
+    overflow: hidden;
+    background: var(--field-background);
+    color: var(--field-color);
+    padding: 0 var(--field-side-padding, 14px);
+    transition:
+        border-color 0.16s ease,
+        box-shadow 0.16s ease,
+        background-color 0.16s ease,
+        opacity 0.16s ease;
+    &:hover {
+        border-color: var(--field-border-hover, var(--field-border));
+    }
+    &: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));
+    }
+    /* при ошибке оставляем фон ошибки, не подсветку обычного фокуса */
+    &.e:focus-within {
+        background: var(--field-error-background);
+        color: var(--field-error-color);
+    }
+    &[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: 0.85;
+    }
+    &[data-disabled="true"] > * {
+        cursor: not-allowed;
+    }
+    & > div {
+        outline: 0;
+
+        flex: 1;
+        margin: 0;
+        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;
+
+        &::selection {
+            background: var(--field-selection-bg, #b3d4fc);
+            color: var(--field-selection-color, inherit);
+        }
+    }
+    & > :not(div) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        color: var(--field-icon-color, var(--field-placeholder));
+        & svg {
+            width: 20px;
+            height: 20px;
+        }
+    }
+}
+
+// textarea
+.n {
+    & 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 {
+    & > div {
+        text-wrap: nowrap;
+        overflow: hidden;
+        overflow-x: scroll;
+        &::-webkit-scrollbar {
+            width: 0;
+            height: 0;
+        }
+    }
+}
+
+// время: два поля часы / минуты
+.time {
+    & > div {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+        overflow: visible;
+        text-wrap: nowrap;
+    }
+
+    .timeInner {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 4px;
+        width: 100%;
+        min-width: 0;
+    }
+
+    /* центрирование — опционально через проп align="center" у Time */
+    &.timeAlignCenter .timeInner {
+        justify-content: center;
+    }
+
+    .timeSep {
+        flex: none;
+        font-weight: 500;
+        opacity: 0.65;
+        user-select: none;
+        padding: 0 2px;
+        transform: translateY(-1px);
+    }
+
+    /* contentEditable, как у текстового поля */
+    .timePart {
+        box-sizing: border-box;
+        width: 1em;
+        min-width: 0;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        line-height: inherit;
+        text-align: left;
+        min-height: var(--field-height);
+        outline: none;
+        border-radius: 6px;
+        cursor: text;
+        flex: 0 0 auto;
+
+        &[contenteditable="false"] {
+            cursor: not-allowed;
+            opacity: 0.7;
+        }
+
+        &:empty:before {
+            content: attr(placeholder);
+            color: var(--field-placeholder);
+            opacity: 0.6;
+        }
+
+        &:focus:empty:before {
+            content: none;
+        }
+
+        /* фон капсулы .f уже через :focus-within; здесь не перекрываем */
+        &:focus-visible {
+            background: transparent;
+        }
+    }
+
+    &.timeAlignCenter .timePart {
+        text-align: center;
+    }
+}
+
+.t {
+    color: var(--field-label-color);
+    font-size: var(--field-label-size);
+    padding-bottom: 10px;
+}
+
+.g {
+    flex-direction: column;
+}
+
+// range — капсула .f + .w как у Input; внутри «таблетка» трек (div): серый фон + бирюзовая заливка слева
+.range {
+    & > div {
+        box-sizing: border-box;
+        flex: 1;
+        min-width: 0;
+        min-height: var(--field-height);
+        display: flex;
+        align-items: center;
+        line-height: normal;
+    }
+
+    .rangeTrack {
+        box-sizing: border-box;
+        position: relative;
+        width: 100%;
+        height: var(--field-range-bar-height, 14px);
+        flex-shrink: 0;
+        border-radius: 999px;
+        background: var(--field-range-track, #e0e0e0);
+        overflow: hidden;
+        cursor: pointer;
+        outline: none;
+        touch-action: none;
+
+        &:focus-visible {
+            box-shadow: 0 0 0 3px var(--field-focus-ring, #0000);
+        }
+
+        &[data-disabled="true"] {
+            cursor: not-allowed;
+            opacity: 0.55;
+            pointer-events: none;
+        }
+    }
+
+    .rangeFill {
+        height: 100%;
+        width: 0;
+        min-width: 0;
+        background: var(--field-range-fill, #00b5ad);
+        border-radius: 999px 0 0 999px;
+        pointer-events: none;
+    }
+
+    /* при 100% — полностью скруглённая «капсула» заливки */
+    .rangeFillFull {
+        border-radius: 999px;
+    }
+}
+
+// checkBox
+.h {
+    --field-border: 0;
+    & 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);
+        margin: 0;
+        flex: none;
+        cursor: pointer;
+        position: relative;
+        gap: 10px;
+        &[aria-checked="true"] {
+            background: var(--field-background-active);
+        }
+        &:after {
+            content: "";
+            width: 9px;
+            height: 5px;
+            position: absolute;
+            top: 5px;
+            left: 4px;
+            border: 3px solid #fcfff4;
+            border-top: none;
+            border-right: none;
+            background: transparent;
+            transform: rotate(-45deg);
+            margin: 4px;
+        }
+    }
+}
+
+.e {
+    border-color: var(--field-error-border);
+    background: var(--field-error-background);
+    color: var(--field-error-color);
+}
+
+.m {
+    color: var(--field-error-color);
+    font-size: 12px;
+    font-style: normal;
+    margin-top: 6px;
+}