@axenstudio/axen-form 0.1.9 → 0.1.11

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 (101) hide show
  1. package/README.md +783 -270
  2. package/dist/core/dateUtils.cjs +7 -3
  3. package/dist/core/dateUtils.d.ts +1 -1
  4. package/dist/core/dateUtils.d.ts.map +1 -1
  5. package/dist/core/dateUtils.js +7 -3
  6. package/dist/core/validation.cjs +4 -1
  7. package/dist/core/validation.d.ts.map +1 -1
  8. package/dist/core/validation.js +4 -1
  9. package/dist/fields/AutocompleteField/AutocompleteField.cjs +32 -32
  10. package/dist/fields/AutocompleteField/AutocompleteField.js +32 -32
  11. package/dist/fields/AutocompleteField/AutocompleteField.module.css.cjs +34 -13
  12. package/dist/fields/AutocompleteField/AutocompleteField.module.css.js +34 -13
  13. package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.cjs +90 -88
  14. package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.d.ts.map +1 -1
  15. package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.js +90 -88
  16. package/dist/fields/AutocompletePredictField/AutocompletePredictField.cjs +81 -64
  17. package/dist/fields/AutocompletePredictField/AutocompletePredictField.d.ts.map +1 -1
  18. package/dist/fields/AutocompletePredictField/AutocompletePredictField.js +81 -64
  19. package/dist/fields/CheckboxField/CheckboxField.module.css.cjs +12 -0
  20. package/dist/fields/CheckboxField/CheckboxField.module.css.js +12 -0
  21. package/dist/fields/ColorField/ColorField.module.css.cjs +12 -0
  22. package/dist/fields/ColorField/ColorField.module.css.js +12 -0
  23. package/dist/fields/DateField/DateField.cjs +56 -4
  24. package/dist/fields/DateField/DateField.d.ts +1 -1
  25. package/dist/fields/DateField/DateField.d.ts.map +1 -1
  26. package/dist/fields/DateField/DateField.js +56 -4
  27. package/dist/fields/DateField/DatePicker.cjs +194 -0
  28. package/dist/fields/DateField/DatePicker.d.ts +11 -0
  29. package/dist/fields/DateField/DatePicker.d.ts.map +1 -0
  30. package/dist/fields/DateField/DatePicker.js +194 -0
  31. package/dist/fields/DateField/DatePicker.module.css.cjs +62 -0
  32. package/dist/fields/DateField/DatePicker.module.css.js +62 -0
  33. package/dist/fields/DateTimeField/DateTimeField.cjs +126 -8
  34. package/dist/fields/DateTimeField/DateTimeField.d.ts +2 -1
  35. package/dist/fields/DateTimeField/DateTimeField.d.ts.map +1 -1
  36. package/dist/fields/DateTimeField/DateTimeField.js +126 -8
  37. package/dist/fields/PasswordField/PasswordField.module.css.cjs +12 -0
  38. package/dist/fields/PasswordField/PasswordField.module.css.js +12 -0
  39. package/dist/fields/RadioField/RadioField.module.css.cjs +12 -0
  40. package/dist/fields/RadioField/RadioField.module.css.js +12 -0
  41. package/dist/fields/SliderField/SliderField.module.css.cjs +15 -3
  42. package/dist/fields/SliderField/SliderField.module.css.js +15 -3
  43. package/dist/fields/SwitchField/SwitchField.module.css.cjs +12 -0
  44. package/dist/fields/SwitchField/SwitchField.module.css.js +12 -0
  45. package/dist/fields/TimeField/TimeField.cjs +60 -5
  46. package/dist/fields/TimeField/TimeField.d.ts +2 -1
  47. package/dist/fields/TimeField/TimeField.d.ts.map +1 -1
  48. package/dist/fields/TimeField/TimeField.js +60 -5
  49. package/dist/fields/TimeField/TimePicker.cjs +182 -0
  50. package/dist/fields/TimeField/TimePicker.d.ts +11 -0
  51. package/dist/fields/TimeField/TimePicker.d.ts.map +1 -0
  52. package/dist/fields/TimeField/TimePicker.js +182 -0
  53. package/dist/fields/TimeField/TimePicker.module.css.cjs +50 -0
  54. package/dist/fields/TimeField/TimePicker.module.css.js +50 -0
  55. package/dist/fields/defaultPlaceholders.cjs +1 -0
  56. package/dist/fields/defaultPlaceholders.d.ts.map +1 -1
  57. package/dist/fields/defaultPlaceholders.js +1 -0
  58. package/dist/fields/fieldBase.module.css.cjs +366 -18
  59. package/dist/fields/fieldBase.module.css.js +366 -18
  60. package/dist/fields/icons.cjs +2 -0
  61. package/dist/fields/icons.d.ts +4 -0
  62. package/dist/fields/icons.d.ts.map +1 -1
  63. package/dist/fields/icons.js +2 -0
  64. package/dist/index.cjs +230 -3
  65. package/dist/index.d.ts +2 -0
  66. package/dist/index.d.ts.map +1 -1
  67. package/dist/index.js +230 -3
  68. package/dist/layout/Box/Box.module.css.cjs +12 -0
  69. package/dist/layout/Box/Box.module.css.js +12 -0
  70. package/dist/layout/Divider/Divider.module.css.cjs +12 -0
  71. package/dist/layout/Divider/Divider.module.css.js +12 -0
  72. package/dist/layout/Grid/Grid.module.css.cjs +12 -0
  73. package/dist/layout/Grid/Grid.module.css.js +12 -0
  74. package/dist/layout/Stack/Stack.module.css.cjs +12 -0
  75. package/dist/layout/Stack/Stack.module.css.js +12 -0
  76. package/dist/react/AxenForm.cjs +228 -3
  77. package/dist/react/AxenForm.js +228 -3
  78. package/dist/react/fieldGroup.module.css.cjs +12 -0
  79. package/dist/react/fieldGroup.module.css.js +12 -0
  80. package/dist/react/gridCell.module.css.cjs +12 -0
  81. package/dist/react/gridCell.module.css.js +12 -0
  82. package/dist/types.d.ts +1 -0
  83. package/dist/types.d.ts.map +1 -1
  84. package/package.json +4 -9
  85. package/dist/fields/AutocompleteField/AutocompleteField.module.css +0 -168
  86. package/dist/fields/CheckboxField/CheckboxField.module.css +0 -29
  87. package/dist/fields/ColorField/ColorField.module.css +0 -33
  88. package/dist/fields/PasswordField/PasswordField.module.css +0 -41
  89. package/dist/fields/RadioField/RadioField.module.css +0 -34
  90. package/dist/fields/SliderField/SliderField.module.css +0 -76
  91. package/dist/fields/SwitchField/SwitchField.module.css +0 -79
  92. package/dist/fields/fieldBase.module.css +0 -244
  93. package/dist/layout/Box/Box.module.css +0 -3
  94. package/dist/layout/Divider/Divider.module.css +0 -25
  95. package/dist/layout/Grid/Grid.module.css +0 -43
  96. package/dist/layout/Stack/Stack.module.css +0 -3
  97. package/dist/react/fieldGroup.module.css +0 -22
  98. package/dist/react/gridCell.module.css +0 -38
  99. package/dist/tokens/reset.css +0 -68
  100. package/dist/tokens/themes.css +0 -31
  101. package/dist/tokens/tokens.css +0 -120
