@axenstudio/axen-form 0.1.11 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/fields/DateField/DateField.cjs +1 -1
  2. package/dist/fields/DateField/DateField.js +1 -1
  3. package/dist/fields/DateTimeField/DateTimeField.cjs +1 -0
  4. package/dist/fields/DateTimeField/DateTimeField.d.ts.map +1 -1
  5. package/dist/fields/DateTimeField/DateTimeField.js +1 -0
  6. package/dist/fields/SelectField/SelectField.cjs +6 -1
  7. package/dist/fields/SelectField/SelectField.d.ts.map +1 -1
  8. package/dist/fields/SelectField/SelectField.js +6 -1
  9. package/dist/fields/TimeField/TimeField.cjs +1 -1
  10. package/dist/fields/TimeField/TimeField.js +1 -1
  11. package/dist/fields/fieldBase.module.css.cjs +80 -66
  12. package/dist/fields/fieldBase.module.css.js +80 -66
  13. package/package.json +1 -1
package/dist/fields/DateField/DateField.cjs CHANGED
@@ -75,7 +75,7 @@ function DateField({
75
75
  min,
76
76
  max,
77
77
  lang: resolvedLocale,
78
- className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, error && fieldBase_module.default.inputError)
78
+ className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, !dateValue && fieldBase_module.default.inputPlaceholder, error && fieldBase_module.default.inputError)
79
79
  }
80
80
  );
