@axenstudio/axen-form 0.1.1

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 (210) hide show
  1. package/README.md +665 -0
  2. package/dist/adapters/yupAdapter.cjs +61 -0
  3. package/dist/adapters/yupAdapter.d.ts +21 -0
  4. package/dist/adapters/yupAdapter.d.ts.map +1 -0
  5. package/dist/adapters/yupAdapter.js +61 -0
  6. package/dist/adapters/zodAdapter.cjs +59 -0
  7. package/dist/adapters/zodAdapter.d.ts +22 -0
  8. package/dist/adapters/zodAdapter.d.ts.map +1 -0
  9. package/dist/adapters/zodAdapter.js +59 -0
  10. package/dist/core/dateUtils.cjs +69 -0
  11. package/dist/core/dateUtils.d.ts +28 -0
  12. package/dist/core/dateUtils.d.ts.map +1 -0
  13. package/dist/core/dateUtils.js +69 -0
  14. package/dist/core/formStore.cjs +184 -0
  15. package/dist/core/formStore.d.ts +39 -0
  16. package/dist/core/formStore.d.ts.map +1 -0
  17. package/dist/core/formStore.js +184 -0
  18. package/dist/core/numberUtils.cjs +59 -0
  19. package/dist/core/numberUtils.d.ts +26 -0
  20. package/dist/core/numberUtils.d.ts.map +1 -0
  21. package/dist/core/numberUtils.js +59 -0
  22. package/dist/core/pathUtils.cjs +44 -0
  23. package/dist/core/pathUtils.d.ts +15 -0
  24. package/dist/core/pathUtils.d.ts.map +1 -0
  25. package/dist/core/pathUtils.js +44 -0
  26. package/dist/core/payloadUtils.cjs +26 -0
  27. package/dist/core/payloadUtils.d.ts +22 -0
  28. package/dist/core/payloadUtils.d.ts.map +1 -0
  29. package/dist/core/payloadUtils.js +26 -0
  30. package/dist/core/validation.cjs +41 -0
  31. package/dist/core/validation.d.ts +7 -0
  32. package/dist/core/validation.d.ts.map +1 -0
  33. package/dist/core/validation.js +41 -0
  34. package/dist/fields/AutocompleteField/AutocompleteField.cjs +242 -0
  35. package/dist/fields/AutocompleteField/AutocompleteField.d.ts +6 -0
  36. package/dist/fields/AutocompleteField/AutocompleteField.d.ts.map +1 -0
  37. package/dist/fields/AutocompleteField/AutocompleteField.js +242 -0
  38. package/dist/fields/AutocompleteField/AutocompleteField.module.css +168 -0
  39. package/dist/fields/AutocompleteField/AutocompleteField.module.css.cjs +44 -0
  40. package/dist/fields/AutocompleteField/AutocompleteField.module.css.js +44 -0
  41. package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.cjs +286 -0
  42. package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.d.ts +6 -0
  43. package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.d.ts.map +1 -0
  44. package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.js +286 -0
  45. package/dist/fields/AutocompletePredictField/AutocompletePredictField.cjs +289 -0
  46. package/dist/fields/AutocompletePredictField/AutocompletePredictField.d.ts +10 -0
  47. package/dist/fields/AutocompletePredictField/AutocompletePredictField.d.ts.map +1 -0
  48. package/dist/fields/AutocompletePredictField/AutocompletePredictField.js +289 -0
  49. package/dist/fields/CheckboxField/CheckboxField.cjs +60 -0
  50. package/dist/fields/CheckboxField/CheckboxField.d.ts +3 -0
  51. package/dist/fields/CheckboxField/CheckboxField.d.ts.map +1 -0
  52. package/dist/fields/CheckboxField/CheckboxField.js +60 -0
  53. package/dist/fields/CheckboxField/CheckboxField.module.css +29 -0
  54. package/dist/fields/CheckboxField/CheckboxField.module.css.cjs +11 -0
  55. package/dist/fields/CheckboxField/CheckboxField.module.css.js +11 -0
  56. package/dist/fields/ColorField/ColorField.cjs +69 -0
  57. package/dist/fields/ColorField/ColorField.d.ts +3 -0
  58. package/dist/fields/ColorField/ColorField.d.ts.map +1 -0
  59. package/dist/fields/ColorField/ColorField.js +69 -0
  60. package/dist/fields/ColorField/ColorField.module.css +33 -0
  61. package/dist/fields/ColorField/ColorField.module.css.cjs +14 -0
  62. package/dist/fields/ColorField/ColorField.module.css.js +14 -0
  63. package/dist/fields/CurrencyField/CurrencyField.cjs +120 -0
  64. package/dist/fields/CurrencyField/CurrencyField.d.ts +10 -0
  65. package/dist/fields/CurrencyField/CurrencyField.d.ts.map +1 -0
  66. package/dist/fields/CurrencyField/CurrencyField.js +120 -0
  67. package/dist/fields/DateField/DateField.cjs +70 -0
  68. package/dist/fields/DateField/DateField.d.ts +7 -0
  69. package/dist/fields/DateField/DateField.d.ts.map +1 -0
  70. package/dist/fields/DateField/DateField.js +70 -0
  71. package/dist/fields/DateTimeField/DateTimeField.cjs +71 -0
  72. package/dist/fields/DateTimeField/DateTimeField.d.ts +8 -0
  73. package/dist/fields/DateTimeField/DateTimeField.d.ts.map +1 -0
  74. package/dist/fields/DateTimeField/DateTimeField.js +71 -0
  75. package/dist/fields/EmailField/EmailField.cjs +57 -0
  76. package/dist/fields/EmailField/EmailField.d.ts +3 -0
  77. package/dist/fields/EmailField/EmailField.d.ts.map +1 -0
  78. package/dist/fields/EmailField/EmailField.js +57 -0
  79. package/dist/fields/NumberField/NumberField.cjs +110 -0
  80. package/dist/fields/NumberField/NumberField.d.ts +10 -0
  81. package/dist/fields/NumberField/NumberField.d.ts.map +1 -0
  82. package/dist/fields/NumberField/NumberField.js +110 -0
  83. package/dist/fields/PasswordField/PasswordField.cjs +77 -0
  84. package/dist/fields/PasswordField/PasswordField.d.ts +3 -0
  85. package/dist/fields/PasswordField/PasswordField.d.ts.map +1 -0
  86. package/dist/fields/PasswordField/PasswordField.js +77 -0
  87. package/dist/fields/PasswordField/PasswordField.module.css +41 -0
  88. package/dist/fields/PasswordField/PasswordField.module.css.cjs +14 -0
  89. package/dist/fields/PasswordField/PasswordField.module.css.js +14 -0
  90. package/dist/fields/PhoneField/PhoneField.cjs +58 -0
  91. package/dist/fields/PhoneField/PhoneField.d.ts +3 -0
  92. package/dist/fields/PhoneField/PhoneField.d.ts.map +1 -0
  93. package/dist/fields/PhoneField/PhoneField.js +58 -0
  94. package/dist/fields/RadioField/RadioField.cjs +66 -0
  95. package/dist/fields/RadioField/RadioField.d.ts +3 -0
  96. package/dist/fields/RadioField/RadioField.d.ts.map +1 -0
  97. package/dist/fields/RadioField/RadioField.js +66 -0
  98. package/dist/fields/RadioField/RadioField.module.css +34 -0
  99. package/dist/fields/RadioField/RadioField.module.css.cjs +14 -0
  100. package/dist/fields/RadioField/RadioField.module.css.js +14 -0
  101. package/dist/fields/SelectField/SelectField.cjs +58 -0
  102. package/dist/fields/SelectField/SelectField.d.ts +3 -0
  103. package/dist/fields/SelectField/SelectField.d.ts.map +1 -0
  104. package/dist/fields/SelectField/SelectField.js +58 -0
  105. package/dist/fields/SliderField/SliderField.cjs +79 -0
  106. package/dist/fields/SliderField/SliderField.d.ts +7 -0
  107. package/dist/fields/SliderField/SliderField.d.ts.map +1 -0
  108. package/dist/fields/SliderField/SliderField.js +79 -0
  109. package/dist/fields/SliderField/SliderField.module.css +76 -0
  110. package/dist/fields/SliderField/SliderField.module.css.cjs +14 -0
  111. package/dist/fields/SliderField/SliderField.module.css.js +14 -0
  112. package/dist/fields/SwitchField/SwitchField.cjs +65 -0
  113. package/dist/fields/SwitchField/SwitchField.d.ts +3 -0
  114. package/dist/fields/SwitchField/SwitchField.d.ts.map +1 -0
  115. package/dist/fields/SwitchField/SwitchField.js +65 -0
  116. package/dist/fields/SwitchField/SwitchField.module.css +79 -0
  117. package/dist/fields/SwitchField/SwitchField.module.css.cjs +17 -0
  118. package/dist/fields/SwitchField/SwitchField.module.css.js +17 -0
  119. package/dist/fields/TextField/TextField.cjs +56 -0
  120. package/dist/fields/TextField/TextField.d.ts +3 -0
  121. package/dist/fields/TextField/TextField.d.ts.map +1 -0
  122. package/dist/fields/TextField/TextField.js +56 -0
  123. package/dist/fields/TextareaField/TextareaField.cjs +57 -0
  124. package/dist/fields/TextareaField/TextareaField.d.ts +5 -0
  125. package/dist/fields/TextareaField/TextareaField.d.ts.map +1 -0
  126. package/dist/fields/TextareaField/TextareaField.js +57 -0
  127. package/dist/fields/TimeField/TimeField.cjs +67 -0
  128. package/dist/fields/TimeField/TimeField.d.ts +6 -0
  129. package/dist/fields/TimeField/TimeField.d.ts.map +1 -0
  130. package/dist/fields/TimeField/TimeField.js +67 -0
  131. package/dist/fields/defaultComponentMap.cjs +43 -0
  132. package/dist/fields/defaultComponentMap.d.ts +7 -0
  133. package/dist/fields/defaultComponentMap.d.ts.map +1 -0
  134. package/dist/fields/defaultComponentMap.js +43 -0
  135. package/dist/fields/fieldBase.module.css +201 -0
  136. package/dist/fields/fieldBase.module.css.cjs +50 -0
  137. package/dist/fields/fieldBase.module.css.js +50 -0
  138. package/dist/fields/fieldUtils.cjs +26 -0
  139. package/dist/fields/fieldUtils.d.ts +24 -0
  140. package/dist/fields/fieldUtils.d.ts.map +1 -0
  141. package/dist/fields/fieldUtils.js +26 -0
  142. package/dist/index.cjs +99 -0
  143. package/dist/index.d.ts +42 -0
  144. package/dist/index.d.ts.map +1 -0
  145. package/dist/index.js +99 -0
  146. package/dist/layout/Box/Box.cjs +70 -0
  147. package/dist/layout/Box/Box.d.ts +6 -0
  148. package/dist/layout/Box/Box.d.ts.map +1 -0
  149. package/dist/layout/Box/Box.js +70 -0
  150. package/dist/layout/Box/Box.module.css +3 -0
  151. package/dist/layout/Box/Box.module.css.cjs +8 -0
  152. package/dist/layout/Box/Box.module.css.js +8 -0
  153. package/dist/layout/Divider/Divider.cjs +20 -0
  154. package/dist/layout/Divider/Divider.d.ts +6 -0
  155. package/dist/layout/Divider/Divider.d.ts.map +1 -0
  156. package/dist/layout/Divider/Divider.js +20 -0
  157. package/dist/layout/Divider/Divider.module.css +25 -0
  158. package/dist/layout/Divider/Divider.module.css.cjs +14 -0
  159. package/dist/layout/Divider/Divider.module.css.js +14 -0
  160. package/dist/layout/Grid/Grid.cjs +106 -0
  161. package/dist/layout/Grid/Grid.d.ts +7 -0
  162. package/dist/layout/Grid/Grid.d.ts.map +1 -0
  163. package/dist/layout/Grid/Grid.js +106 -0
  164. package/dist/layout/Grid/Grid.module.css +43 -0
  165. package/dist/layout/Grid/Grid.module.css.cjs +23 -0
  166. package/dist/layout/Grid/Grid.module.css.js +23 -0
  167. package/dist/layout/Spacer/Spacer.cjs +30 -0
  168. package/dist/layout/Spacer/Spacer.d.ts +21 -0
  169. package/dist/layout/Spacer/Spacer.d.ts.map +1 -0
  170. package/dist/layout/Spacer/Spacer.js +30 -0
  171. package/dist/layout/Stack/Stack.cjs +52 -0
  172. package/dist/layout/Stack/Stack.d.ts +7 -0
  173. package/dist/layout/Stack/Stack.d.ts.map +1 -0
  174. package/dist/layout/Stack/Stack.js +52 -0
  175. package/dist/layout/Stack/Stack.module.css +3 -0
  176. package/dist/layout/Stack/Stack.module.css.cjs +8 -0
  177. package/dist/layout/Stack/Stack.module.css.js +8 -0
  178. package/dist/layout/index.d.ts +6 -0
  179. package/dist/layout/index.d.ts.map +1 -0
  180. package/dist/react/AxenArrayField.cjs +80 -0
  181. package/dist/react/AxenArrayField.d.ts +15 -0
  182. package/dist/react/AxenArrayField.d.ts.map +1 -0
  183. package/dist/react/AxenArrayField.js +80 -0
  184. package/dist/react/AxenField.cjs +62 -0
  185. package/dist/react/AxenField.d.ts +13 -0
  186. package/dist/react/AxenField.d.ts.map +1 -0
  187. package/dist/react/AxenField.js +62 -0
  188. package/dist/react/AxenForm.cjs +134 -0
  189. package/dist/react/AxenForm.d.ts +7 -0
  190. package/dist/react/AxenForm.d.ts.map +1 -0
  191. package/dist/react/AxenForm.js +134 -0
  192. package/dist/react/FormContext.cjs +13 -0
  193. package/dist/react/FormContext.d.ts +11 -0
  194. package/dist/react/FormContext.d.ts.map +1 -0
  195. package/dist/react/FormContext.js +13 -0
  196. package/dist/react/useAxenForm.cjs +88 -0
  197. package/dist/react/useAxenForm.d.ts +8 -0
  198. package/dist/react/useAxenForm.d.ts.map +1 -0
  199. package/dist/react/useAxenForm.js +88 -0
  200. package/dist/react/useField.cjs +41 -0
  201. package/dist/react/useField.d.ts +13 -0
  202. package/dist/react/useField.d.ts.map +1 -0
  203. package/dist/react/useField.js +41 -0
  204. package/dist/react/useFieldArray.cjs +74 -0
  205. package/dist/react/useFieldArray.d.ts +5 -0
  206. package/dist/react/useFieldArray.d.ts.map +1 -0
  207. package/dist/react/useFieldArray.js +74 -0
  208. package/dist/types.d.ts +226 -0
  209. package/dist/types.d.ts.map +1 -0
  210. package/package.json +87 -0