@@ -1,25 +0,0 @@
1
- ._divider_7khjl_1 {
2
- border: none;
3
- margin: 0;
4
- flex-shrink: 0;
5
- }
6
-
7
- ._horizontal_7khjl_7 {
8
- width: 100%;
9
- height: 1px;
10
- background-color: var(--axen-color-border);
11
- }
12
-
13
- ._vertical_7khjl_13 {
14
- width: 1px;
15
- height: auto;
16
- align-self: stretch;
17
- background-color: var(--axen-color-border);
18
- }
19
-
20
- @media (prefers-contrast: more) {
21
- ._horizontal_7khjl_7,
22
- ._vertical_7khjl_13 {
23
- background-color: var(--axen-color-text);
24
- }
25
- }
@@ -1,43 +0,0 @@
1
- /* ═══════════════════════════════════════════════
2
- Grid Layout — Responsive CSS Grid
3
- 12-column mobile-first system
4
- ═══════════════════════════════════════════════ */
5
-
6
- ._container_1asbx_6 {
7
- display: grid;
8
- width: 100%;
9
- }
10
-
11
- ._item_1asbx_11 {
12
- min-width: 0; /* Prevent overflow */
13
- }
14
-
15
- /* ── Responsive Breakpoints ──────────────────── */
16
-
17
- /* sm ≥ 600px */
18
- @media (min-width: 600px) {
19
- ._sm_1asbx_19 {
20
- grid-column: span var(--axen-grid-sm, 12);
21
- }
22
- }
23
-
24
- /* md ≥ 900px */
25
- @media (min-width: 900px) {
26
- ._md_1asbx_26 {
27
- grid-column: span var(--axen-grid-md, 12);
28
- }
29
- }
30
-
31
- /* lg ≥ 1200px */
32
- @media (min-width: 1200px) {
33
- ._lg_1asbx_33 {
34
- grid-column: span var(--axen-grid-lg, 12);
35
- }
36
- }
37
-
38
- /* xl ≥ 1536px */
39
- @media (min-width: 1536px) {
40
- ._xl_1asbx_40 {
41
- grid-column: span var(--axen-grid-xl, 12);
42
- }
43
- }
@@ -1,3 +0,0 @@
1
- ._stack_1m70l_1 {
2
- min-width: 0;
3
- }
@@ -1,22 +0,0 @@
1
- /* ═══════════════════════════════════════════════
2
- axen-form Field Group / Section Styles
3
- ═══════════════════════════════════════════════ */
4
-
5
- ._fieldGroup_1864u_5 {
6
- display: contents; /* Inherit parent grid flow */
7
- }
8
-
9
- ._groupLabel_1864u_9 {
10
- grid-column: 1 / -1;
11
- font-size: var(--axen-font-size-md, 1rem);
12
- font-weight: var(--axen-font-weight-bold, 600);
13
- color: var(--axen-color-primary, #1976d2);
14
- padding-bottom: var(--axen-space-xs, 0.25rem);
15
- border-bottom: 2px solid var(--axen-color-primary-light, #e3f2fd);
16
- margin-top: var(--axen-space-md, 1rem);
17
- margin-bottom: var(--axen-space-xs, 0.25rem);
18
- }
19
-
20
- ._fieldGroup_1864u_5:first-child > ._groupLabel_1864u_9 {
21
- margin-top: 0;
22
- }
@@ -1,38 +0,0 @@
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
- }
@@ -1,68 +0,0 @@
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
- }
@@ -1,31 +0,0 @@
1
- /* ═══════════════════════════════════════════════
2
- axen-form Built-in Theme Presets
3
- Applied via data-axen-theme attribute on form
4
- ═══════════════════════════════════════════════ */
5
-
6
- /* ── Default Theme (Blue) ────────────────────── */
7
- [data-axen-theme='default'] {
8
- --axen-color-primary: #1976d2;
9
- --axen-color-primary-hover: #1565c0;
10
- --axen-color-primary-light: #e3f2fd;
11
- --axen-color-input-bg: #f0f7ff;
12
- --axen-color-label: #1565c0;
13
- }
14
-
15
- /* ── Subtle Theme (Gray) ─────────────────────── */
16
- [data-axen-theme='subtle'] {
17
- --axen-color-primary: #546e7a;
18
- --axen-color-primary-hover: #37474f;
19
- --axen-color-primary-light: #eceff1;
20
- --axen-color-input-bg: #f5f5f5;
21
- --axen-color-label: #37474f;
22
- }
23
-
24
- /* ── Green Theme ─────────────────────────────── */
25
- [data-axen-theme='green'] {
26
- --axen-color-primary: #2e7d32;
27
- --axen-color-primary-hover: #1b5e20;
28
- --axen-color-primary-light: #e8f5e9;
29
- --axen-color-input-bg: #f1f8e9;
30
- --axen-color-label: #1b5e20;
31
- }
@@ -1,120 +0,0 @@
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: #d0d5dd;
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
- --axen-color-input-bg: #f0f7ff;
25
- --axen-color-label: var(--axen-color-text);
26
-
27
- /* ── Typography ────────────────────────────── */
28
- --axen-font-family:
29
- -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
30
- --axen-font-size-xs: 0.75rem;
31
- --axen-font-size-sm: 0.875rem;
32
- --axen-font-size-md: 1rem;
33
- --axen-font-size-lg: 1.125rem;
34
- --axen-font-weight-normal: 400;
35
- --axen-font-weight-medium: 500;
36
- --axen-font-weight-bold: 600;
37
- --axen-line-height: 1.5;
38
-
39
- /* ── Spacing ───────────────────────────────── */
40
- --axen-space-xs: 0.25rem;
41
- --axen-space-sm: 0.5rem;
42
- --axen-space-md: 1rem;
43
- --axen-space-lg: 1.5rem;
44
- --axen-space-xl: 2rem;
45
-
46
- /* ── Border & Radius ───────────────────────── */
47
- --axen-border-width: 1px;
48
- --axen-border-radius: 8px;
49
- --axen-border-radius-sm: 4px;
50
- --axen-border-radius-lg: 10px;
51
- --axen-border-radius-pill: 9999px;
52
-
53
- /* ── Focus Ring (A11y: WCAG 2.4.7) ─────────── */
54
- --axen-focus-ring-width: 2px;
55
- --axen-focus-ring-offset: 2px;
56
- --axen-focus-ring-color: rgba(25, 118, 210, 0.5);
57
-
58
- /* ── Field Sizing ──────────────────────────── */
59
- --axen-field-height: 2.75rem;
60
- --axen-field-min-height: 44px; /* A11y: min 44px touch target */
61
- --axen-field-padding-x: 0.75rem;
62
- --axen-field-padding-y: 0.5rem;
63
- --axen-label-margin-bottom: 0.375rem;
64
- --axen-helper-margin-top: 0.25rem;
65
-
66
- /* ── Transitions ───────────────────────────── */
67
- --axen-transition-fast: 150ms ease;
68
- --axen-transition-normal: 200ms ease;
69
-
70
- /* ── Shadows ───────────────────────────────── */
71
- --axen-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
72
- --axen-shadow-focus: 0 0 0 var(--axen-focus-ring-width) var(--axen-focus-ring-color);
73
-
74
- /* ── Breakpoints (for reference in JS) ─────── */
75
- --axen-bp-sm: 600px;
76
- --axen-bp-md: 900px;
77
- --axen-bp-lg: 1200px;
78
- --axen-bp-xl: 1536px;
79
-
80
- /* ── Z-index layers ────────────────────────── */
81
- --axen-z-dropdown: 100;
82
- --axen-z-tooltip: 200;
83
- }
84
-
85
- /* ── Dark Mode (respects system) ────────────── */
86
- @media (prefers-color-scheme: dark) {
87
- :root {
88
- --axen-color-text: #e0e0e0;
89
- --axen-color-text-secondary: #a0a0a0;
90
- --axen-color-text-disabled: #666666;
91
- --axen-color-border: #555555;
92
- --axen-color-border-hover: #888888;
93
- --axen-color-bg: #1e1e1e;
94
- --axen-color-bg-disabled: #2a2a2a;
95
- --axen-color-bg-hover: #2e2e2e;
96
- --axen-color-primary-light: #1a3a5c;
97
- --axen-color-error-light: #3d1c1c;
98
- --axen-focus-ring-color: rgba(66, 165, 245, 0.6);
99
- }
100
- }
101
-
102
- /* ── High Contrast Mode (A11y) ──────────────── */
103
- @media (prefers-contrast: more) {
104
- :root {
105
- --axen-color-border: #000000;
106
- --axen-color-text: #000000;
107
- --axen-color-text-secondary: #333333;
108
- --axen-border-width: 2px;
109
- --axen-focus-ring-width: 3px;
110
- --axen-focus-ring-color: rgba(0, 0, 0, 0.8);
111
- }
112
- }
113
-
114
- /* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
115
- @media (prefers-reduced-motion: reduce) {
116
- :root {
117
- --axen-transition-fast: 0ms;
118
- --axen-transition-normal: 0ms;
119
- }
120
- }