81
81
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, ref: wrapperRef, style: { position: "relative" }, children: [
package/dist/fields/DateField/DateField.js CHANGED
@@ -73,7 +73,7 @@ function DateField({
73
73
  min,
74
74
  max,
75
75
  lang: resolvedLocale,
76
- className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
76
+ className: cx(styles.input, resolvedIcon && styles.inputWithIcon, !dateValue && styles.inputPlaceholder, error && styles.inputError)
77
77
  }
78
78
  );
79
79
  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, ref: wrapperRef, style: { position: "relative" }, children: [
package/dist/fields/DateTimeField/DateTimeField.cjs CHANGED
@@ -118,6 +118,7 @@ function DateTimeField({
118
118
  fieldBase_module.default.input,
119
119
  resolvedIcon && fieldBase_module.default.inputWithIcon,
120
120
  fieldBase_module.default.inputWithPicker,
121
+ !dtValue && fieldBase_module.default.inputPlaceholder,
121
122
  error && fieldBase_module.default.inputError
122
123
  )
123
124
  }
package/dist/fields/DateTimeField/DateTimeField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DateTimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTimeField/DateTimeField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQvD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,EACH,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,WAAW,GACZ,EAAE,QAAQ,CACT,mBAAmB,GAAG;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CACF,2CAyLA"}
1
+ {"version":3,"file":"DateTimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTimeField/DateTimeField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQvD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,EACH,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,WAAW,GACZ,EAAE,QAAQ,CACT,mBAAmB,GAAG;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CACF,2CA0LA"}
package/dist/fields/DateTimeField/DateTimeField.js CHANGED
@@ -116,6 +116,7 @@ function DateTimeField({
116
116
  styles.input,
117
117
  resolvedIcon && styles.inputWithIcon,
118
118
  styles.inputWithPicker,
119
+ !dtValue && styles.inputPlaceholder,
119
120
  error && styles.inputError
120
121
  )
121
122
  }
package/dist/fields/SelectField/SelectField.cjs CHANGED
@@ -37,7 +37,12 @@ function SelectField({
37
37
  onChange,
38
38
  onBlur,
39
39
  disabled: disabled || readOnly,
40
- className: fieldUtils.cx(fieldBase_module.default.input, fieldBase_module.default.select, error && fieldBase_module.default.inputError),
40
+ className: fieldUtils.cx(
41
+ fieldBase_module.default.input,
42
+ fieldBase_module.default.select,
43
+ error && fieldBase_module.default.inputError,
44
+ !value && fieldBase_module.default.selectPlaceholder
45
+ ),
41
46
  children: [
42
47
  placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }),
43
48
  options == null ? void 0 : options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
package/dist/fields/SelectField/SelectField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/fields/SelectField/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,GACR,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CA6C/B"}
1
+ {"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/fields/SelectField/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,GACR,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAkD/B"}
package/dist/fields/SelectField/SelectField.js CHANGED
@@ -35,7 +35,12 @@ function SelectField({
35
35
  onChange,
36
36
  onBlur,
37
37
  disabled: disabled || readOnly,
38
- className: cx(styles.input, styles.select, error && styles.inputError),
38
+ className: cx(
39
+ styles.input,
40
+ styles.select,
41
+ error && styles.inputError,
42
+ !value && styles.selectPlaceholder
43
+ ),
39
44
  children: [
40
45
  placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
41
46
  options == null ? void 0 : options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
package/dist/fields/TimeField/TimeField.cjs CHANGED
@@ -75,7 +75,7 @@ function TimeField({
75
75
  disabled,
76
76
  readOnly,
77
77
  lang: resolvedLocale,
78
- className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, error && fieldBase_module.default.inputError)
78
+ className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, !timeValue && fieldBase_module.default.inputPlaceholder, error && fieldBase_module.default.inputError)
79
79
  }
80
80
  );
81
81
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, ref: wrapperRef, style: { position: "relative" }, children: [
package/dist/fields/TimeField/TimeField.js CHANGED
@@ -73,7 +73,7 @@ function TimeField({
73
73
  disabled,
74
74
  readOnly,
75
75
  lang: resolvedLocale,
76
- className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
76
+ className: cx(styles.input, resolvedIcon && styles.inputWithIcon, !timeValue && styles.inputPlaceholder, error && styles.inputError)
77
77
  }
78
78
  );
79
79
  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, ref: wrapperRef, style: { position: "relative" }, children: [
package/dist/fields/fieldBase.module.css.cjs CHANGED
@@ -10,14 +10,14 @@
10
10
  ═══════════════════════════════════════════════ */
11
11
 
12
12
  /* ── Field Wrapper ───────────────────────────── */
13
- ._wrapper_1hrya_8 {
13
+ ._wrapper_1sk2v_8 {
14
14
  display: flex;
15
15
  flex-direction: column;
16
16
  width: 100%;
17
17
  }
18
18
 
19
19
  /* ── Label ───────────────────────────────────── */
20
- ._label_1hrya_15 {
20
+ ._label_1sk2v_15 {
21
21
  display: block;
22
22
  font-size: var(--axen-font-size-sm, 0.875rem);
23
23
  font-weight: var(--axen-font-weight-medium, 500);
@@ -27,14 +27,14 @@
27
27
  letter-spacing: 0.01em;
28
28
  }
29
29
 
30
- ._labelRequired_1hrya_25::after {
30
+ ._labelRequired_1sk2v_25::after {
31
31
  content: ' *';
32
32
  color: var(--axen-color-error, #d32f2f);
33
33
  font-weight: var(--axen-font-weight-bold, 600);
34
34
  }
35
35
 
36
36
  /* ── Input Base ──────────────────────────────── */
37
- ._input_1hrya_32 {
37
+ ._input_1sk2v_32 {
38
38
  display: block;
39
39
  width: 100%;
40
40
  height: var(--axen-field-height, 2.75rem);
@@ -62,22 +62,22 @@
62
62
  outline: none;
63
63
  }
64
64
 
65
- ._input_1hrya_32::placeholder {
65
+ ._input_1sk2v_32::placeholder {
66
66
  color: var(--axen-color-text-disabled, #9e9e9e);
67
67
  }
68
68
 
69
- ._input_1hrya_32:hover:not(:disabled):not(:read-only) {
69
+ ._input_1sk2v_32:hover:not(:disabled):not(:read-only) {
70
70
  border-color: var(--axen-color-border-hover, #888888);
71
71
  }
72
72
 
73
73
  /* Focus ring (keyboard + mouse) */
74
- ._input_1hrya_32:focus {
74
+ ._input_1sk2v_32:focus {
75
75
  border-color: var(--axen-color-border-focus, var(--axen-color-primary, #1976d2));
76
76
  box-shadow: var(--axen-shadow-focus, 0 0 0 2px rgba(25, 118, 210, 0.5));
77
77
  outline: none;
78
78
  }
79
79
 
80
- ._input_1hrya_32:disabled {
80
+ ._input_1sk2v_32:disabled {
81
81
  background-color: var(--axen-color-bg-disabled, #f5f5f5);
82
82
  color: var(--axen-color-text-disabled, #9e9e9e);
83
83
  cursor: not-allowed;
@@ -86,35 +86,35 @@
86
86
  /* Scope :read-only to actual text inputs only.
87
87
  <select> and <div> match :read-only by default in modern browsers,
88
88
  which would incorrectly apply the disabled-looking background. */
89
- input._input_1hrya_32:read-only,
90
- textarea._input_1hrya_32:read-only {
89
+ input._input_1sk2v_32:read-only,
90
+ textarea._input_1sk2v_32:read-only {
91
91
  background-color: var(--axen-color-bg-disabled, #f5f5f5);
92
92
  }
93
93
 
94
94
  /* Hide native browser picker icons for date/time/datetime inputs.
95
95
  We provide our own custom pickers via DatePicker / TimePicker components,
96
96
  so the native chromium dark-themed popups must not appear. */
97
- ._input_1hrya_32::-webkit-calendar-picker-indicator {
97
+ ._input_1sk2v_32::-webkit-calendar-picker-indicator {
98
98
  display: none;
99
99
  -webkit-appearance: none;
100
100
  }
101
101
 
102
- ._input_1hrya_32::-webkit-date-and-time-value {
102
+ ._input_1sk2v_32::-webkit-date-and-time-value {
103
103
  text-align: left;
104
104
  }
105
105
 
106
106
  /* ── Error State ─────────────────────────────── */
107
- ._inputError_1hrya_102 {
107
+ ._inputError_1sk2v_102 {
108
108
  border-color: var(--axen-color-error, #d32f2f);
109
109
  }
110
110
 
111
- ._inputError_1hrya_102:focus {
111
+ ._inputError_1sk2v_102:focus {
112
112
  border-color: var(--axen-color-error, #d32f2f);
113
113
  box-shadow: 0 0 0 var(--axen-focus-ring-width, 2px) rgba(211, 47, 47, 0.3);
114
114
  }
115
115
 
116
116
  /* ── Helper Text ─────────────────────────────── */
117
- ._helperText_1hrya_112 {
117
+ ._helperText_1sk2v_112 {
118
118
  display: block;
119
119
  font-size: var(--axen-font-size-xs, 0.75rem);
120
120
  color: var(--axen-color-text-secondary, #666666);
@@ -122,12 +122,12 @@ textarea._input_1hrya_32:read-only {
122
122
  line-height: var(--axen-line-height, 1.5);
123
123
  }
124
124
 
125
- ._helperTextError_1hrya_120 {
125
+ ._helperTextError_1sk2v_120 {
126
126
  color: var(--axen-color-error, #d32f2f);
127
127
  }
128
128
 
129
129
  /* ── Textarea ────────────────────────────────── */
130
- ._textarea_1hrya_125 {
130
+ ._textarea_1sk2v_125 {
131
131
  height: auto;
132
132
  min-height: calc(var(--axen-field-min-height, 44px) * 2);
133
133
  resize: vertical;
@@ -135,7 +135,7 @@ textarea._input_1hrya_32:read-only {
135
135
  }
136
136
 
137
137
  /* ── Select ──────────────────────────────────── */
138
- ._select_1hrya_133 {
138
+ ._select_1sk2v_133 {
139
139
  appearance: none;
140
140
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
141
141
  background-repeat: no-repeat;
@@ -144,21 +144,29 @@ textarea._input_1hrya_32:read-only {
144
144
  cursor: pointer;
145
145
  }
146
146
 
147
+ ._selectPlaceholder_1sk2v_142 {
148
+ color: var(--axen-color-text-disabled, #9e9e9e);
149
+ }
150
+
151
+ ._inputPlaceholder_1sk2v_146 {
152
+ color: var(--axen-color-text-disabled, #9e9e9e);
153
+ }
154
+
147
155
  /* Dark-mode override removed — axen-form is now light-only by default.
148
156
  See tokens.css for color-scheme: light declaration. */
149
157
 
150
158
  /* ── Input with prefix/suffix ────────────────── */
151
- ._inputGroup_1hrya_146 {
159
+ ._inputGroup_1sk2v_154 {
152
160
  display: flex;
153
161
  align-items: stretch;
154
162
  }
155
163
 
156
164
  /* ── Icon inside input ───────────────────────── */
157
- ._inputIconWrapper_1hrya_152 {
165
+ ._inputIconWrapper_1sk2v_160 {
158
166
  position: relative;
159
167
  }
160
168
 
161
- ._fieldIcon_1hrya_156 {
169
+ ._fieldIcon_1sk2v_164 {
162
170
  position: absolute;
163
171
  left: 0.75rem;
164
172
  top: 50%;
@@ -174,7 +182,7 @@ textarea._input_1hrya_32:read-only {
174
182
  }
175
183
 
176
184
  /* Clickable variant for icons that open pickers */
177
- ._fieldIconClickable_1hrya_172 {
185
+ ._fieldIconClickable_1sk2v_180 {
178
186
  position: absolute;
179
187
  left: 0.75rem;
180
188
  top: 50%;
@@ -193,18 +201,18 @@ textarea._input_1hrya_32:read-only {
193
201
  margin: 0;
194
202
  }
195
203
 
196
- ._fieldIconClickable_1hrya_172:hover {
204
+ ._fieldIconClickable_1sk2v_180:hover {
197
205
  color: var(--axen-color-primary, #1976d2);
198
206
  }
199
207
 
200
- ._fieldIconClickable_1hrya_172:focus-visible {
208
+ ._fieldIconClickable_1sk2v_180:focus-visible {
201
209
  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
202
210
  outline-offset: 2px;
203
211
  border-radius: var(--axen-border-radius-sm, 4px);
204
212
  }
205
213
 
206
214
  /* Right-side picker trigger button inside inputIconWrapper */
207
- ._pickerTrigger_1hrya_202 {
215
+ ._pickerTrigger_1sk2v_210 {
208
216
  position: absolute;
209
217
  right: 0.5rem;
210
218
  top: 50%;
@@ -223,27 +231,27 @@ textarea._input_1hrya_32:read-only {
223
231
  z-index: 1;
224
232
  }
225
233
 
226
- ._pickerTrigger_1hrya_202:hover {
234
+ ._pickerTrigger_1sk2v_210:hover {
227
235
  color: var(--axen-color-primary, #1976d2);
228
236
  background-color: var(--axen-color-bg-hover, #fafafa);
229
237
  }
230
238
 
231
- ._pickerTrigger_1hrya_202:focus-visible {
239
+ ._pickerTrigger_1sk2v_210:focus-visible {
232
240
  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
233
241
  outline-offset: 2px;
234
242
  }
235
243
 
236
244
  /* Input with right-side picker trigger needs extra right padding */
237
- ._inputWithPicker_1hrya_232 {
245
+ ._inputWithPicker_1sk2v_240 {
238
246
  padding-right: 2.25rem;
239
247
  }
240
248
 
241
- ._inputWithIcon_1hrya_236 {
249
+ ._inputWithIcon_1sk2v_244 {
242
250
  padding-left: 2.5rem;
243
251
  }
244
252
 
245
- ._inputPrefix_1hrya_240,
246
- ._inputSuffix_1hrya_241 {
253
+ ._inputPrefix_1sk2v_248,
254
+ ._inputSuffix_1sk2v_249 {
247
255
  display: flex;
248
256
  align-items: center;
249
257
  padding: 0 var(--axen-space-sm, 0.5rem);
@@ -254,32 +262,32 @@ textarea._input_1hrya_32:read-only {
254
262
  white-space: nowrap;
255
263
  }
256
264
 
257
- ._inputPrefix_1hrya_240 {
265
+ ._inputPrefix_1sk2v_248 {
258
266
  border-right: none;
259
267
  border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
260
268
  }
261
269
 
262
- ._inputSuffix_1hrya_241 {
270
+ ._inputSuffix_1sk2v_249 {
263
271
  border-left: none;
264
272
  border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
265
273
  }
266
274
 
267
- ._inputGroupInput_1hrya_262 {
275
+ ._inputGroupInput_1sk2v_270 {
268
276
  border-radius: 0;
269
277
  }
270
278
 
271
- ._inputPrefix_1hrya_240 + ._inputGroupInput_1hrya_262 {
279
+ ._inputPrefix_1sk2v_248 + ._inputGroupInput_1sk2v_270 {
272
280
  border-top-left-radius: 0;
273
281
  border-bottom-left-radius: 0;
274
282
  }
275
283
 
276
- ._inputGroupInput_1hrya_262:has(+ ._inputSuffix_1hrya_241) {
284
+ ._inputGroupInput_1sk2v_270:has(+ ._inputSuffix_1sk2v_249) {
277
285
  border-top-right-radius: 0;
278
286
  border-bottom-right-radius: 0;
279
287
  }
280
288
 
281
289
  /* ── Checkbox/Radio/Switch shared ────────────── */
282
- ._inlineWrapper_1hrya_277 {
290
+ ._inlineWrapper_1sk2v_285 {
283
291
  display: flex;
284
292
  align-items: center;
285
293
  gap: var(--axen-space-sm, 0.5rem);
@@ -287,12 +295,12 @@ textarea._input_1hrya_32:read-only {
287
295
  cursor: pointer;
288
296
  }
289
297
 
290
- ._inlineWrapper_1hrya_277:has(:disabled) {
298
+ ._inlineWrapper_1sk2v_285:has(:disabled) {
291
299
  cursor: not-allowed;
292
300
  opacity: 0.6;
293
301
  }
294
302
 
295
- ._inlineLabel_1hrya_290 {
303
+ ._inlineLabel_1sk2v_298 {
296
304
  font-size: var(--axen-font-size-md, 1rem);
297
305
  color: var(--axen-color-text, #1a1a1a);
298
306
  user-select: none;
@@ -300,34 +308,34 @@ textarea._input_1hrya_32:read-only {
300
308
 
301
309
  /* ── Responsive: mobile touch targets ────────── */
302
310
  @media (max-width: 599px) {
303
- ._input_1hrya_32 {
311
+ ._input_1sk2v_32 {
304
312
  font-size: 16px; /* Prevent iOS zoom on focus */
305
313
  min-height: 48px;
306
314
  }
307
315
 
308
- ._inlineWrapper_1hrya_277 {
316
+ ._inlineWrapper_1sk2v_285 {
309
317
  min-height: 48px;
310
318
  }
311
319
  }
312
320
 
313
321
  /* ── High Contrast Mode ──────────────────────── */
314
322
  @media (prefers-contrast: more) {
315
- ._input_1hrya_32 {
323
+ ._input_1sk2v_32 {
316
324
  border-width: 2px;
317
325
  }
318
326
 
319
- ._inputError_1hrya_102 {
327
+ ._inputError_1sk2v_102 {
320
328
  border-width: 3px;
321
329
  }
322
330
 
323
- ._helperTextError_1hrya_120 {
331
+ ._helperTextError_1sk2v_120 {
324
332
  font-weight: var(--axen-font-weight-bold, 600);
325
333
  }
326
334
  }
327
335
 
328
336
  /* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
329
337
  @media (prefers-reduced-motion: reduce) {
330
- ._input_1hrya_32 {
338
+ ._input_1sk2v_32 {
331
339
  transition: none;
332
340
  }
333
341
  }`));
@@ -339,27 +347,29 @@ textarea._input_1hrya_32:read-only {
339
347
  })();
340
348
  "use strict";
341
349
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
342
- const wrapper = "_wrapper_1hrya_8";
343
- const label = "_label_1hrya_15";
344
- const labelRequired = "_labelRequired_1hrya_25";
345
- const input = "_input_1hrya_32";
346
- const inputError = "_inputError_1hrya_102";
347
- const helperText = "_helperText_1hrya_112";
348
- const helperTextError = "_helperTextError_1hrya_120";
349
- const textarea = "_textarea_1hrya_125";
350
- const select = "_select_1hrya_133";
351
- const inputGroup = "_inputGroup_1hrya_146";
352
- const inputIconWrapper = "_inputIconWrapper_1hrya_152";
353
- const fieldIcon = "_fieldIcon_1hrya_156";
354
- const fieldIconClickable = "_fieldIconClickable_1hrya_172";
355
- const pickerTrigger = "_pickerTrigger_1hrya_202";
356
- const inputWithPicker = "_inputWithPicker_1hrya_232";
357
- const inputWithIcon = "_inputWithIcon_1hrya_236";
358
- const inputPrefix = "_inputPrefix_1hrya_240";
359
- const inputSuffix = "_inputSuffix_1hrya_241";
360
- const inputGroupInput = "_inputGroupInput_1hrya_262";
361
- const inlineWrapper = "_inlineWrapper_1hrya_277";
362
- const inlineLabel = "_inlineLabel_1hrya_290";
350
+ const wrapper = "_wrapper_1sk2v_8";
351
+ const label = "_label_1sk2v_15";
352
+ const labelRequired = "_labelRequired_1sk2v_25";
353
+ const input = "_input_1sk2v_32";
354
+ const inputError = "_inputError_1sk2v_102";
355
+ const helperText = "_helperText_1sk2v_112";
356
+ const helperTextError = "_helperTextError_1sk2v_120";
357
+ const textarea = "_textarea_1sk2v_125";
358
+ const select = "_select_1sk2v_133";
359
+ const selectPlaceholder = "_selectPlaceholder_1sk2v_142";
360
+ const inputPlaceholder = "_inputPlaceholder_1sk2v_146";
361
+ const inputGroup = "_inputGroup_1sk2v_154";
362
+ const inputIconWrapper = "_inputIconWrapper_1sk2v_160";
363
+ const fieldIcon = "_fieldIcon_1sk2v_164";
364
+ const fieldIconClickable = "_fieldIconClickable_1sk2v_180";
365
+ const pickerTrigger = "_pickerTrigger_1sk2v_210";
366
+ const inputWithPicker = "_inputWithPicker_1sk2v_240";
367
+ const inputWithIcon = "_inputWithIcon_1sk2v_244";
368
+ const inputPrefix = "_inputPrefix_1sk2v_248";
369
+ const inputSuffix = "_inputSuffix_1sk2v_249";
370
+ const inputGroupInput = "_inputGroupInput_1sk2v_270";
371
+ const inlineWrapper = "_inlineWrapper_1sk2v_285";
372
+ const inlineLabel = "_inlineLabel_1sk2v_298";
363
373
  const styles = {
364
374
  wrapper,
365
375
  label,
@@ -370,6 +380,8 @@ const styles = {
370
380
  helperTextError,
371
381
  textarea,
372
382
  select,
383
+ selectPlaceholder,
384
+ inputPlaceholder,
373
385
  inputGroup,
374
386
  inputIconWrapper,
375
387
  fieldIcon,
@@ -395,6 +407,7 @@ exports.inputError = inputError;
395
407
  exports.inputGroup = inputGroup;
396
408
  exports.inputGroupInput = inputGroupInput;
397
409
  exports.inputIconWrapper = inputIconWrapper;
410
+ exports.inputPlaceholder = inputPlaceholder;
398
411
  exports.inputPrefix = inputPrefix;
399
412
  exports.inputSuffix = inputSuffix;
400
413
  exports.inputWithIcon = inputWithIcon;
@@ -403,5 +416,6 @@ exports.label = label;
403
416
  exports.labelRequired = labelRequired;
404
417
  exports.pickerTrigger = pickerTrigger;
405
418
  exports.select = select;
419
+ exports.selectPlaceholder = selectPlaceholder;
406
420
  exports.textarea = textarea;
407
421
  exports.wrapper = wrapper;
package/dist/fields/fieldBase.module.css.js CHANGED
@@ -10,14 +10,14 @@
10
10
  ═══════════════════════════════════════════════ */
11
11
 
12
12
  /* ── Field Wrapper ───────────────────────────── */
13
- ._wrapper_1hrya_8 {
13
+ ._wrapper_1sk2v_8 {
14
14
  display: flex;
15
15
  flex-direction: column;
16
16
  width: 100%;
17
17
  }
18
18
 
19
19
  /* ── Label ───────────────────────────────────── */
20
- ._label_1hrya_15 {
20
+ ._label_1sk2v_15 {
21
21
  display: block;
22
22
  font-size: var(--axen-font-size-sm, 0.875rem);
23
23
  font-weight: var(--axen-font-weight-medium, 500);
@@ -27,14 +27,14 @@
27
27
  letter-spacing: 0.01em;
28
28
  }
29
29
 
30
- ._labelRequired_1hrya_25::after {
30
+ ._labelRequired_1sk2v_25::after {
31
31
  content: ' *';
32
32
  color: var(--axen-color-error, #d32f2f);
33
33
  font-weight: var(--axen-font-weight-bold, 600);
34
34
  }
35
35
 
36
36
  /* ── Input Base ──────────────────────────────── */
37
- ._input_1hrya_32 {
37
+ ._input_1sk2v_32 {
38
38
  display: block;
39
39
  width: 100%;
40
40
  height: var(--axen-field-height, 2.75rem);
@@ -62,22 +62,22 @@
62
62
  outline: none;
63
63
  }
64
64
 
65
- ._input_1hrya_32::placeholder {
65
+ ._input_1sk2v_32::placeholder {
66
66
  color: var(--axen-color-text-disabled, #9e9e9e);
67
67
  }
68
68
 
69
- ._input_1hrya_32:hover:not(:disabled):not(:read-only) {
69
+ ._input_1sk2v_32:hover:not(:disabled):not(:read-only) {
70
70
  border-color: var(--axen-color-border-hover, #888888);
71
71
  }
72
72
 
73
73
  /* Focus ring (keyboard + mouse) */
74
- ._input_1hrya_32:focus {
74
+ ._input_1sk2v_32:focus {
75
75
  border-color: var(--axen-color-border-focus, var(--axen-color-primary, #1976d2));
76
76
  box-shadow: var(--axen-shadow-focus, 0 0 0 2px rgba(25, 118, 210, 0.5));
77
77
  outline: none;
78
78
  }
79
79
 
80
- ._input_1hrya_32:disabled {
80
+ ._input_1sk2v_32:disabled {
81
81
  background-color: var(--axen-color-bg-disabled, #f5f5f5);
82
82
  color: var(--axen-color-text-disabled, #9e9e9e);
83
83
  cursor: not-allowed;
@@ -86,35 +86,35 @@
86
86
  /* Scope :read-only to actual text inputs only.
87
87
  <select> and <div> match :read-only by default in modern browsers,
88
88
  which would incorrectly apply the disabled-looking background. */
89
- input._input_1hrya_32:read-only,
90
- textarea._input_1hrya_32:read-only {
89
+ input._input_1sk2v_32:read-only,
90
+ textarea._input_1sk2v_32:read-only {
91
91
  background-color: var(--axen-color-bg-disabled, #f5f5f5);
92
92
  }
93
93
 
94
94
  /* Hide native browser picker icons for date/time/datetime inputs.
95
95
  We provide our own custom pickers via DatePicker / TimePicker components,
96
96
  so the native chromium dark-themed popups must not appear. */
97
- ._input_1hrya_32::-webkit-calendar-picker-indicator {
97
+ ._input_1sk2v_32::-webkit-calendar-picker-indicator {
98
98
  display: none;
99
99
  -webkit-appearance: none;
100
100
  }
101
101
 
102
- ._input_1hrya_32::-webkit-date-and-time-value {
102
+ ._input_1sk2v_32::-webkit-date-and-time-value {
103
103
  text-align: left;
104
104
  }
105
105
 
106
106
  /* ── Error State ─────────────────────────────── */
107
- ._inputError_1hrya_102 {
107
+ ._inputError_1sk2v_102 {
108
108
  border-color: var(--axen-color-error, #d32f2f);
109
109
  }
110
110
 
111
- ._inputError_1hrya_102:focus {
111
+ ._inputError_1sk2v_102:focus {
112
112
  border-color: var(--axen-color-error, #d32f2f);
113
113
  box-shadow: 0 0 0 var(--axen-focus-ring-width, 2px) rgba(211, 47, 47, 0.3);
114
114
  }
115
115
 
116
116
  /* ── Helper Text ─────────────────────────────── */
117
- ._helperText_1hrya_112 {
117
+ ._helperText_1sk2v_112 {
118
118
  display: block;
119
119
  font-size: var(--axen-font-size-xs, 0.75rem);
120
120
  color: var(--axen-color-text-secondary, #666666);
@@ -122,12 +122,12 @@ textarea._input_1hrya_32:read-only {
122
122
  line-height: var(--axen-line-height, 1.5);
123
123
  }
124
124
 
125
- ._helperTextError_1hrya_120 {
125
+ ._helperTextError_1sk2v_120 {
126
126
  color: var(--axen-color-error, #d32f2f);
127
127
  }
128
128
 
129
129
  /* ── Textarea ────────────────────────────────── */
130
- ._textarea_1hrya_125 {
130
+ ._textarea_1sk2v_125 {
131
131
  height: auto;
132
132
  min-height: calc(var(--axen-field-min-height, 44px) * 2);
133
133
  resize: vertical;
@@ -135,7 +135,7 @@ textarea._input_1hrya_32:read-only {
135
135
  }
136
136
 
137
137
  /* ── Select ──────────────────────────────────── */
138
- ._select_1hrya_133 {
138
+ ._select_1sk2v_133 {
139
139
  appearance: none;
140
140
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
141
141
  background-repeat: no-repeat;
@@ -144,21 +144,29 @@ textarea._input_1hrya_32:read-only {
144
144
  cursor: pointer;
145
145
  }
146
146
 
147
+ ._selectPlaceholder_1sk2v_142 {
148
+ color: var(--axen-color-text-disabled, #9e9e9e);
149
+ }
150
+
151
+ ._inputPlaceholder_1sk2v_146 {
152
+ color: var(--axen-color-text-disabled, #9e9e9e);
153
+ }
154
+
147
155
  /* Dark-mode override removed — axen-form is now light-only by default.
148
156
  See tokens.css for color-scheme: light declaration. */
149
157
 
150
158
  /* ── Input with prefix/suffix ────────────────── */
151
- ._inputGroup_1hrya_146 {
159
+ ._inputGroup_1sk2v_154 {
152
160
  display: flex;
153
161
  align-items: stretch;
154
162
  }
155
163
 
156
164
  /* ── Icon inside input ───────────────────────── */
157
- ._inputIconWrapper_1hrya_152 {
165
+ ._inputIconWrapper_1sk2v_160 {
158
166
  position: relative;
159
167
  }
160
168
 
161
- ._fieldIcon_1hrya_156 {
169
+ ._fieldIcon_1sk2v_164 {
162
170
  position: absolute;
163
171
  left: 0.75rem;
164
172
  top: 50%;
@@ -174,7 +182,7 @@ textarea._input_1hrya_32:read-only {
174
182
  }
175
183
 
176
184
  /* Clickable variant for icons that open pickers */
177
- ._fieldIconClickable_1hrya_172 {
185
+ ._fieldIconClickable_1sk2v_180 {
178
186
  position: absolute;
179
187
  left: 0.75rem;
180
188
  top: 50%;
@@ -193,18 +201,18 @@ textarea._input_1hrya_32:read-only {
193
201
  margin: 0;
194
202
  }
195
203
 
196
- ._fieldIconClickable_1hrya_172:hover {
204
+ ._fieldIconClickable_1sk2v_180:hover {
197
205
  color: var(--axen-color-primary, #1976d2);
198
206
  }
199
207
 
200
- ._fieldIconClickable_1hrya_172:focus-visible {
208
+ ._fieldIconClickable_1sk2v_180:focus-visible {
201
209
  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
202
210
  outline-offset: 2px;
203
211
  border-radius: var(--axen-border-radius-sm, 4px);
204
212
  }
205
213
 
206
214
  /* Right-side picker trigger button inside inputIconWrapper */
207
- ._pickerTrigger_1hrya_202 {
215
+ ._pickerTrigger_1sk2v_210 {
208
216
  position: absolute;
209
217
  right: 0.5rem;
210
218
  top: 50%;
@@ -223,27 +231,27 @@ textarea._input_1hrya_32:read-only {
223
231
  z-index: 1;
224
232
  }
225
233
 
226
- ._pickerTrigger_1hrya_202:hover {
234
+ ._pickerTrigger_1sk2v_210:hover {
227
235
  color: var(--axen-color-primary, #1976d2);
228
236
  background-color: var(--axen-color-bg-hover, #fafafa);
229
237
  }
230
238
 
231
- ._pickerTrigger_1hrya_202:focus-visible {
239
+ ._pickerTrigger_1sk2v_210:focus-visible {
232
240
  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
233
241
  outline-offset: 2px;
234
242
  }
235
243
 
236
244
  /* Input with right-side picker trigger needs extra right padding */
237
- ._inputWithPicker_1hrya_232 {
245
+ ._inputWithPicker_1sk2v_240 {
238
246
  padding-right: 2.25rem;
239
247
  }
240
248
 
241
- ._inputWithIcon_1hrya_236 {
249
+ ._inputWithIcon_1sk2v_244 {
242
250
  padding-left: 2.5rem;
243
251
  }
244
252
 
245
- ._inputPrefix_1hrya_240,
246
- ._inputSuffix_1hrya_241 {
253
+ ._inputPrefix_1sk2v_248,
254
+ ._inputSuffix_1sk2v_249 {
247
255
  display: flex;
248
256
  align-items: center;
249
257
  padding: 0 var(--axen-space-sm, 0.5rem);
@@ -254,32 +262,32 @@ textarea._input_1hrya_32:read-only {
254
262
  white-space: nowrap;
255
263
  }
256
264
 
257
- ._inputPrefix_1hrya_240 {
265
+ ._inputPrefix_1sk2v_248 {
258
266
  border-right: none;
259
267
  border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
260
268
  }
261
269
 
262
- ._inputSuffix_1hrya_241 {
270
+ ._inputSuffix_1sk2v_249 {
263
271
  border-left: none;
264
272
  border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
265
273
  }
266
274
 
267
- ._inputGroupInput_1hrya_262 {
275
+ ._inputGroupInput_1sk2v_270 {
268
276
  border-radius: 0;
269
277
  }
270
278
 
271
- ._inputPrefix_1hrya_240 + ._inputGroupInput_1hrya_262 {
279
+ ._inputPrefix_1sk2v_248 + ._inputGroupInput_1sk2v_270 {
272
280
  border-top-left-radius: 0;
273
281
  border-bottom-left-radius: 0;
274
282
  }
275
283
 
276
- ._inputGroupInput_1hrya_262:has(+ ._inputSuffix_1hrya_241) {
284
+ ._inputGroupInput_1sk2v_270:has(+ ._inputSuffix_1sk2v_249) {
277
285
  border-top-right-radius: 0;
278
286
  border-bottom-right-radius: 0;
279
287
  }
280
288
 
281
289
  /* ── Checkbox/Radio/Switch shared ────────────── */
282
- ._inlineWrapper_1hrya_277 {
290
+ ._inlineWrapper_1sk2v_285 {
283
291
  display: flex;
284
292
  align-items: center;
285
293
  gap: var(--axen-space-sm, 0.5rem);
@@ -287,12 +295,12 @@ textarea._input_1hrya_32:read-only {
287
295
  cursor: pointer;
288
296
  }
289
297
 
290
- ._inlineWrapper_1hrya_277:has(:disabled) {
298
+ ._inlineWrapper_1sk2v_285:has(:disabled) {
291
299
  cursor: not-allowed;
292
300
  opacity: 0.6;
293
301
  }
294
302
 
295
- ._inlineLabel_1hrya_290 {
303
+ ._inlineLabel_1sk2v_298 {
296
304
  font-size: var(--axen-font-size-md, 1rem);
297
305
  color: var(--axen-color-text, #1a1a1a);
298
306
  user-select: none;
@@ -300,34 +308,34 @@ textarea._input_1hrya_32:read-only {
300
308
 
301
309
  /* ── Responsive: mobile touch targets ────────── */
302
310
  @media (max-width: 599px) {
303
- ._input_1hrya_32 {
311
+ ._input_1sk2v_32 {
304
312
  font-size: 16px; /* Prevent iOS zoom on focus */
305
313
  min-height: 48px;
306
314
  }
307
315
 
308
- ._inlineWrapper_1hrya_277 {
316
+ ._inlineWrapper_1sk2v_285 {
309
317
  min-height: 48px;
310
318
  }
311
319
  }
312
320
 
313
321
  /* ── High Contrast Mode ──────────────────────── */
314
322
  @media (prefers-contrast: more) {
315
- ._input_1hrya_32 {
323
+ ._input_1sk2v_32 {
316
324
  border-width: 2px;
317
325
  }
318
326
 
319
- ._inputError_1hrya_102 {
327
+ ._inputError_1sk2v_102 {
320
328
  border-width: 3px;
321
329
  }
322
330
 
323
- ._helperTextError_1hrya_120 {
331
+ ._helperTextError_1sk2v_120 {
324
332
  font-weight: var(--axen-font-weight-bold, 600);
325
333
  }
326
334
  }
327
335
 
328
336
  /* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
329
337
  @media (prefers-reduced-motion: reduce) {
330
- ._input_1hrya_32 {
338
+ ._input_1sk2v_32 {
331
339
  transition: none;
332
340
  }
333
341
  }`));
@@ -337,27 +345,29 @@ textarea._input_1hrya_32:read-only {
337
345
  console.error("vite-plugin-css-injected-by-js", e);
338
346
  }
339
347
  })();
340
- const wrapper = "_wrapper_1hrya_8";
341
- const label = "_label_1hrya_15";
342
- const labelRequired = "_labelRequired_1hrya_25";
343
- const input = "_input_1hrya_32";
344
- const inputError = "_inputError_1hrya_102";
345
- const helperText = "_helperText_1hrya_112";
346
- const helperTextError = "_helperTextError_1hrya_120";
347
- const textarea = "_textarea_1hrya_125";
348
- const select = "_select_1hrya_133";
349
- const inputGroup = "_inputGroup_1hrya_146";
350
- const inputIconWrapper = "_inputIconWrapper_1hrya_152";
351
- const fieldIcon = "_fieldIcon_1hrya_156";
352
- const fieldIconClickable = "_fieldIconClickable_1hrya_172";
353
- const pickerTrigger = "_pickerTrigger_1hrya_202";
354
- const inputWithPicker = "_inputWithPicker_1hrya_232";
355
- const inputWithIcon = "_inputWithIcon_1hrya_236";
356
- const inputPrefix = "_inputPrefix_1hrya_240";
357
- const inputSuffix = "_inputSuffix_1hrya_241";
358
- const inputGroupInput = "_inputGroupInput_1hrya_262";
359
- const inlineWrapper = "_inlineWrapper_1hrya_277";
360
- const inlineLabel = "_inlineLabel_1hrya_290";
348
+ const wrapper = "_wrapper_1sk2v_8";
349
+ const label = "_label_1sk2v_15";
350
+ const labelRequired = "_labelRequired_1sk2v_25";
351
+ const input = "_input_1sk2v_32";
352
+ const inputError = "_inputError_1sk2v_102";
353
+ const helperText = "_helperText_1sk2v_112";
354
+ const helperTextError = "_helperTextError_1sk2v_120";
355
+ const textarea = "_textarea_1sk2v_125";
356
+ const select = "_select_1sk2v_133";
357
+ const selectPlaceholder = "_selectPlaceholder_1sk2v_142";
358
+ const inputPlaceholder = "_inputPlaceholder_1sk2v_146";
359
+ const inputGroup = "_inputGroup_1sk2v_154";
360
+ const inputIconWrapper = "_inputIconWrapper_1sk2v_160";
361
+ const fieldIcon = "_fieldIcon_1sk2v_164";
362
+ const fieldIconClickable = "_fieldIconClickable_1sk2v_180";
363
+ const pickerTrigger = "_pickerTrigger_1sk2v_210";
364
+ const inputWithPicker = "_inputWithPicker_1sk2v_240";
365
+ const inputWithIcon = "_inputWithIcon_1sk2v_244";
366
+ const inputPrefix = "_inputPrefix_1sk2v_248";
367
+ const inputSuffix = "_inputSuffix_1sk2v_249";
368
+ const inputGroupInput = "_inputGroupInput_1sk2v_270";
369
+ const inlineWrapper = "_inlineWrapper_1sk2v_285";
370
+ const inlineLabel = "_inlineLabel_1sk2v_298";
361
371
  const styles = {
362
372
  wrapper,
363
373
  label,
@@ -368,6 +378,8 @@ const styles = {
368
378
  helperTextError,
369
379
  textarea,
370
380
  select,
381
+ selectPlaceholder,
382
+ inputPlaceholder,
371
383
  inputGroup,
372
384
  inputIconWrapper,
373
385
  fieldIcon,
@@ -394,6 +406,7 @@ export {
394
406
  inputGroup,
395
407
  inputGroupInput,
396
408
  inputIconWrapper,
409
+ inputPlaceholder,
397
410
  inputPrefix,
398
411
  inputSuffix,
399
412
  inputWithIcon,
@@ -402,6 +415,7 @@ export {
402
415
  labelRequired,
403
416
  pickerTrigger,
404
417
  select,
418
+ selectPlaceholder,
405
419
  textarea,
406
420
  wrapper
407
421
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axenstudio/axen-form",
3
- "version": "0.1.11",
3
+ "version": "0.1.13",
4
4
  "description": "Lightweight, config-driven, enterprise-grade React form library. Zero UI dependency. CSS Modules. A11y-aware.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",