@axenstudio/axen-form 0.1.11 → 0.1.12

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 (6) hide show
  1. package/dist/fields/SelectField/SelectField.cjs +6 -1
  2. package/dist/fields/SelectField/SelectField.d.ts.map +1 -1
  3. package/dist/fields/SelectField/SelectField.js +6 -1
  4. package/dist/fields/fieldBase.module.css.cjs +73 -66
  5. package/dist/fields/fieldBase.module.css.js +73 -66
  6. package/package.json +1 -1
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/fieldBase.module.css.cjs CHANGED
@@ -10,14 +10,14 @@
10
10
  ═══════════════════════════════════════════════ */
11
11
 
12
12
  /* ── Field Wrapper ───────────────────────────── */
13
- ._wrapper_1hrya_8 {
13
+ ._wrapper_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_32:read-only,
90
+ textarea._input_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_102 {
108
108
  border-color: var(--axen-color-error, #d32f2f);
109
109
  }
110
110
 
111
- ._inputError_1hrya_102:focus {
111
+ ._inputError_hrx0p_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_hrx0p_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_hrx0p_120 {
126
126
  color: var(--axen-color-error, #d32f2f);
127
127
  }
128
128
 
129
129
  /* ── Textarea ────────────────────────────────── */
130
- ._textarea_1hrya_125 {
130
+ ._textarea_hrx0p_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_hrx0p_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,25 @@ textarea._input_1hrya_32:read-only {
144
144
  cursor: pointer;
145
145
  }
146
146
 
147
+ ._selectPlaceholder_hrx0p_142 {
148
+ color: var(--axen-color-text-disabled, #9e9e9e);
149
+ }
150
+
147
151
  /* Dark-mode override removed — axen-form is now light-only by default.
148
152
  See tokens.css for color-scheme: light declaration. */
149
153
 
150
154
  /* ── Input with prefix/suffix ────────────────── */
151
- ._inputGroup_1hrya_146 {
155
+ ._inputGroup_hrx0p_150 {
152
156
  display: flex;
153
157
  align-items: stretch;
154
158
  }
155
159
 
156
160
  /* ── Icon inside input ───────────────────────── */
157
- ._inputIconWrapper_1hrya_152 {
161
+ ._inputIconWrapper_hrx0p_156 {
158
162
  position: relative;
159
163
  }
160
164
 
161
- ._fieldIcon_1hrya_156 {
165
+ ._fieldIcon_hrx0p_160 {
162
166
  position: absolute;
163
167
  left: 0.75rem;
164
168
  top: 50%;
@@ -174,7 +178,7 @@ textarea._input_1hrya_32:read-only {
174
178
  }
175
179
 
176
180
  /* Clickable variant for icons that open pickers */
177
- ._fieldIconClickable_1hrya_172 {
181
+ ._fieldIconClickable_hrx0p_176 {
178
182
  position: absolute;
179
183
  left: 0.75rem;
180
184
  top: 50%;
@@ -193,18 +197,18 @@ textarea._input_1hrya_32:read-only {
193
197
  margin: 0;
194
198
  }
195
199
 
196
- ._fieldIconClickable_1hrya_172:hover {
200
+ ._fieldIconClickable_hrx0p_176:hover {
197
201
  color: var(--axen-color-primary, #1976d2);
198
202
  }
199
203
 
200
- ._fieldIconClickable_1hrya_172:focus-visible {
204
+ ._fieldIconClickable_hrx0p_176:focus-visible {
201
205
  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
202
206
  outline-offset: 2px;
203
207
  border-radius: var(--axen-border-radius-sm, 4px);
204
208
  }
205
209
 
206
210
  /* Right-side picker trigger button inside inputIconWrapper */
207
- ._pickerTrigger_1hrya_202 {
211
+ ._pickerTrigger_hrx0p_206 {
208
212
  position: absolute;
209
213
  right: 0.5rem;
210
214
  top: 50%;
@@ -223,27 +227,27 @@ textarea._input_1hrya_32:read-only {
223
227
  z-index: 1;
224
228
  }
225
229
 
226
- ._pickerTrigger_1hrya_202:hover {
230
+ ._pickerTrigger_hrx0p_206:hover {
227
231
  color: var(--axen-color-primary, #1976d2);
228
232
  background-color: var(--axen-color-bg-hover, #fafafa);
229
233
  }
230
234
 
231
- ._pickerTrigger_1hrya_202:focus-visible {
235
+ ._pickerTrigger_hrx0p_206:focus-visible {
232
236
  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
233
237
  outline-offset: 2px;
234
238
  }
235
239
 
236
240
  /* Input with right-side picker trigger needs extra right padding */
237
- ._inputWithPicker_1hrya_232 {
241
+ ._inputWithPicker_hrx0p_236 {
238
242
  padding-right: 2.25rem;
239
243
  }
240
244
 
241
- ._inputWithIcon_1hrya_236 {
245
+ ._inputWithIcon_hrx0p_240 {
242
246
  padding-left: 2.5rem;
243
247
  }
244
248
 
245
- ._inputPrefix_1hrya_240,
246
- ._inputSuffix_1hrya_241 {
249
+ ._inputPrefix_hrx0p_244,
250
+ ._inputSuffix_hrx0p_245 {
247
251
  display: flex;
248
252
  align-items: center;
249
253
  padding: 0 var(--axen-space-sm, 0.5rem);
@@ -254,32 +258,32 @@ textarea._input_1hrya_32:read-only {
254
258
  white-space: nowrap;
255
259
  }
256
260
 
257
- ._inputPrefix_1hrya_240 {
261
+ ._inputPrefix_hrx0p_244 {
258
262
  border-right: none;
259
263
  border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
260
264
  }
261
265
 
262
- ._inputSuffix_1hrya_241 {
266
+ ._inputSuffix_hrx0p_245 {
263
267
  border-left: none;
264
268
  border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
265
269
  }
266
270
 
267
- ._inputGroupInput_1hrya_262 {
271
+ ._inputGroupInput_hrx0p_266 {
268
272
  border-radius: 0;
269
273
  }
270
274
 
271
- ._inputPrefix_1hrya_240 + ._inputGroupInput_1hrya_262 {
275
+ ._inputPrefix_hrx0p_244 + ._inputGroupInput_hrx0p_266 {
272
276
  border-top-left-radius: 0;
273
277
  border-bottom-left-radius: 0;
274
278
  }
275
279
 
276
- ._inputGroupInput_1hrya_262:has(+ ._inputSuffix_1hrya_241) {
280
+ ._inputGroupInput_hrx0p_266:has(+ ._inputSuffix_hrx0p_245) {
277
281
  border-top-right-radius: 0;
278
282
  border-bottom-right-radius: 0;
279
283
  }
280
284
 
281
285
  /* ── Checkbox/Radio/Switch shared ────────────── */
282
- ._inlineWrapper_1hrya_277 {
286
+ ._inlineWrapper_hrx0p_281 {
283
287
  display: flex;
284
288
  align-items: center;
285
289
  gap: var(--axen-space-sm, 0.5rem);
@@ -287,12 +291,12 @@ textarea._input_1hrya_32:read-only {
287
291
  cursor: pointer;
288
292
  }
289
293
 
290
- ._inlineWrapper_1hrya_277:has(:disabled) {
294
+ ._inlineWrapper_hrx0p_281:has(:disabled) {
291
295
  cursor: not-allowed;
292
296
  opacity: 0.6;
293
297
  }
294
298
 
295
- ._inlineLabel_1hrya_290 {
299
+ ._inlineLabel_hrx0p_294 {
296
300
  font-size: var(--axen-font-size-md, 1rem);
297
301
  color: var(--axen-color-text, #1a1a1a);
298
302
  user-select: none;
@@ -300,34 +304,34 @@ textarea._input_1hrya_32:read-only {
300
304
 
301
305
  /* ── Responsive: mobile touch targets ────────── */
302
306
  @media (max-width: 599px) {
303
- ._input_1hrya_32 {
307
+ ._input_hrx0p_32 {
304
308
  font-size: 16px; /* Prevent iOS zoom on focus */
305
309
  min-height: 48px;
306
310
  }
307
311
 
308
- ._inlineWrapper_1hrya_277 {
312
+ ._inlineWrapper_hrx0p_281 {
309
313
  min-height: 48px;
310
314
  }
311
315
  }
312
316
 
313
317
  /* ── High Contrast Mode ──────────────────────── */
314
318
  @media (prefers-contrast: more) {
315
- ._input_1hrya_32 {
319
+ ._input_hrx0p_32 {
316
320
  border-width: 2px;
317
321
  }
318
322
 
319
- ._inputError_1hrya_102 {
323
+ ._inputError_hrx0p_102 {
320
324
  border-width: 3px;
321
325
  }
322
326
 
323
- ._helperTextError_1hrya_120 {
327
+ ._helperTextError_hrx0p_120 {
324
328
  font-weight: var(--axen-font-weight-bold, 600);
325
329
  }
326
330
  }
327
331
 
328
332
  /* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
329
333
  @media (prefers-reduced-motion: reduce) {
330
- ._input_1hrya_32 {
334
+ ._input_hrx0p_32 {
331
335
  transition: none;
332
336
  }
333
337
  }`));
@@ -339,27 +343,28 @@ textarea._input_1hrya_32:read-only {
339
343
  })();
340
344
  "use strict";
341
345
  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";
346
+ const wrapper = "_wrapper_hrx0p_8";
347
+ const label = "_label_hrx0p_15";
348
+ const labelRequired = "_labelRequired_hrx0p_25";
349
+ const input = "_input_hrx0p_32";
350
+ const inputError = "_inputError_hrx0p_102";
351
+ const helperText = "_helperText_hrx0p_112";
352
+ const helperTextError = "_helperTextError_hrx0p_120";
353
+ const textarea = "_textarea_hrx0p_125";
354
+ const select = "_select_hrx0p_133";
355
+ const selectPlaceholder = "_selectPlaceholder_hrx0p_142";
356
+ const inputGroup = "_inputGroup_hrx0p_150";
357
+ const inputIconWrapper = "_inputIconWrapper_hrx0p_156";
358
+ const fieldIcon = "_fieldIcon_hrx0p_160";
359
+ const fieldIconClickable = "_fieldIconClickable_hrx0p_176";
360
+ const pickerTrigger = "_pickerTrigger_hrx0p_206";
361
+ const inputWithPicker = "_inputWithPicker_hrx0p_236";
362
+ const inputWithIcon = "_inputWithIcon_hrx0p_240";
363
+ const inputPrefix = "_inputPrefix_hrx0p_244";
364
+ const inputSuffix = "_inputSuffix_hrx0p_245";
365
+ const inputGroupInput = "_inputGroupInput_hrx0p_266";
366
+ const inlineWrapper = "_inlineWrapper_hrx0p_281";
367
+ const inlineLabel = "_inlineLabel_hrx0p_294";
363
368
  const styles = {
364
369
  wrapper,
365
370
  label,
@@ -370,6 +375,7 @@ const styles = {
370
375
  helperTextError,
371
376
  textarea,
372
377
  select,
378
+ selectPlaceholder,
373
379
  inputGroup,
374
380
  inputIconWrapper,
375
381
  fieldIcon,
@@ -403,5 +409,6 @@ exports.label = label;
403
409
  exports.labelRequired = labelRequired;
404
410
  exports.pickerTrigger = pickerTrigger;
405
411
  exports.select = select;
412
+ exports.selectPlaceholder = selectPlaceholder;
406
413
  exports.textarea = textarea;
407
414
  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_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_32:read-only,
90
+ textarea._input_hrx0p_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_hrx0p_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_hrx0p_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_hrx0p_102 {
108
108
  border-color: var(--axen-color-error, #d32f2f);
109
109
  }
110
110
 
111
- ._inputError_1hrya_102:focus {
111
+ ._inputError_hrx0p_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_hrx0p_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_hrx0p_120 {
126
126
  color: var(--axen-color-error, #d32f2f);
127
127
  }
128
128
 
129
129
  /* ── Textarea ────────────────────────────────── */
130
- ._textarea_1hrya_125 {
130
+ ._textarea_hrx0p_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_hrx0p_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,25 @@ textarea._input_1hrya_32:read-only {
144
144
  cursor: pointer;
145
145
  }
146
146
 
147
+ ._selectPlaceholder_hrx0p_142 {
148
+ color: var(--axen-color-text-disabled, #9e9e9e);
149
+ }
150
+
147
151
  /* Dark-mode override removed — axen-form is now light-only by default.
148
152
  See tokens.css for color-scheme: light declaration. */
149
153
 
150
154
  /* ── Input with prefix/suffix ────────────────── */
151
- ._inputGroup_1hrya_146 {
155
+ ._inputGroup_hrx0p_150 {
152
156
  display: flex;
153
157
  align-items: stretch;
154
158
  }
155
159
 
156
160
  /* ── Icon inside input ───────────────────────── */
157
- ._inputIconWrapper_1hrya_152 {
161
+ ._inputIconWrapper_hrx0p_156 {
158
162
  position: relative;
159
163
  }
160
164
 
161
- ._fieldIcon_1hrya_156 {
165
+ ._fieldIcon_hrx0p_160 {
162
166
  position: absolute;
163
167
  left: 0.75rem;
164
168
  top: 50%;
@@ -174,7 +178,7 @@ textarea._input_1hrya_32:read-only {
174
178
  }
175
179
 
176
180
  /* Clickable variant for icons that open pickers */
177
- ._fieldIconClickable_1hrya_172 {
181
+ ._fieldIconClickable_hrx0p_176 {
178
182
  position: absolute;
179
183
  left: 0.75rem;
180
184
  top: 50%;
@@ -193,18 +197,18 @@ textarea._input_1hrya_32:read-only {
193
197
  margin: 0;
194
198
  }
195
199
 
196
- ._fieldIconClickable_1hrya_172:hover {
200
+ ._fieldIconClickable_hrx0p_176:hover {
197
201
  color: var(--axen-color-primary, #1976d2);
198
202
  }
199
203
 
200
- ._fieldIconClickable_1hrya_172:focus-visible {
204
+ ._fieldIconClickable_hrx0p_176:focus-visible {
201
205
  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
202
206
  outline-offset: 2px;
203
207
  border-radius: var(--axen-border-radius-sm, 4px);
204
208
  }
205
209
 
206
210
  /* Right-side picker trigger button inside inputIconWrapper */
207
- ._pickerTrigger_1hrya_202 {
211
+ ._pickerTrigger_hrx0p_206 {
208
212
  position: absolute;
209
213
  right: 0.5rem;
210
214
  top: 50%;
@@ -223,27 +227,27 @@ textarea._input_1hrya_32:read-only {
223
227
  z-index: 1;
224
228
  }
225
229
 
226
- ._pickerTrigger_1hrya_202:hover {
230
+ ._pickerTrigger_hrx0p_206:hover {
227
231
  color: var(--axen-color-primary, #1976d2);
228
232
  background-color: var(--axen-color-bg-hover, #fafafa);
229
233
  }
230
234
 
231
- ._pickerTrigger_1hrya_202:focus-visible {
235
+ ._pickerTrigger_hrx0p_206:focus-visible {
232
236
  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
233
237
  outline-offset: 2px;
234
238
  }
235
239
 
236
240
  /* Input with right-side picker trigger needs extra right padding */
237
- ._inputWithPicker_1hrya_232 {
241
+ ._inputWithPicker_hrx0p_236 {
238
242
  padding-right: 2.25rem;
239
243
  }
240
244
 
241
- ._inputWithIcon_1hrya_236 {
245
+ ._inputWithIcon_hrx0p_240 {
242
246
  padding-left: 2.5rem;
243
247
  }
244
248
 
245
- ._inputPrefix_1hrya_240,
246
- ._inputSuffix_1hrya_241 {
249
+ ._inputPrefix_hrx0p_244,
250
+ ._inputSuffix_hrx0p_245 {
247
251
  display: flex;
248
252
  align-items: center;
249
253
  padding: 0 var(--axen-space-sm, 0.5rem);
@@ -254,32 +258,32 @@ textarea._input_1hrya_32:read-only {
254
258
  white-space: nowrap;
255
259
  }
256
260
 
257
- ._inputPrefix_1hrya_240 {
261
+ ._inputPrefix_hrx0p_244 {
258
262
  border-right: none;
259
263
  border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
260
264
  }
261
265
 
262
- ._inputSuffix_1hrya_241 {
266
+ ._inputSuffix_hrx0p_245 {
263
267
  border-left: none;
264
268
  border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
265
269
  }
266
270
 
267
- ._inputGroupInput_1hrya_262 {
271
+ ._inputGroupInput_hrx0p_266 {
268
272
  border-radius: 0;
269
273
  }
270
274
 
271
- ._inputPrefix_1hrya_240 + ._inputGroupInput_1hrya_262 {
275
+ ._inputPrefix_hrx0p_244 + ._inputGroupInput_hrx0p_266 {
272
276
  border-top-left-radius: 0;
273
277
  border-bottom-left-radius: 0;
274
278
  }
275
279
 
276
- ._inputGroupInput_1hrya_262:has(+ ._inputSuffix_1hrya_241) {
280
+ ._inputGroupInput_hrx0p_266:has(+ ._inputSuffix_hrx0p_245) {
277
281
  border-top-right-radius: 0;
278
282
  border-bottom-right-radius: 0;
279
283
  }
280
284
 
281
285
  /* ── Checkbox/Radio/Switch shared ────────────── */
282
- ._inlineWrapper_1hrya_277 {
286
+ ._inlineWrapper_hrx0p_281 {
283
287
  display: flex;
284
288
  align-items: center;
285
289
  gap: var(--axen-space-sm, 0.5rem);
@@ -287,12 +291,12 @@ textarea._input_1hrya_32:read-only {
287
291
  cursor: pointer;
288
292
  }
289
293
 
290
- ._inlineWrapper_1hrya_277:has(:disabled) {
294
+ ._inlineWrapper_hrx0p_281:has(:disabled) {
291
295
  cursor: not-allowed;
292
296
  opacity: 0.6;
293
297
  }
294
298
 
295
- ._inlineLabel_1hrya_290 {
299
+ ._inlineLabel_hrx0p_294 {
296
300
  font-size: var(--axen-font-size-md, 1rem);
297
301
  color: var(--axen-color-text, #1a1a1a);
298
302
  user-select: none;
@@ -300,34 +304,34 @@ textarea._input_1hrya_32:read-only {
300
304
 
301
305
  /* ── Responsive: mobile touch targets ────────── */
302
306
  @media (max-width: 599px) {
303
- ._input_1hrya_32 {
307
+ ._input_hrx0p_32 {
304
308
  font-size: 16px; /* Prevent iOS zoom on focus */
305
309
  min-height: 48px;
306
310
  }
307
311
 
308
- ._inlineWrapper_1hrya_277 {
312
+ ._inlineWrapper_hrx0p_281 {
309
313
  min-height: 48px;
310
314
  }
311
315
  }
312
316
 
313
317
  /* ── High Contrast Mode ──────────────────────── */
314
318
  @media (prefers-contrast: more) {
315
- ._input_1hrya_32 {
319
+ ._input_hrx0p_32 {
316
320
  border-width: 2px;
317
321
  }
318
322
 
319
- ._inputError_1hrya_102 {
323
+ ._inputError_hrx0p_102 {
320
324
  border-width: 3px;
321
325
  }
322
326
 
323
- ._helperTextError_1hrya_120 {
327
+ ._helperTextError_hrx0p_120 {
324
328
  font-weight: var(--axen-font-weight-bold, 600);
325
329
  }
326
330
  }
327
331
 
328
332
  /* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
329
333
  @media (prefers-reduced-motion: reduce) {
330
- ._input_1hrya_32 {
334
+ ._input_hrx0p_32 {
331
335
  transition: none;
332
336
  }
333
337
  }`));
@@ -337,27 +341,28 @@ textarea._input_1hrya_32:read-only {
337
341
  console.error("vite-plugin-css-injected-by-js", e);
338
342
  }
339
343
  })();
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";
344
+ const wrapper = "_wrapper_hrx0p_8";
345
+ const label = "_label_hrx0p_15";
346
+ const labelRequired = "_labelRequired_hrx0p_25";
347
+ const input = "_input_hrx0p_32";
348
+ const inputError = "_inputError_hrx0p_102";
349
+ const helperText = "_helperText_hrx0p_112";
350
+ const helperTextError = "_helperTextError_hrx0p_120";
351
+ const textarea = "_textarea_hrx0p_125";
352
+ const select = "_select_hrx0p_133";
353
+ const selectPlaceholder = "_selectPlaceholder_hrx0p_142";
354
+ const inputGroup = "_inputGroup_hrx0p_150";
355
+ const inputIconWrapper = "_inputIconWrapper_hrx0p_156";
356
+ const fieldIcon = "_fieldIcon_hrx0p_160";
357
+ const fieldIconClickable = "_fieldIconClickable_hrx0p_176";
358
+ const pickerTrigger = "_pickerTrigger_hrx0p_206";
359
+ const inputWithPicker = "_inputWithPicker_hrx0p_236";
360
+ const inputWithIcon = "_inputWithIcon_hrx0p_240";
361
+ const inputPrefix = "_inputPrefix_hrx0p_244";
362
+ const inputSuffix = "_inputSuffix_hrx0p_245";
363
+ const inputGroupInput = "_inputGroupInput_hrx0p_266";
364
+ const inlineWrapper = "_inlineWrapper_hrx0p_281";
365
+ const inlineLabel = "_inlineLabel_hrx0p_294";
361
366
  const styles = {
362
367
  wrapper,
363
368
  label,
@@ -368,6 +373,7 @@ const styles = {
368
373
  helperTextError,
369
374
  textarea,
370
375
  select,
376
+ selectPlaceholder,
371
377
  inputGroup,
372
378
  inputIconWrapper,
373
379
  fieldIcon,
@@ -402,6 +408,7 @@ export {
402
408
  labelRequired,
403
409
  pickerTrigger,
404
410
  select,
411
+ selectPlaceholder,
405
412
  textarea,
406
413
  wrapper
407
414
  };
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.12",
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",