@axenstudio/axen-form 0.1.1 → 0.1.4

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 (16) hide show
  1. package/README.md +6 -6
  2. package/dist/fields/EmailField/EmailField.cjs +38 -16
  3. package/dist/fields/EmailField/EmailField.d.ts.map +1 -1
  4. package/dist/fields/EmailField/EmailField.js +38 -16
  5. package/dist/fields/fieldBase.module.css +97 -78
  6. package/dist/fields/fieldBase.module.css.cjs +15 -15
  7. package/dist/fields/fieldBase.module.css.js +15 -15
  8. package/dist/react/AxenForm.cjs +25 -9
  9. package/dist/react/AxenForm.d.ts.map +1 -1
  10. package/dist/react/AxenForm.js +25 -9
  11. package/dist/react/gridCell.module.css +38 -0
  12. package/dist/react/gridCell.module.css.cjs +8 -0
  13. package/dist/react/gridCell.module.css.js +8 -0
  14. package/dist/tokens/reset.css +68 -0
  15. package/dist/tokens/tokens.css +118 -0
  16. package/package.json +1 -1
package/README.md CHANGED
@@ -488,12 +488,12 @@ import { Spacer } from '@axenstudio/axen-form';
488
488
  <Spacer basis={4} />
489
489
  ```
490
490
 
491
- | Prop | Type | Default | Description |
492
- | --- | --- | --- | --- |
493
- | `x` | `number` | `0` | Horizontal spacing multiplier (width = x × 8px) |
494
- | `y` | `number` | `0` | Vertical spacing multiplier (height = y × 8px) |
495
- | `basis` | `number` | `0` | Flex basis multiplier (basis × 8px) |
496
- | `grow` | `boolean` | `false` | Grow to fill remaining space |
491
+ | Prop | Type | Default | Description |
492
+ | ------- | --------- | ------- | ----------------------------------------------- |
493
+ | `x` | `number` | `0` | Horizontal spacing multiplier (width = x × 8px) |
494
+ | `y` | `number` | `0` | Vertical spacing multiplier (height = y × 8px) |
495
+ | `basis` | `number` | `0` | Flex basis multiplier (basis × 8px) |
496
+ | `grow` | `boolean` | `false` | Grow to fill remaining space |
497
497
 
498
498
  ---
499
499
 
package/dist/fields/EmailField/EmailField.cjs CHANGED
@@ -3,6 +3,25 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const fieldBase_module = require("../fieldBase.module.css.cjs");
5
5
  const fieldUtils = require("../fieldUtils.cjs");
6
+ const EmailIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
7
+ "svg",
8
+ {
9
+ xmlns: "http://www.w3.org/2000/svg",
10
+ width: "16",
11
+ height: "16",
12
+ viewBox: "0 0 24 24",
13
+ fill: "none",
14
+ stroke: "currentColor",
15
+ strokeWidth: "2",
16
+ strokeLinecap: "round",
17
+ strokeLinejoin: "round",
18
+ "aria-hidden": "true",
19
+ children: [
20
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
21
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
22
+ ]
23
+ }
24
+ );
6
25
  function EmailField({
7
26
  name,
8
27
  value,
@@ -27,22 +46,25 @@ function EmailField({
27
46
  children: label
28
47
  }
29
48
  ),
30
- /* @__PURE__ */ jsxRuntime.jsx(
31
- "input",
32
- {
33
- ...aria,
34
- type: "email",
35
- name,
36
- value: value ?? "",
37
- onChange,
38
- onBlur,
39
- placeholder,
40
- disabled,
41
- readOnly,
42
- autoComplete: "email",
43
- className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError)
44
- }
45
- ),
49
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputGroup, children: [
50
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inputPrefix, children: /* @__PURE__ */ jsxRuntime.jsx(EmailIcon, {}) }),
51
+ /* @__PURE__ */ jsxRuntime.jsx(
52
+ "input",
53
+ {
54
+ ...aria,
55
+ type: "email",
56
+ name,
57
+ value: value ?? "",
58
+ onChange,
59
+ onBlur,
60
+ placeholder: placeholder ?? "user@example.com",
61
+ disabled,
62
+ readOnly,
63
+ autoComplete: "email",
64
+ className: fieldUtils.cx(fieldBase_module.default.input, fieldBase_module.default.inputGroupInput, error && fieldBase_module.default.inputError)
65
+ }
66
+ )
67
+ ] }),
46
68
  helperText && /* @__PURE__ */ jsxRuntime.jsx(
47
69
  "span",
48
70
  {
package/dist/fields/EmailField/EmailField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EmailField.d.ts","sourceRoot":"","sources":["../../../src/fields/EmailField/EmailField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAsC/B"}
1
+ {"version":3,"file":"EmailField.d.ts","sourceRoot":"","sources":["../../../src/fields/EmailField/EmailField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAsBvD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CA2C/B"}
package/dist/fields/EmailField/EmailField.js CHANGED
@@ -1,6 +1,25 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import styles from "../fieldBase.module.css.js";
3
3
  import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
4
+ const EmailIcon = () => /* @__PURE__ */ jsxs(
5
+ "svg",
6
+ {
7
+ xmlns: "http://www.w3.org/2000/svg",
8
+ width: "16",
9
+ height: "16",
10
+ viewBox: "0 0 24 24",
11
+ fill: "none",
12
+ stroke: "currentColor",
13
+ strokeWidth: "2",
14
+ strokeLinecap: "round",
15
+ strokeLinejoin: "round",
16
+ "aria-hidden": "true",
17
+ children: [
18
+ /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
19
+ /* @__PURE__ */ jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
20
+ ]
21
+ }
22
+ );
4
23
  function EmailField({
5
24
  name,
6
25
  value,
@@ -25,22 +44,25 @@ function EmailField({
25
44
  children: label
26
45
  }
27
46
  ),
28
- /* @__PURE__ */ jsx(
29
- "input",
30
- {
31
- ...aria,
32
- type: "email",
33
- name,
34
- value: value ?? "",
35
- onChange,
36
- onBlur,
37
- placeholder,
38
- disabled,
39
- readOnly,
40
- autoComplete: "email",
41
- className: cx(styles.input, error && styles.inputError)
42
- }
43
- ),
47
+ /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
48
+ /* @__PURE__ */ jsx("span", { className: styles.inputPrefix, children: /* @__PURE__ */ jsx(EmailIcon, {}) }),
49
+ /* @__PURE__ */ jsx(
50
+ "input",
51
+ {
52
+ ...aria,
53
+ type: "email",
54
+ name,
55
+ value: value ?? "",
56
+ onChange,
57
+ onBlur,
58
+ placeholder: placeholder ?? "user@example.com",
59
+ disabled,
60
+ readOnly,
61
+ autoComplete: "email",
62
+ className: cx(styles.input, styles.inputGroupInput, error && styles.inputError)
63
+ }
64
+ )
65
+ ] }),
44
66
  helperText && /* @__PURE__ */ jsx(
45
67
  "span",
46
68
  {
package/dist/fields/fieldBase.module.css CHANGED
@@ -5,104 +5,116 @@
5
5
  ═══════════════════════════════════════════════ */
6
6
 
7
7
  /* ── Field Wrapper ───────────────────────────── */
8
- ._wrapper_7lsag_8 {
8
+ ._wrapper_1lnpc_8 {
9
9
  display: flex;
10
10
  flex-direction: column;
11
11
  width: 100%;
12
12
  }
13
13
 
14
14
  /* ── Label ───────────────────────────────────── */
15
- ._label_7lsag_15 {
15
+ ._label_1lnpc_15 {
16
16
  display: block;
17
- font-size: var(--axen-font-size-sm);
18
- font-weight: var(--axen-font-weight-medium);
19
- color: var(--axen-color-text);
20
- margin-bottom: var(--axen-label-margin-bottom);
21
- line-height: var(--axen-line-height);
17
+ font-size: var(--axen-font-size-sm, 0.875rem);
18
+ font-weight: var(--axen-font-weight-medium, 500);
19
+ color: var(--axen-color-text, #1a1a1a);
20
+ margin-bottom: var(--axen-label-margin-bottom, 0.375rem);
21
+ line-height: var(--axen-line-height, 1.5);
22
+ letter-spacing: 0.01em;
22
23
  }
23
24
 
24
- ._labelRequired_7lsag_24::after {
25
+ ._labelRequired_1lnpc_25::after {
25
26
  content: ' *';
26
- color: var(--axen-color-error);
27
+ color: var(--axen-color-error, #d32f2f);
28
+ font-weight: var(--axen-font-weight-bold, 600);
27
29
  }
28
30
 
29
31
  /* ── Input Base ──────────────────────────────── */
30
- ._input_7lsag_30 {
32
+ ._input_1lnpc_32 {
31
33
  display: block;
32
34
  width: 100%;
33
- height: var(--axen-field-height);
34
- min-height: var(--axen-field-min-height);
35
- padding: var(--axen-field-padding-y) var(--axen-field-padding-x);
36
- font-family: var(--axen-font-family);
37
- font-size: var(--axen-font-size-md);
38
- line-height: var(--axen-line-height);
39
- color: var(--axen-color-text);
40
- background-color: var(--axen-color-bg);
41
- border: var(--axen-border-width) solid var(--axen-color-border);
42
- border-radius: var(--axen-border-radius);
35
+ height: var(--axen-field-height, 2.75rem);
36
+ min-height: var(--axen-field-min-height, 44px);
37
+ padding: var(--axen-field-padding-y, 0.5rem) var(--axen-field-padding-x, 0.75rem);
38
+ font-family: var(
39
+ --axen-font-family,
40
+ -apple-system,
41
+ BlinkMacSystemFont,
42
+ 'Segoe UI',
43
+ Roboto,
44
+ 'Helvetica Neue',
45
+ Arial,
46
+ sans-serif
47
+ );
48
+ font-size: var(--axen-font-size-md, 1rem);
49
+ line-height: var(--axen-line-height, 1.5);
50
+ color: var(--axen-color-text, #1a1a1a);
51
+ background-color: var(--axen-color-bg, #ffffff);
52
+ border: var(--axen-border-width, 1px) solid var(--axen-color-border, #c4c4c4);
53
+ border-radius: var(--axen-border-radius, 6px);
43
54
  transition:
44
- border-color var(--axen-transition-fast),
45
- box-shadow var(--axen-transition-fast);
55
+ border-color var(--axen-transition-fast, 150ms ease),
56
+ box-shadow var(--axen-transition-fast, 150ms ease);
46
57
  outline: none;
47
58
  }
48
59
 
49
- ._input_7lsag_30::placeholder {
50
- color: var(--axen-color-text-disabled);
60
+ ._input_1lnpc_32::placeholder {
61
+ color: var(--axen-color-text-disabled, #9e9e9e);
51
62
  }
52
63
 
53
- ._input_7lsag_30:hover:not(:disabled):not(:read-only) {
54
- border-color: var(--axen-color-border-hover);
64
+ ._input_1lnpc_32:hover:not(:disabled):not(:read-only) {
65
+ border-color: var(--axen-color-border-hover, #888888);
55
66
  }
56
67
 
57
- /* Focus-visible ring (A11y: keyboard-only focus indicator) */
58
- ._input_7lsag_30:focus-visible {
59
- border-color: var(--axen-color-border-focus);
60
- box-shadow: var(--axen-shadow-focus);
68
+ /* Focus ring (keyboard + mouse) */
69
+ ._input_1lnpc_32:focus {
70
+ border-color: var(--axen-color-border-focus, var(--axen-color-primary, #1976d2));
71
+ box-shadow: var(--axen-shadow-focus, 0 0 0 2px rgba(25, 118, 210, 0.5));
61
72
  outline: none;
62
73
  }
63
74
 
64
- ._input_7lsag_30:disabled {
65
- background-color: var(--axen-color-bg-disabled);
66
- color: var(--axen-color-text-disabled);
75
+ ._input_1lnpc_32:disabled {
76
+ background-color: var(--axen-color-bg-disabled, #f5f5f5);
77
+ color: var(--axen-color-text-disabled, #9e9e9e);
67
78
  cursor: not-allowed;
68
79
  }
69
80
 
70
- ._input_7lsag_30:read-only {
71
- background-color: var(--axen-color-bg-disabled);
81
+ ._input_1lnpc_32:read-only {
82
+ background-color: var(--axen-color-bg-disabled, #f5f5f5);
72
83
  }
73
84
 
74
85
  /* ── Error State ─────────────────────────────── */
75
- ._inputError_7lsag_75 {
76
- border-color: var(--axen-color-error);
86
+ ._inputError_1lnpc_86 {
87
+ border-color: var(--axen-color-error, #d32f2f);
77
88
  }
78
89
 
79
- ._inputError_7lsag_75:focus-visible {
80
- border-color: var(--axen-color-error);
81
- box-shadow: 0 0 0 var(--axen-focus-ring-width) rgba(211, 47, 47, 0.3);
90
+ ._inputError_1lnpc_86:focus {
91
+ border-color: var(--axen-color-error, #d32f2f);
92
+ box-shadow: 0 0 0 var(--axen-focus-ring-width, 2px) rgba(211, 47, 47, 0.3);
82
93
  }
83
94
 
84
95
  /* ── Helper Text ─────────────────────────────── */
85
- ._helperText_7lsag_85 {
96
+ ._helperText_1lnpc_96 {
86
97
  display: block;
87
- font-size: var(--axen-font-size-xs);
88
- color: var(--axen-color-text-secondary);
89
- margin-top: var(--axen-helper-margin-top);
90
- line-height: var(--axen-line-height);
98
+ font-size: var(--axen-font-size-xs, 0.75rem);
99
+ color: var(--axen-color-text-secondary, #666666);
100
+ margin-top: var(--axen-helper-margin-top, 0.25rem);
101
+ line-height: var(--axen-line-height, 1.5);
91
102
  }
92
103
 
93
- ._helperTextError_7lsag_93 {
94
- color: var(--axen-color-error);
104
+ ._helperTextError_1lnpc_104 {
105
+ color: var(--axen-color-error, #d32f2f);
95
106
  }
96
107
 
97
108
  /* ── Textarea ────────────────────────────────── */
98
- ._textarea_7lsag_98 {
109
+ ._textarea_1lnpc_109 {
99
110
  height: auto;
100
- min-height: calc(var(--axen-field-min-height) * 2);
111
+ min-height: calc(var(--axen-field-min-height, 44px) * 2);
101
112
  resize: vertical;
113
+ padding-top: var(--axen-field-padding-x, 0.75rem);
102
114
  }
103
115
 
104
116
  /* ── Select ──────────────────────────────────── */
105
- ._select_7lsag_105 {
117
+ ._select_1lnpc_117 {
106
118
  appearance: none;
107
119
  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");
108
120
  background-repeat: no-repeat;
@@ -112,90 +124,97 @@
112
124
  }
113
125
 
114
126
  /* ── Input with prefix/suffix ────────────────── */
115
- ._inputGroup_7lsag_115 {
127
+ ._inputGroup_1lnpc_127 {
116
128
  display: flex;
117
129
  align-items: stretch;
118
130
  }
119
131
 
120
- ._inputPrefix_7lsag_120,
121
- ._inputSuffix_7lsag_121 {
132
+ ._inputPrefix_1lnpc_132,
133
+ ._inputSuffix_1lnpc_133 {
122
134
  display: flex;
123
135
  align-items: center;
124
- padding: 0 var(--axen-space-sm);
125
- font-size: var(--axen-font-size-sm);
126
- color: var(--axen-color-text-secondary);
127
- background-color: var(--axen-color-bg-hover);
128
- border: var(--axen-border-width) solid var(--axen-color-border);
136
+ padding: 0 var(--axen-space-sm, 0.5rem);
137
+ font-size: var(--axen-font-size-sm, 0.875rem);
138
+ color: var(--axen-color-text-secondary, #666666);
139
+ background-color: var(--axen-color-bg-hover, #fafafa);
140
+ border: var(--axen-border-width, 1px) solid var(--axen-color-border, #c4c4c4);
129
141
  white-space: nowrap;
130
142
  }
131
143
 
132
- ._inputPrefix_7lsag_120 {
144
+ ._inputPrefix_1lnpc_132 {
133
145
  border-right: none;
134
- border-radius: var(--axen-border-radius) 0 0 var(--axen-border-radius);
146
+ border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
135
147
  }
136
148
 
137
- ._inputSuffix_7lsag_121 {
149
+ ._inputSuffix_1lnpc_133 {
138
150
  border-left: none;
139
- border-radius: 0 var(--axen-border-radius) var(--axen-border-radius) 0;
151
+ border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
140
152
  }
141
153
 
142
- ._inputGroupInput_7lsag_142 {
154
+ ._inputGroupInput_1lnpc_154 {
143
155
  border-radius: 0;
144
156
  }
145
157
 
146
- ._inputPrefix_7lsag_120 + ._inputGroupInput_7lsag_142 {
158
+ ._inputPrefix_1lnpc_132 + ._inputGroupInput_1lnpc_154 {
147
159
  border-top-left-radius: 0;
148
160
  border-bottom-left-radius: 0;
149
161
  }
150
162
 
151
- ._inputGroupInput_7lsag_142:has(+ ._inputSuffix_7lsag_121) {
163
+ ._inputGroupInput_1lnpc_154:has(+ ._inputSuffix_1lnpc_133) {
152
164
  border-top-right-radius: 0;
153
165
  border-bottom-right-radius: 0;
154
166
  }
155
167
 
156
168
  /* ── Checkbox/Radio/Switch shared ────────────── */
157
- ._inlineWrapper_7lsag_157 {
169
+ ._inlineWrapper_1lnpc_169 {
158
170
  display: flex;
159
171
  align-items: center;
160
- gap: var(--axen-space-sm);
161
- min-height: var(--axen-field-min-height);
172
+ gap: var(--axen-space-sm, 0.5rem);
173
+ min-height: var(--axen-field-min-height, 44px);
162
174
  cursor: pointer;
163
175
  }
164
176
 
165
- ._inlineWrapper_7lsag_157:has(:disabled) {
177
+ ._inlineWrapper_1lnpc_169:has(:disabled) {
166
178
  cursor: not-allowed;
167
179
  opacity: 0.6;
168
180
  }
169
181
 
170
- ._inlineLabel_7lsag_170 {
171
- font-size: var(--axen-font-size-md);
172
- color: var(--axen-color-text);
182
+ ._inlineLabel_1lnpc_182 {
183
+ font-size: var(--axen-font-size-md, 1rem);
184
+ color: var(--axen-color-text, #1a1a1a);
173
185
  user-select: none;
174
186
  }
175
187
 
176
188
  /* ── Responsive: mobile touch targets ────────── */
177
189
  @media (max-width: 599px) {
178
- ._input_7lsag_30 {
190
+ ._input_1lnpc_32 {
179
191
  font-size: 16px; /* Prevent iOS zoom on focus */
180
192
  min-height: 48px;
181
193
  }
182
194
 
183
- ._inlineWrapper_7lsag_157 {
195
+ ._inlineWrapper_1lnpc_169 {
184
196
  min-height: 48px;
185
197
  }
186
198
  }
187
199
 
188
200
  /* ── High Contrast Mode ──────────────────────── */
189
201
  @media (prefers-contrast: more) {
190
- ._input_7lsag_30 {
202
+ ._input_1lnpc_32 {
191
203
  border-width: 2px;
192
204
  }
193
205
 
194
- ._inputError_7lsag_75 {
206
+ ._inputError_1lnpc_86 {
195
207
  border-width: 3px;
196
208
  }
197
209
 
198
- ._helperTextError_7lsag_93 {
199
- font-weight: var(--axen-font-weight-bold);
210
+ ._helperTextError_1lnpc_104 {
211
+ font-weight: var(--axen-font-weight-bold, 600);
212
+ }
213
+ }
214
+
215
+ /* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
216
+ @media (prefers-reduced-motion: reduce) {
217
+ ._input_1lnpc_32 {
218
+ transition: none;
200
219
  }
201
220
  }
package/dist/fields/fieldBase.module.css.cjs CHANGED
@@ -1,20 +1,20 @@
1
1
  "use strict";
2
2
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const wrapper = "_wrapper_7lsag_8";
4
- const label = "_label_7lsag_15";
5
- const labelRequired = "_labelRequired_7lsag_24";
6
- const input = "_input_7lsag_30";
7
- const inputError = "_inputError_7lsag_75";
8
- const helperText = "_helperText_7lsag_85";
9
- const helperTextError = "_helperTextError_7lsag_93";
10
- const textarea = "_textarea_7lsag_98";
11
- const select = "_select_7lsag_105";
12
- const inputGroup = "_inputGroup_7lsag_115";
13
- const inputPrefix = "_inputPrefix_7lsag_120";
14
- const inputSuffix = "_inputSuffix_7lsag_121";
15
- const inputGroupInput = "_inputGroupInput_7lsag_142";
16
- const inlineWrapper = "_inlineWrapper_7lsag_157";
17
- const inlineLabel = "_inlineLabel_7lsag_170";
3
+ const wrapper = "_wrapper_1lnpc_8";
4
+ const label = "_label_1lnpc_15";
5
+ const labelRequired = "_labelRequired_1lnpc_25";
6
+ const input = "_input_1lnpc_32";
7
+ const inputError = "_inputError_1lnpc_86";
8
+ const helperText = "_helperText_1lnpc_96";
9
+ const helperTextError = "_helperTextError_1lnpc_104";
10
+ const textarea = "_textarea_1lnpc_109";
11
+ const select = "_select_1lnpc_117";
12
+ const inputGroup = "_inputGroup_1lnpc_127";
13
+ const inputPrefix = "_inputPrefix_1lnpc_132";
14
+ const inputSuffix = "_inputSuffix_1lnpc_133";
15
+ const inputGroupInput = "_inputGroupInput_1lnpc_154";
16
+ const inlineWrapper = "_inlineWrapper_1lnpc_169";
17
+ const inlineLabel = "_inlineLabel_1lnpc_182";
18
18
  const styles = {
19
19
  wrapper,
20
20
  label,
package/dist/fields/fieldBase.module.css.js CHANGED
@@ -1,18 +1,18 @@
1
- const wrapper = "_wrapper_7lsag_8";
2
- const label = "_label_7lsag_15";
3
- const labelRequired = "_labelRequired_7lsag_24";
4
- const input = "_input_7lsag_30";
5
- const inputError = "_inputError_7lsag_75";
6
- const helperText = "_helperText_7lsag_85";
7
- const helperTextError = "_helperTextError_7lsag_93";
8
- const textarea = "_textarea_7lsag_98";
9
- const select = "_select_7lsag_105";
10
- const inputGroup = "_inputGroup_7lsag_115";
11
- const inputPrefix = "_inputPrefix_7lsag_120";
12
- const inputSuffix = "_inputSuffix_7lsag_121";
13
- const inputGroupInput = "_inputGroupInput_7lsag_142";
14
- const inlineWrapper = "_inlineWrapper_7lsag_157";
15
- const inlineLabel = "_inlineLabel_7lsag_170";
1
+ const wrapper = "_wrapper_1lnpc_8";
2
+ const label = "_label_1lnpc_15";
3
+ const labelRequired = "_labelRequired_1lnpc_25";
4
+ const input = "_input_1lnpc_32";
5
+ const inputError = "_inputError_1lnpc_86";
6
+ const helperText = "_helperText_1lnpc_96";
7
+ const helperTextError = "_helperTextError_1lnpc_104";
8
+ const textarea = "_textarea_1lnpc_109";
9
+ const select = "_select_1lnpc_117";
10
+ const inputGroup = "_inputGroup_1lnpc_127";
11
+ const inputPrefix = "_inputPrefix_1lnpc_132";
12
+ const inputSuffix = "_inputSuffix_1lnpc_133";
13
+ const inputGroupInput = "_inputGroupInput_1lnpc_154";
14
+ const inlineWrapper = "_inlineWrapper_1lnpc_169";
15
+ const inlineLabel = "_inlineLabel_1lnpc_182";
16
16
  const styles = {
17
17
  wrapper,
18
18
  label,
package/dist/react/AxenForm.cjs CHANGED
@@ -3,14 +3,18 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
5
  const payloadUtils = require("../core/payloadUtils.cjs");
6
+ const defaultComponentMap = require("../fields/defaultComponentMap.cjs");
7
+ ;/* empty css */
8
+ ;/* empty css */
6
9
  const FormContext = require("./FormContext.cjs");
10
+ const gridCell_module = require("./gridCell.module.css.cjs");
7
11
  const useAxenForm = require("./useAxenForm.cjs");
8
12
  const useField = require("./useField.cjs");
9
13
  function AxenFormInner(props, ref) {
10
14
  const {
11
15
  config,
12
16
  onSubmit,
13
- components = {},
17
+ components,
14
18
  validationAdapter,
15
19
  payloadFields,
16
20
  payloadDiscriminator,
@@ -22,6 +26,10 @@ function AxenFormInner(props, ref) {
22
26
  validateOnBlur,
23
27
  children
24
28
  } = props;
29
+ const mergedComponents = react.useMemo(
30
+ () => ({ ...defaultComponentMap.defaultComponentMap, ...components }),
31
+ [components]
32
+ );
25
33
  const wrappedOnSubmit = react.useMemo(() => {
26
34
  if (!payloadFields) return onSubmit;
27
35
  return async (values, meta) => {
@@ -48,10 +56,10 @@ function AxenFormInner(props, ref) {
48
56
  () => ({
49
57
  store,
50
58
  fields: config.fields,
51
- components,
59
+ components: mergedComponents,
52
60
  disabled
53
61
  }),
54
- [store, config.fields, components, disabled]
62
+ [store, config.fields, mergedComponents, disabled]
55
63
  );
56
64
  const gridStyle = react.useMemo(
57
65
  () => ({
@@ -90,8 +98,8 @@ function AxenFieldRenderer({
90
98
  }
91
99
  const showError = touched && !!error;
92
100
  const helperText = showError ? error : config.helperText;
93
- const colSpanStyle = resolveColSpan(config.colSpan);
94
- return /* @__PURE__ */ jsxRuntime.jsx("div", { style: colSpanStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
101
+ const { className: colClassName, style: colStyle } = resolveColSpan(config.colSpan);
102
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: colClassName, style: colStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
95
103
  Component,
96
104
  {
97
105
  name: config.name,
@@ -124,11 +132,19 @@ function AxenFieldRenderer({
124
132
  ) });
125
133
  }
126
134
  function resolveColSpan(colSpan) {
127
- if (!colSpan) return { gridColumn: "span 12" };
135
+ if (!colSpan) {
136
+ return { className: gridCell_module.default.cell, style: { "--col-xs": 12 } };
137
+ }
128
138
  if (typeof colSpan === "number") {
129
- return { gridColumn: `span ${colSpan}` };
139
+ return { className: gridCell_module.default.cell, style: { "--col-xs": colSpan } };
130
140
  }
131
- const xs = colSpan.xs ?? 12;
132
- return { gridColumn: `span ${xs}` };
141
+ const vars = {};
142
+ if (colSpan.xs != null) vars["--col-xs"] = colSpan.xs;
143
+ if (colSpan.sm != null) vars["--col-sm"] = colSpan.sm;
144
+ if (colSpan.md != null) vars["--col-md"] = colSpan.md;
145
+ if (colSpan.lg != null) vars["--col-lg"] = colSpan.lg;
146
+ if (colSpan.xl != null) vars["--col-xl"] = colSpan.xl;
147
+ if (!("--col-xs" in vars)) vars["--col-xs"] = 12;
148
+ return { className: gridCell_module.default.cell, style: vars };
133
149
  }
134
150
  exports.AxenForm = AxenForm;
package/dist/react/AxenForm.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AxenForm.d.ts","sourceRoot":"","sources":["../../src/react/AxenForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjF,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAsC,MAAM,UAAU,CAAC;AAyF/F,eAAO,MAAM,QAAQ,EAAgC,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3F,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAAE,KACnF,SAAS,CAAC"}
1
+ {"version":3,"file":"AxenForm.d.ts","sourceRoot":"","sources":["../../src/react/AxenForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAsC,MAAM,UAAU,CAAC;AAgG/F,eAAO,MAAM,QAAQ,EAAgC,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3F,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAAE,KACnF,SAAS,CAAC"}
package/dist/react/AxenForm.js CHANGED
@@ -1,14 +1,18 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useMemo, useImperativeHandle } from "react";
3
3
  import { mapPayload } from "../core/payloadUtils.js";
4
+ import { defaultComponentMap } from "../fields/defaultComponentMap.js";
5
+ /* empty css */
6
+ /* empty css */
4
7
  import { FormContext, useFormContext } from "./FormContext.js";
8
+ import gridStyles from "./gridCell.module.css.js";
5
9
  import { useAxenForm } from "./useAxenForm.js";
6
10
  import { useField } from "./useField.js";
7
11
  function AxenFormInner(props, ref) {
8
12
  const {
9
13
  config,
10
14
  onSubmit,
11
- components = {},
15
+ components,
12
16
  validationAdapter,
13
17
  payloadFields,
14
18
  payloadDiscriminator,
@@ -20,6 +24,10 @@ function AxenFormInner(props, ref) {
20
24
  validateOnBlur,
21
25
  children
22
26
  } = props;
27
+ const mergedComponents = useMemo(
28
+ () => ({ ...defaultComponentMap, ...components }),
29
+ [components]
30
+ );
23
31
  const wrappedOnSubmit = useMemo(() => {
24
32
  if (!payloadFields) return onSubmit;
25
33
  return async (values, meta) => {
@@ -46,10 +54,10 @@ function AxenFormInner(props, ref) {
46
54
  () => ({
47
55
  store,
48
56
  fields: config.fields,
49
- components,
57
+ components: mergedComponents,
50
58
  disabled
51
59
  }),
52
- [store, config.fields, components, disabled]
60
+ [store, config.fields, mergedComponents, disabled]
53
61
  );
54
62
  const gridStyle = useMemo(
55
63
  () => ({
@@ -88,8 +96,8 @@ function AxenFieldRenderer({
88
96
  }
89
97
  const showError = touched && !!error;
90
98
  const helperText = showError ? error : config.helperText;
91
- const colSpanStyle = resolveColSpan(config.colSpan);
92
- return /* @__PURE__ */ jsx("div", { style: colSpanStyle, children: /* @__PURE__ */ jsx(
99
+ const { className: colClassName, style: colStyle } = resolveColSpan(config.colSpan);
100
+ return /* @__PURE__ */ jsx("div", { className: colClassName, style: colStyle, children: /* @__PURE__ */ jsx(
93
101
  Component,
94
102
  {
95
103
  name: config.name,
@@ -122,12 +130,20 @@ function AxenFieldRenderer({
122
130
  ) });
123
131
  }
124
132
  function resolveColSpan(colSpan) {
125
- if (!colSpan) return { gridColumn: "span 12" };
133
+ if (!colSpan) {
134
+ return { className: gridStyles.cell, style: { "--col-xs": 12 } };
135
+ }
126
136
  if (typeof colSpan === "number") {
127
- return { gridColumn: `span ${colSpan}` };
137
+ return { className: gridStyles.cell, style: { "--col-xs": colSpan } };
128
138
  }
129
- const xs = colSpan.xs ?? 12;
130
- return { gridColumn: `span ${xs}` };
139
+ const vars = {};
140
+ if (colSpan.xs != null) vars["--col-xs"] = colSpan.xs;
141
+ if (colSpan.sm != null) vars["--col-sm"] = colSpan.sm;
142
+ if (colSpan.md != null) vars["--col-md"] = colSpan.md;
143
+ if (colSpan.lg != null) vars["--col-lg"] = colSpan.lg;
144
+ if (colSpan.xl != null) vars["--col-xl"] = colSpan.xl;
145
+ if (!("--col-xs" in vars)) vars["--col-xs"] = 12;
146
+ return { className: gridStyles.cell, style: vars };
131
147
  }
132
148
  export {
133
149
  AxenForm
package/dist/react/gridCell.module.css ADDED
@@ -0,0 +1,38 @@
1
+ /* ═══════════════════════════════════════════════
2
+ axen-form Grid Cell — Responsive colSpan
3
+ Uses CSS custom properties + media queries
4
+ ═══════════════════════════════════════════════ */
5
+
6
+ ._cell_s3hwz_6 {
7
+ --_col: var(--col-xs, 12);
8
+ grid-column: span var(--_col);
9
+ min-width: 0; /* Prevent grid blowout from long content */
10
+ }
11
+
12
+ /* sm ≥ 600px */
13
+ @media (min-width: 600px) {
14
+ ._cell_s3hwz_6 {
15
+ --_col: var(--col-sm, var(--col-xs, 12));
16
+ }
17
+ }
18
+
19
+ /* md ≥ 900px */
20
+ @media (min-width: 900px) {
21
+ ._cell_s3hwz_6 {
22
+ --_col: var(--col-md, var(--col-sm, var(--col-xs, 12)));
23
+ }
24
+ }
25
+
26
+ /* lg ≥ 1200px */
27
+ @media (min-width: 1200px) {
28
+ ._cell_s3hwz_6 {
29
+ --_col: var(--col-lg, var(--col-md, var(--col-sm, var(--col-xs, 12))));
30
+ }
31
+ }
32
+
33
+ /* xl ≥ 1536px */
34
+ @media (min-width: 1536px) {
35
+ ._cell_s3hwz_6 {
36
+ --_col: var(--col-xl, var(--col-lg, var(--col-md, var(--col-sm, var(--col-xs, 12)))));
37
+ }
38
+ }
package/dist/react/gridCell.module.css.cjs ADDED
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const cell = "_cell_s3hwz_6";
4
+ const gridStyles = {
5
+ cell
6
+ };
7
+ exports.cell = cell;
8
+ exports.default = gridStyles;
package/dist/react/gridCell.module.css.js ADDED
@@ -0,0 +1,8 @@
1
+ const cell = "_cell_s3hwz_6";
2
+ const gridStyles = {
3
+ cell
4
+ };
5
+ export {
6
+ cell,
7
+ gridStyles as default
8
+ };
package/dist/tokens/reset.css ADDED
@@ -0,0 +1,68 @@
1
+ /* ═══════════════════════════════════════════════
2
+ axen-form CSS Reset
3
+ Minimal reset for form elements
4
+ ═══════════════════════════════════════════════ */
5
+
6
+ *,
7
+ *::before,
8
+ *::after {
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ /* Reset form element defaults */
13
+ input,
14
+ textarea,
15
+ select,
16
+ button {
17
+ font-family: inherit;
18
+ font-size: inherit;
19
+ line-height: inherit;
20
+ color: inherit;
21
+ margin: 0;
22
+ }
23
+
24
+ /* Remove default styling from number inputs */
25
+ input[type='number']::-webkit-inner-spin-button,
26
+ input[type='number']::-webkit-outer-spin-button {
27
+ -webkit-appearance: none;
28
+ margin: 0;
29
+ }
30
+
31
+ input[type='number'] {
32
+ -moz-appearance: textfield;
33
+ appearance: textfield;
34
+ }
35
+
36
+ /* Remove default date/time input icons if using custom components */
37
+ input[type='date']::-webkit-calendar-picker-indicator,
38
+ input[type='time']::-webkit-calendar-picker-indicator,
39
+ input[type='datetime-local']::-webkit-calendar-picker-indicator {
40
+ cursor: pointer;
41
+ }
42
+
43
+ /* Ensure fieldset/legend reset */
44
+ fieldset {
45
+ border: none;
46
+ padding: 0;
47
+ margin: 0;
48
+ }
49
+
50
+ legend {
51
+ padding: 0;
52
+ }
53
+
54
+ /* Remove textarea resize handle (can be overridden) */
55
+ textarea {
56
+ resize: vertical;
57
+ }
58
+
59
+ /* Focus visible only — keyboard navigation (A11y) */
60
+ :focus:not(:focus-visible) {
61
+ outline: none;
62
+ }
63
+
64
+ :focus-visible {
65
+ outline: var(--axen-focus-ring-width, 2px) solid
66
+ var(--axen-focus-ring-color, rgba(25, 118, 210, 0.5));
67
+ outline-offset: var(--axen-focus-ring-offset, 2px);
68
+ }
package/dist/tokens/tokens.css ADDED
@@ -0,0 +1,118 @@
1
+ /* ═══════════════════════════════════════════════
2
+ axen-form Design Tokens
3
+ CSS Custom Properties — A11y-aware & Responsive
4
+ ═══════════════════════════════════════════════ */
5
+
6
+ :root {
7
+ /* ── Color Palette ─────────────────────────── */
8
+ --axen-color-primary: #1976d2;
9
+ --axen-color-primary-hover: #1565c0;
10
+ --axen-color-primary-light: #e3f2fd;
11
+ --axen-color-error: #d32f2f;
12
+ --axen-color-error-light: #fdecea;
13
+ --axen-color-success: #2e7d32;
14
+ --axen-color-warning: #ed6c02;
15
+ --axen-color-text: #1a1a1a;
16
+ --axen-color-text-secondary: #666666;
17
+ --axen-color-text-disabled: #9e9e9e;
18
+ --axen-color-border: #c4c4c4;
19
+ --axen-color-border-hover: #888888;
20
+ --axen-color-border-focus: var(--axen-color-primary);
21
+ --axen-color-bg: #ffffff;
22
+ --axen-color-bg-disabled: #f5f5f5;
23
+ --axen-color-bg-hover: #fafafa;
24
+
25
+ /* ── Typography ────────────────────────────── */
26
+ --axen-font-family:
27
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
28
+ --axen-font-size-xs: 0.75rem;
29
+ --axen-font-size-sm: 0.875rem;
30
+ --axen-font-size-md: 1rem;
31
+ --axen-font-size-lg: 1.125rem;
32
+ --axen-font-weight-normal: 400;
33
+ --axen-font-weight-medium: 500;
34
+ --axen-font-weight-bold: 600;
35
+ --axen-line-height: 1.5;
36
+
37
+ /* ── Spacing ───────────────────────────────── */
38
+ --axen-space-xs: 0.25rem;
39
+ --axen-space-sm: 0.5rem;
40
+ --axen-space-md: 1rem;
41
+ --axen-space-lg: 1.5rem;
42
+ --axen-space-xl: 2rem;
43
+
44
+ /* ── Border & Radius ───────────────────────── */
45
+ --axen-border-width: 1px;
46
+ --axen-border-radius: 6px;
47
+ --axen-border-radius-sm: 4px;
48
+ --axen-border-radius-lg: 8px;
49
+ --axen-border-radius-pill: 9999px;
50
+
51
+ /* ── Focus Ring (A11y: WCAG 2.4.7) ─────────── */
52
+ --axen-focus-ring-width: 2px;
53
+ --axen-focus-ring-offset: 2px;
54
+ --axen-focus-ring-color: rgba(25, 118, 210, 0.5);
55
+
56
+ /* ── Field Sizing ──────────────────────────── */
57
+ --axen-field-height: 2.75rem;
58
+ --axen-field-min-height: 44px; /* A11y: min 44px touch target */
59
+ --axen-field-padding-x: 0.75rem;
60
+ --axen-field-padding-y: 0.5rem;
61
+ --axen-label-margin-bottom: 0.375rem;
62
+ --axen-helper-margin-top: 0.25rem;
63
+
64
+ /* ── Transitions ───────────────────────────── */
65
+ --axen-transition-fast: 150ms ease;
66
+ --axen-transition-normal: 200ms ease;
67
+
68
+ /* ── Shadows ───────────────────────────────── */
69
+ --axen-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
70
+ --axen-shadow-focus: 0 0 0 var(--axen-focus-ring-width) var(--axen-focus-ring-color);
71
+
72
+ /* ── Breakpoints (for reference in JS) ─────── */
73
+ --axen-bp-sm: 600px;
74
+ --axen-bp-md: 900px;
75
+ --axen-bp-lg: 1200px;
76
+ --axen-bp-xl: 1536px;
77
+
78
+ /* ── Z-index layers ────────────────────────── */
79
+ --axen-z-dropdown: 100;
80
+ --axen-z-tooltip: 200;
81
+ }
82
+
83
+ /* ── Dark Mode (respects system) ────────────── */
84
+ @media (prefers-color-scheme: dark) {
85
+ :root {
86
+ --axen-color-text: #e0e0e0;
87
+ --axen-color-text-secondary: #a0a0a0;
88
+ --axen-color-text-disabled: #666666;
89
+ --axen-color-border: #555555;
90
+ --axen-color-border-hover: #888888;
91
+ --axen-color-bg: #1e1e1e;
92
+ --axen-color-bg-disabled: #2a2a2a;
93
+ --axen-color-bg-hover: #2e2e2e;
94
+ --axen-color-primary-light: #1a3a5c;
95
+ --axen-color-error-light: #3d1c1c;
96
+ --axen-focus-ring-color: rgba(66, 165, 245, 0.6);
97
+ }
98
+ }
99
+
100
+ /* ── High Contrast Mode (A11y) ──────────────── */
101
+ @media (prefers-contrast: more) {
102
+ :root {
103
+ --axen-color-border: #000000;
104
+ --axen-color-text: #000000;
105
+ --axen-color-text-secondary: #333333;
106
+ --axen-border-width: 2px;
107
+ --axen-focus-ring-width: 3px;
108
+ --axen-focus-ring-color: rgba(0, 0, 0, 0.8);
109
+ }
110
+ }
111
+
112
+ /* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
113
+ @media (prefers-reduced-motion: reduce) {
114
+ :root {
115
+ --axen-transition-fast: 0ms;
116
+ --axen-transition-normal: 0ms;
117
+ }
118
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axenstudio/axen-form",
3
- "version": "0.1.1",
3
+ "version": "0.1.4",
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",