@@ -0,0 +1,60 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useCallback } from "react";
3
+ import styles from "../fieldBase.module.css.js";
4
+ import { helperId, cx } from "../fieldUtils.js";
5
+ import localStyles from "./CheckboxField.module.css.js";
6
+ function CheckboxField({
7
+ name,
8
+ value,
9
+ onChange: _onChange,
10
+ onBlur,
11
+ error,
12
+ helperText,
13
+ label,
14
+ disabled,
15
+ readOnly,
16
+ required,
17
+ form
18
+ }) {
19
+ const checked = Boolean(value);
20
+ const handleChange = useCallback(
21
+ (e) => {
22
+ if (readOnly) return;
23
+ form.setFieldValue(name, e.target.checked);
24
+ },
25
+ [form, name, readOnly]
26
+ );
27
+ return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
28
+ /* @__PURE__ */ jsxs("label", { className: cx(styles.inlineWrapper, localStyles.checkboxLabel), children: [
29
+ /* @__PURE__ */ jsx(
30
+ "input",
31
+ {
32
+ type: "checkbox",
33
+ id: name,
34
+ name,
35
+ checked,
36
+ onChange: handleChange,
37
+ onBlur,
38
+ disabled,
39
+ "aria-invalid": error || void 0,
40
+ "aria-describedby": helperText ? helperId(name) : void 0,
41
+ "aria-required": required || void 0,
42
+ className: localStyles.checkbox
43
+ }
44
+ ),
45
+ label && /* @__PURE__ */ jsx("span", { className: styles.inlineLabel, children: label })
46
+ ] }),
47
+ helperText && /* @__PURE__ */ jsx(
48
+ "span",
49
+ {
50
+ id: helperId(name),
51
+ className: cx(styles.helperText, error && styles.helperTextError),
52
+ role: error ? "alert" : void 0,
53
+ children: helperText
54
+ }
55
+ )
56
+ ] });
57
+ }
58
+ export {
59
+ CheckboxField
60
+ };
@@ -0,0 +1,29 @@
1
+ ._checkboxLabel_1labl_1 {
2
+ cursor: pointer;
3
+ }
4
+
5
+ ._checkbox_1labl_1 {
6
+ width: 20px;
7
+ height: 20px;
8
+ margin: 0;
9
+ cursor: pointer;
10
+ accent-color: var(--axen-color-primary);
11
+ border-radius: var(--axen-border-radius-sm);
12
+ }
13
+
14
+ ._checkbox_1labl_1:focus-visible {
15
+ outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
16
+ outline-offset: var(--axen-focus-ring-offset);
17
+ }
18
+
19
+ ._checkbox_1labl_1:disabled {
20
+ cursor: not-allowed;
21
+ }
22
+
23
+ /* Mobile: larger touch target */
24
+ @media (max-width: 599px) {
25
+ ._checkbox_1labl_1 {
26
+ width: 24px;
27
+ height: 24px;
28
+ }
29
+ }
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const checkboxLabel = "_checkboxLabel_1labl_1";
4
+ const checkbox = "_checkbox_1labl_1";
5
+ const localStyles = {
6
+ checkboxLabel,
7
+ checkbox
8
+ };
9
+ exports.checkbox = checkbox;
10
+ exports.checkboxLabel = checkboxLabel;
11
+ exports.default = localStyles;
@@ -0,0 +1,11 @@
1
+ const checkboxLabel = "_checkboxLabel_1labl_1";
2
+ const checkbox = "_checkbox_1labl_1";
3
+ const localStyles = {
4
+ checkboxLabel,
5
+ checkbox
6
+ };
7
+ export {
8
+ checkbox,
9
+ checkboxLabel,
10
+ localStyles as default
11
+ };
@@ -0,0 +1,69 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const react = require("react");
5
+ const fieldBase_module = require("../fieldBase.module.css.cjs");
6
+ const fieldUtils = require("../fieldUtils.cjs");
7
+ const ColorField_module = require("./ColorField.module.css.cjs");
8
+ function ColorField({
9
+ name,
10
+ value,
11
+ onChange: _onChange,
12
+ onBlur,
13
+ error,
14
+ helperText,
15
+ label,
16
+ disabled,
17
+ readOnly,
18
+ required,
19
+ form
20
+ }) {
21
+ const colorValue = typeof value === "string" ? value : "#000000";
22
+ const handleChange = react.useCallback(
23
+ (e) => {
24
+ if (readOnly) return;
25
+ form.setFieldValue(name, e.target.value);
26
+ },
27
+ [form, name, readOnly]
28
+ );
29
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
30
+ label && /* @__PURE__ */ jsxRuntime.jsx(
31
+ "label",
32
+ {
33
+ id: fieldUtils.labelId(name),
34
+ htmlFor: name,
35
+ className: fieldUtils.cx(fieldBase_module.default.label, required && fieldBase_module.default.labelRequired),
36
+ children: label
37
+ }
38
+ ),
39
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ColorField_module.default.colorWrap, children: [
40
+ /* @__PURE__ */ jsxRuntime.jsx(
41
+ "input",
42
+ {
43
+ type: "color",
44
+ id: name,
45
+ name,
46
+ value: colorValue,
47
+ onChange: handleChange,
48
+ onBlur,
49
+ disabled,
50
+ "aria-invalid": error || void 0,
51
+ "aria-describedby": helperText ? fieldUtils.helperId(name) : void 0,
52
+ "aria-required": required || void 0,
53
+ className: ColorField_module.default.colorInput
54
+ }
55
+ ),
56
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: ColorField_module.default.colorValue, children: colorValue })
57
+ ] }),
58
+ helperText && /* @__PURE__ */ jsxRuntime.jsx(
59
+ "span",
60
+ {
61
+ id: fieldUtils.helperId(name),
62
+ className: fieldUtils.cx(fieldBase_module.default.helperText, error && fieldBase_module.default.helperTextError),
63
+ role: error ? "alert" : void 0,
64
+ children: helperText
65
+ }
66
+ )
67
+ ] });
68
+ }
69
+ exports.ColorField = ColorField;
@@ -0,0 +1,3 @@
1
+ import { FieldComponentProps } from '../../types';
2
+ export declare function ColorField({ name, value, onChange: _onChange, onBlur, error, helperText, label, disabled, readOnly, required, form, }: Readonly<FieldComponentProps>): import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=ColorField.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../../../src/fields/ColorField/ColorField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAiD/B"}
@@ -0,0 +1,69 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useCallback } from "react";
3
+ import styles from "../fieldBase.module.css.js";
4
+ import { cx, labelId, helperId } from "../fieldUtils.js";
5
+ import localStyles from "./ColorField.module.css.js";
6
+ function ColorField({
7
+ name,
8
+ value,
9
+ onChange: _onChange,
10
+ onBlur,
11
+ error,
12
+ helperText,
13
+ label,
14
+ disabled,
15
+ readOnly,
16
+ required,
17
+ form
18
+ }) {
19
+ const colorValue = typeof value === "string" ? value : "#000000";
20
+ const handleChange = useCallback(
21
+ (e) => {
22
+ if (readOnly) return;
23
+ form.setFieldValue(name, e.target.value);
24
+ },
25
+ [form, name, readOnly]
26
+ );
27
+ return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
28
+ label && /* @__PURE__ */ jsx(
29
+ "label",
30
+ {
31
+ id: labelId(name),
32
+ htmlFor: name,
33
+ className: cx(styles.label, required && styles.labelRequired),
34
+ children: label
35
+ }
36
+ ),
37
+ /* @__PURE__ */ jsxs("div", { className: localStyles.colorWrap, children: [
38
+ /* @__PURE__ */ jsx(
39
+ "input",
40
+ {
41
+ type: "color",
42
+ id: name,
43
+ name,
44
+ value: colorValue,
45
+ onChange: handleChange,
46
+ onBlur,
47
+ disabled,
48
+ "aria-invalid": error || void 0,
49
+ "aria-describedby": helperText ? helperId(name) : void 0,
50
+ "aria-required": required || void 0,
51
+ className: localStyles.colorInput
52
+ }
53
+ ),
54
+ /* @__PURE__ */ jsx("span", { className: localStyles.colorValue, children: colorValue })
55
+ ] }),
56
+ helperText && /* @__PURE__ */ jsx(
57
+ "span",
58
+ {
59
+ id: helperId(name),
60
+ className: cx(styles.helperText, error && styles.helperTextError),
61
+ role: error ? "alert" : void 0,
62
+ children: helperText
63
+ }
64
+ )
65
+ ] });
66
+ }
67
+ export {
68
+ ColorField
69
+ };
@@ -0,0 +1,33 @@
1
+ ._colorWrap_or7ln_1 {
2
+ display: flex;
3
+ align-items: center;
4
+ gap: var(--axen-space-sm);
5
+ min-height: var(--axen-field-min-height);
6
+ }
7
+
8
+ ._colorInput_or7ln_8 {
9
+ width: 44px;
10
+ height: 44px;
11
+ padding: 2px;
12
+ border: var(--axen-border-width) solid var(--axen-color-border);
13
+ border-radius: var(--axen-border-radius);
14
+ cursor: pointer;
15
+ background: none;
16
+ }
17
+
18
+ ._colorInput_or7ln_8:focus-visible {
19
+ outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
20
+ outline-offset: var(--axen-focus-ring-offset);
21
+ }
22
+
23
+ ._colorInput_or7ln_8:disabled {
24
+ opacity: 0.5;
25
+ cursor: not-allowed;
26
+ }
27
+
28
+ ._colorValue_or7ln_28 {
29
+ font-size: var(--axen-font-size-sm);
30
+ font-family: monospace;
31
+ color: var(--axen-color-text-secondary);
32
+ text-transform: uppercase;
33
+ }
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const colorWrap = "_colorWrap_or7ln_1";
4
+ const colorInput = "_colorInput_or7ln_8";
5
+ const colorValue = "_colorValue_or7ln_28";
6
+ const localStyles = {
7
+ colorWrap,
8
+ colorInput,
9
+ colorValue
10
+ };
11
+ exports.colorInput = colorInput;
12
+ exports.colorValue = colorValue;
13
+ exports.colorWrap = colorWrap;
14
+ exports.default = localStyles;
@@ -0,0 +1,14 @@
1
+ const colorWrap = "_colorWrap_or7ln_1";
2
+ const colorInput = "_colorInput_or7ln_8";
3
+ const colorValue = "_colorValue_or7ln_28";
4
+ const localStyles = {
5
+ colorWrap,
6
+ colorInput,
7
+ colorValue
8
+ };
9
+ export {
10
+ colorInput,
11
+ colorValue,
12
+ colorWrap,
13
+ localStyles as default
14
+ };
@@ -0,0 +1,120 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const react = require("react");
5
+ const numberUtils = require("../../core/numberUtils.cjs");
6
+ const fieldBase_module = require("../fieldBase.module.css.cjs");
7
+ const fieldUtils = require("../fieldUtils.cjs");
8
+ function CurrencyField({
9
+ name,
10
+ value,
11
+ onChange: _onChange,
12
+ onBlur,
13
+ error,
14
+ helperText,
15
+ label,
16
+ placeholder,
17
+ disabled,
18
+ readOnly,
19
+ required,
20
+ min,
21
+ max,
22
+ prefix,
23
+ suffix,
24
+ locale,
25
+ currency,
26
+ form
27
+ }) {
28
+ const inputRef = react.useRef(null);
29
+ const nextCursorRef = react.useRef(null);
30
+ const fieldLocale = locale ?? "en-US";
31
+ const fieldCurrency = currency ?? "USD";
32
+ react.useLayoutEffect(() => {
33
+ if (nextCursorRef.current !== null && inputRef.current) {
34
+ inputRef.current.setSelectionRange(nextCursorRef.current, nextCursorRef.current);
35
+ nextCursorRef.current = null;
36
+ }
37
+ });
38
+ const handleChange = react.useCallback(
39
+ (e) => {
40
+ const raw = e.target.value;
41
+ const cursorPos = e.target.selectionStart ?? 0;
42
+ const cleaned = numberUtils.stripNonNumeric(raw, fieldLocale);
43
+ if (cleaned === "" || cleaned === "-") {
44
+ form.setFieldValue(name, cleaned === "-" ? cleaned : "");
45
+ return;
46
+ }
47
+ const numValue = Number.parseFloat(cleaned);
48
+ if (Number.isNaN(numValue)) return;
49
+ let clamped = numValue;
50
+ if (min !== void 0 && clamped < min) clamped = min;
51
+ if (max !== void 0 && clamped > max) clamped = max;
52
+ form.setFieldValue(name, clamped);
53
+ const formatted = numberUtils.formatNumber(clamped, {
54
+ locale: fieldLocale,
55
+ style: "decimal",
56
+ minimumFractionDigits: 2,
57
+ maximumFractionDigits: 2
58
+ });
59
+ nextCursorRef.current = numberUtils.calculateCursorPosition(raw, formatted, cursorPos, fieldLocale);
60
+ },
61
+ [form, name, min, max, fieldLocale]
62
+ );
63
+ let displayValue = "";
64
+ if (value !== "" && value != null) {
65
+ if (typeof value === "number") {
66
+ displayValue = numberUtils.formatNumber(value, {
67
+ locale: fieldLocale,
68
+ style: "decimal",
69
+ minimumFractionDigits: 2,
70
+ maximumFractionDigits: 2
71
+ });
72
+ } else if (typeof value === "string") {
73
+ displayValue = value;
74
+ }
75
+ }
76
+ const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
77
+ const displayPrefix = prefix ?? fieldCurrency;
78
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
79
+ label && /* @__PURE__ */ jsxRuntime.jsx(
80
+ "label",
81
+ {
82
+ id: fieldUtils.labelId(name),
83
+ htmlFor: name,
84
+ className: fieldUtils.cx(fieldBase_module.default.label, required && fieldBase_module.default.labelRequired),
85
+ children: label
86
+ }
87
+ ),
88
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputGroup, children: [
89
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inputPrefix, children: displayPrefix }),
90
+ /* @__PURE__ */ jsxRuntime.jsx(
91
+ "input",
92
+ {
93
+ ...aria,
94
+ ref: inputRef,
95
+ type: "text",
96
+ inputMode: "decimal",
97
+ name,
98
+ value: displayValue,
99
+ onChange: handleChange,
100
+ onBlur,
101
+ placeholder: placeholder ?? "0.00",
102
+ disabled,
103
+ readOnly,
104
+ className: fieldUtils.cx(fieldBase_module.default.input, fieldBase_module.default.inputGroupInput, error && fieldBase_module.default.inputError)
105
+ }
106
+ ),
107
+ suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inputSuffix, children: suffix })
108
+ ] }),
109
+ helperText && /* @__PURE__ */ jsxRuntime.jsx(
110
+ "span",
111
+ {
112
+ id: fieldUtils.helperId(name),
113
+ className: fieldUtils.cx(fieldBase_module.default.helperText, error && fieldBase_module.default.helperTextError),
114
+ role: error ? "alert" : void 0,
115
+ children: helperText
116
+ }
117
+ )
118
+ ] });
119
+ }
120
+ exports.CurrencyField = CurrencyField;
@@ -0,0 +1,10 @@
1
+ import { FieldComponentProps } from '../../types';
2
+ export declare function CurrencyField({ name, value, onChange: _onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, min, max, prefix, suffix, locale, currency, form, }: FieldComponentProps & {
3
+ min?: number;
4
+ max?: number;
5
+ prefix?: string;
6
+ suffix?: string;
7
+ locale?: string;
8
+ currency?: string;
9
+ }): import("react/jsx-runtime").JSX.Element;
10
+ //# sourceMappingURL=CurrencyField.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CurrencyField.d.ts","sourceRoot":"","sources":["../../../src/fields/CurrencyField/CurrencyField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,EACH,MAAM,EACN,MAAM,EACN,MAAM,EACN,QAAQ,EACR,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,2CAuGA"}
@@ -0,0 +1,120 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useRef, useLayoutEffect, useCallback } from "react";
3
+ import { stripNonNumeric, formatNumber, calculateCursorPosition } from "../../core/numberUtils.js";
4
+ import styles from "../fieldBase.module.css.js";
5
+ import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
6
+ function CurrencyField({
7
+ name,
8
+ value,
9
+ onChange: _onChange,
10
+ onBlur,
11
+ error,
12
+ helperText,
13
+ label,
14
+ placeholder,
15
+ disabled,
16
+ readOnly,
17
+ required,
18
+ min,
19
+ max,
20
+ prefix,
21
+ suffix,
22
+ locale,
23
+ currency,
24
+ form
25
+ }) {
26
+ const inputRef = useRef(null);
27
+ const nextCursorRef = useRef(null);
28
+ const fieldLocale = locale ?? "en-US";
29
+ const fieldCurrency = currency ?? "USD";
30
+ useLayoutEffect(() => {
31
+ if (nextCursorRef.current !== null && inputRef.current) {
32
+ inputRef.current.setSelectionRange(nextCursorRef.current, nextCursorRef.current);
33
+ nextCursorRef.current = null;
34
+ }
35
+ });
36
+ const handleChange = useCallback(
37
+ (e) => {
38
+ const raw = e.target.value;
39
+ const cursorPos = e.target.selectionStart ?? 0;
40
+ const cleaned = stripNonNumeric(raw, fieldLocale);
41
+ if (cleaned === "" || cleaned === "-") {
42
+ form.setFieldValue(name, cleaned === "-" ? cleaned : "");
43
+ return;
44
+ }
45
+ const numValue = Number.parseFloat(cleaned);
46
+ if (Number.isNaN(numValue)) return;
47
+ let clamped = numValue;
48
+ if (min !== void 0 && clamped < min) clamped = min;
49
+ if (max !== void 0 && clamped > max) clamped = max;
50
+ form.setFieldValue(name, clamped);
51
+ const formatted = formatNumber(clamped, {
52
+ locale: fieldLocale,
53
+ style: "decimal",
54
+ minimumFractionDigits: 2,
55
+ maximumFractionDigits: 2
56
+ });
57
+ nextCursorRef.current = calculateCursorPosition(raw, formatted, cursorPos, fieldLocale);
58
+ },
59
+ [form, name, min, max, fieldLocale]
60
+ );
61
+ let displayValue = "";
62
+ if (value !== "" && value != null) {
63
+ if (typeof value === "number") {
64
+ displayValue = formatNumber(value, {
65
+ locale: fieldLocale,
66
+ style: "decimal",
67
+ minimumFractionDigits: 2,
68
+ maximumFractionDigits: 2
69
+ });
70
+ } else if (typeof value === "string") {
71
+ displayValue = value;
72
+ }
73
+ }
74
+ const aria = ariaProps(name, { error, helperText, required, label });
75
+ const displayPrefix = prefix ?? fieldCurrency;
76
+ return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
77
+ label && /* @__PURE__ */ jsx(
78
+ "label",
79
+ {
80
+ id: labelId(name),
81
+ htmlFor: name,
82
+ className: cx(styles.label, required && styles.labelRequired),
83
+ children: label
84
+ }
85
+ ),
86
+ /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
87
+ /* @__PURE__ */ jsx("span", { className: styles.inputPrefix, children: displayPrefix }),
88
+ /* @__PURE__ */ jsx(
89
+ "input",
90
+ {
91
+ ...aria,
92
+ ref: inputRef,
93
+ type: "text",
94
+ inputMode: "decimal",
95
+ name,
96
+ value: displayValue,
97
+ onChange: handleChange,
98
+ onBlur,
99
+ placeholder: placeholder ?? "0.00",
100
+ disabled,
101
+ readOnly,
102
+ className: cx(styles.input, styles.inputGroupInput, error && styles.inputError)
103
+ }
104
+ ),
105
+ suffix && /* @__PURE__ */ jsx("span", { className: styles.inputSuffix, children: suffix })
106
+ ] }),
107
+ helperText && /* @__PURE__ */ jsx(
108
+ "span",
109
+ {
110
+ id: helperId(name),
111
+ className: cx(styles.helperText, error && styles.helperTextError),
112
+ role: error ? "alert" : void 0,
113
+ children: helperText
114
+ }
115
+ )
116
+ ] });
117
+ }
118
+ export {
119
+ CurrencyField
120
+ };
@@ -0,0 +1,70 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const dateUtils = require("../../core/dateUtils.cjs");
5
+ const fieldBase_module = require("../fieldBase.module.css.cjs");
6
+ const fieldUtils = require("../fieldUtils.cjs");
7
+ function DateField({
8
+ name,
9
+ value,
10
+ onChange,
11
+ onBlur,
12
+ error,
13
+ helperText,
14
+ label,
15
+ placeholder,
16
+ disabled,
17
+ readOnly,
18
+ required,
19
+ min,
20
+ max,
21
+ locale
22
+ }) {
23
+ const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
24
+ const resolvedLocale = locale ?? dateUtils.getDefaultLocale();
25
+ const dateValue = typeof value === "string" ? value : "";
26
+ const displayText = dateValue ? dateUtils.formatDateLocale(dateValue, resolvedLocale) : "";
27
+ const handleChange = (e) => {
28
+ onChange(e);
29
+ };
30
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
31
+ label && /* @__PURE__ */ jsxRuntime.jsx(
32
+ "label",
33
+ {
34
+ id: fieldUtils.labelId(name),
35
+ htmlFor: name,
36
+ className: fieldUtils.cx(fieldBase_module.default.label, required && fieldBase_module.default.labelRequired),
37
+ children: label
38
+ }
39
+ ),
40
+ /* @__PURE__ */ jsxRuntime.jsx(
41
+ "input",
42
+ {
43
+ ...aria,
44
+ type: "date",
45
+ name,
46
+ value: dateValue,
47
+ onChange: handleChange,
48
+ onBlur,
49
+ placeholder,
50
+ disabled,
51
+ readOnly,
52
+ min,
53
+ max,
54
+ lang: resolvedLocale,
55
+ className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError)
56
+ }
57
+ ),
58
+ displayText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.helperText, "aria-hidden": "true", children: displayText }),
59
+ helperText && /* @__PURE__ */ jsxRuntime.jsx(
60
+ "span",
61
+ {
62
+ id: fieldUtils.helperId(name),
63
+ className: fieldUtils.cx(fieldBase_module.default.helperText, error && fieldBase_module.default.helperTextError),
64
+ role: error ? "alert" : void 0,
65
+ children: helperText
66
+ }
67
+ )
68
+ ] });
69
+ }
70
+ exports.DateField = DateField;
@@ -0,0 +1,7 @@
1
+ import { FieldComponentProps } from '../../types';
2
+ export declare function DateField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, min, max, locale, }: Readonly<FieldComponentProps & {
3
+ min?: string;
4
+ max?: string;
5
+ locale?: string;
6
+ }>): import("react/jsx-runtime").JSX.Element;
7
+ //# sourceMappingURL=DateField.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateField/DateField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,SAAS,CAAC,EACxB,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,GACP,EAAE,QAAQ,CAAC,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,2CAyDjF"}