@axenstudio/axen-form 0.1.4 → 0.1.6

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 (78) hide show
  1. package/dist/fields/AutocompleteField/AutocompleteField.cjs +10 -2
  2. package/dist/fields/AutocompleteField/AutocompleteField.d.ts +1 -1
  3. package/dist/fields/AutocompleteField/AutocompleteField.d.ts.map +1 -1
  4. package/dist/fields/AutocompleteField/AutocompleteField.js +10 -2
  5. package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.cjs +11 -0
  6. package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.d.ts +1 -1
  7. package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.d.ts.map +1 -1
  8. package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.js +11 -0
  9. package/dist/fields/AutocompletePredictField/AutocompletePredictField.cjs +10 -2
  10. package/dist/fields/AutocompletePredictField/AutocompletePredictField.d.ts +1 -1
  11. package/dist/fields/AutocompletePredictField/AutocompletePredictField.d.ts.map +1 -1
  12. package/dist/fields/AutocompletePredictField/AutocompletePredictField.js +10 -2
  13. package/dist/fields/DateField/DateField.cjs +26 -19
  14. package/dist/fields/DateField/DateField.d.ts +1 -1
  15. package/dist/fields/DateField/DateField.d.ts.map +1 -1
  16. package/dist/fields/DateField/DateField.js +27 -20
  17. package/dist/fields/DateTimeField/DateTimeField.cjs +26 -19
  18. package/dist/fields/DateTimeField/DateTimeField.d.ts +1 -1
  19. package/dist/fields/DateTimeField/DateTimeField.d.ts.map +1 -1
  20. package/dist/fields/DateTimeField/DateTimeField.js +27 -20
  21. package/dist/fields/EmailField/EmailField.cjs +24 -39
  22. package/dist/fields/EmailField/EmailField.d.ts +1 -1
  23. package/dist/fields/EmailField/EmailField.d.ts.map +1 -1
  24. package/dist/fields/EmailField/EmailField.js +25 -40
  25. package/dist/fields/NumberField/NumberField.cjs +21 -5
  26. package/dist/fields/NumberField/NumberField.d.ts +1 -1
  27. package/dist/fields/NumberField/NumberField.d.ts.map +1 -1
  28. package/dist/fields/NumberField/NumberField.js +21 -5
  29. package/dist/fields/PasswordField/PasswordField.cjs +12 -3
  30. package/dist/fields/PasswordField/PasswordField.d.ts +1 -1
  31. package/dist/fields/PasswordField/PasswordField.d.ts.map +1 -1
  32. package/dist/fields/PasswordField/PasswordField.js +12 -3
  33. package/dist/fields/PhoneField/PhoneField.cjs +25 -18
  34. package/dist/fields/PhoneField/PhoneField.d.ts +1 -1
  35. package/dist/fields/PhoneField/PhoneField.d.ts.map +1 -1
  36. package/dist/fields/PhoneField/PhoneField.js +26 -19
  37. package/dist/fields/TextField/TextField.cjs +23 -16
  38. package/dist/fields/TextField/TextField.d.ts +1 -1
  39. package/dist/fields/TextField/TextField.d.ts.map +1 -1
  40. package/dist/fields/TextField/TextField.js +24 -17
  41. package/dist/fields/TimeField/TimeField.cjs +24 -17
  42. package/dist/fields/TimeField/TimeField.d.ts +1 -1
  43. package/dist/fields/TimeField/TimeField.d.ts.map +1 -1
  44. package/dist/fields/TimeField/TimeField.js +25 -18
  45. package/dist/fields/defaultPlaceholders.cjs +19 -0
  46. package/dist/fields/defaultPlaceholders.d.ts +3 -0
  47. package/dist/fields/defaultPlaceholders.d.ts.map +1 -0
  48. package/dist/fields/defaultPlaceholders.js +19 -0
  49. package/dist/fields/fieldBase.module.css +60 -36
  50. package/dist/fields/fieldBase.module.css.cjs +24 -15
  51. package/dist/fields/fieldBase.module.css.js +24 -15
  52. package/dist/fields/fieldUtils.d.ts +1 -1
  53. package/dist/fields/fieldUtils.d.ts.map +1 -1
  54. package/dist/fields/iconUtils.cjs +9 -0
  55. package/dist/fields/iconUtils.d.ts +9 -0
  56. package/dist/fields/iconUtils.d.ts.map +1 -0
  57. package/dist/fields/iconUtils.js +9 -0
  58. package/dist/fields/icons.cjs +111 -0
  59. package/dist/fields/icons.d.ts +6 -0
  60. package/dist/fields/icons.d.ts.map +1 -0
  61. package/dist/fields/icons.js +111 -0
  62. package/dist/index.cjs +8 -0
  63. package/dist/index.d.ts +5 -1
  64. package/dist/index.d.ts.map +1 -1
  65. package/dist/index.js +8 -0
  66. package/dist/react/AxenForm.cjs +55 -7
  67. package/dist/react/AxenForm.d.ts.map +1 -1
  68. package/dist/react/AxenForm.js +55 -7
  69. package/dist/react/fieldGroup.module.css +22 -0
  70. package/dist/react/fieldGroup.module.css.cjs +11 -0
  71. package/dist/react/fieldGroup.module.css.js +11 -0
  72. package/dist/tokens/themes.css +31 -0
  73. package/dist/tokens/tokens.css +6 -4
  74. package/dist/types.cjs +6 -0
  75. package/dist/types.d.ts +22 -2
  76. package/dist/types.d.ts.map +1 -1
  77. package/dist/types.js +6 -0
  78. package/package.json +1 -1
@@ -1,6 +1,7 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import styles from "../fieldBase.module.css.js";
3
3
  import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
4
+ import { resolveFieldIcon } from "../iconUtils.js";
4
5
  function TextField({
5
6
  name,
6
7
  value,
@@ -12,9 +13,26 @@ function TextField({
12
13
  placeholder,
13
14
  disabled,
14
15
  readOnly,
15
- required
16
+ required,
17
+ icon
16
18
  }) {
17
19
  const aria = ariaProps(name, { error, helperText, required, label });
20
+ const resolvedIcon = resolveFieldIcon(icon, "text");
21
+ const inputEl = /* @__PURE__ */ jsx(
22
+ "input",
23
+ {
24
+ ...aria,
25
+ type: "text",
26
+ name,
27
+ value: value ?? "",
28
+ onChange,
29
+ onBlur,
30
+ placeholder,
31
+ disabled,
32
+ readOnly,
33
+ className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
34
+ }
35
+ );
18
36
  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
19
37
  label && /* @__PURE__ */ jsx(
20
38
  "label",
@@ -25,21 +43,10 @@ function TextField({
25
43
  children: label
26
44
  }
27
45
  ),
28
- /* @__PURE__ */ jsx(
29
- "input",
30
- {
31
- ...aria,
32
- type: "text",
33
- name,
34
- value: value ?? "",
35
- onChange,
36
- onBlur,
37
- placeholder,
38
- disabled,
39
- readOnly,
40
- className: cx(styles.input, error && styles.inputError)
41
- }
42
- ),
46
+ resolvedIcon ? /* @__PURE__ */ jsxs("div", { className: styles.inputIconWrapper, children: [
47
+ /* @__PURE__ */ jsx("span", { className: styles.fieldIcon, children: resolvedIcon }),
48
+ inputEl
49
+ ] }) : inputEl,
43
50
  helperText && /* @__PURE__ */ jsx(
44
51
  "span",
45
52
  {
@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
4
4
  const dateUtils = require("../../core/dateUtils.cjs");
5
5
  const fieldBase_module = require("../fieldBase.module.css.cjs");
6
6
  const fieldUtils = require("../fieldUtils.cjs");
7
+ const iconUtils = require("../iconUtils.cjs");
7
8
  function TimeField({
8
9
  name,
9
10
  value,
@@ -17,15 +18,33 @@ function TimeField({
17
18
  readOnly,
18
19
  required,
19
20
  locale,
20
- ampm
21
+ ampm,
22
+ icon
21
23
  }) {
22
24
  const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
23
25
  const resolvedLocale = locale ?? dateUtils.getDefaultLocale();
26
+ const resolvedIcon = iconUtils.resolveFieldIcon(icon, "time");
24
27
  const timeValue = typeof value === "string" ? value : "";
25
28
  const displayText = timeValue ? dateUtils.formatTimeLocale(timeValue, resolvedLocale, ampm) : "";
26
29
  const handleChange = (e) => {
27
30
  onChange(e);
28
31
  };
32
+ const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
33
+ "input",
34
+ {
35
+ ...aria,
36
+ type: "time",
37
+ name,
38
+ value: timeValue,
39
+ onChange: handleChange,
40
+ onBlur,
41
+ placeholder,
42
+ disabled,
43
+ readOnly,
44
+ lang: resolvedLocale,
45
+ className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, error && fieldBase_module.default.inputError)
46
+ }
47
+ );
29
48
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
30
49
  label && /* @__PURE__ */ jsxRuntime.jsx(
31
50
  "label",
@@ -36,22 +55,10 @@ function TimeField({
36
55
  children: label
37
56
  }
38
57
  ),
39
- /* @__PURE__ */ jsxRuntime.jsx(
40
- "input",
41
- {
42
- ...aria,
43
- type: "time",
44
- name,
45
- value: timeValue,
46
- onChange: handleChange,
47
- onBlur,
48
- placeholder,
49
- disabled,
50
- readOnly,
51
- lang: resolvedLocale,
52
- className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError)
53
- }
54
- ),
58
+ resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputIconWrapper, children: [
59
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.fieldIcon, children: resolvedIcon }),
60
+ inputEl
61
+ ] }) : inputEl,
55
62
  displayText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.helperText, "aria-hidden": "true", children: displayText }),
56
63
  helperText && /* @__PURE__ */ jsxRuntime.jsx(
57
64
  "span",
@@ -1,5 +1,5 @@
1
1
  import { FieldComponentProps } from '../../types';
2
- export declare function TimeField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, locale, ampm, }: Readonly<FieldComponentProps & {
2
+ export declare function TimeField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, locale, ampm, icon, }: Readonly<FieldComponentProps & {
3
3
  locale?: string;
4
4
  ampm?: boolean;
5
5
  }>): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/TimeField/TimeField.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,MAAM,EACN,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CAuDrE"}
1
+ {"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/TimeField/TimeField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,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,MAAM,EACN,IAAI,EACJ,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CA+DrE"}
@@ -1,7 +1,8 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { formatTimeLocale, getDefaultLocale } from "../../core/dateUtils.js";
3
3
  import styles from "../fieldBase.module.css.js";
4
4
  import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
5
+ import { resolveFieldIcon } from "../iconUtils.js";
5
6
  function TimeField({
6
7
  name,
7
8
  value,
@@ -15,15 +16,33 @@ function TimeField({
15
16
  readOnly,
16
17
  required,
17
18
  locale,
18
- ampm
19
+ ampm,
20
+ icon
19
21
  }) {
20
22
  const aria = ariaProps(name, { error, helperText, required, label });
21
23
  const resolvedLocale = locale ?? getDefaultLocale();
24
+ const resolvedIcon = resolveFieldIcon(icon, "time");
22
25
  const timeValue = typeof value === "string" ? value : "";
23
26
  const displayText = timeValue ? formatTimeLocale(timeValue, resolvedLocale, ampm) : "";
24
27
  const handleChange = (e) => {
25
28
  onChange(e);
26
29
  };
30
+ const inputEl = /* @__PURE__ */ jsx(
31
+ "input",
32
+ {
33
+ ...aria,
34
+ type: "time",
35
+ name,
36
+ value: timeValue,
37
+ onChange: handleChange,
38
+ onBlur,
39
+ placeholder,
40
+ disabled,
41
+ readOnly,
42
+ lang: resolvedLocale,
43
+ className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
44
+ }
45
+ );
27
46
  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
28
47
  label && /* @__PURE__ */ jsx(
29
48
  "label",
@@ -34,22 +53,10 @@ function TimeField({
34
53
  children: label
35
54
  }
36
55
  ),
37
- /* @__PURE__ */ jsx(
38
- "input",
39
- {
40
- ...aria,
41
- type: "time",
42
- name,
43
- value: timeValue,
44
- onChange: handleChange,
45
- onBlur,
46
- placeholder,
47
- disabled,
48
- readOnly,
49
- lang: resolvedLocale,
50
- className: cx(styles.input, error && styles.inputError)
51
- }
52
- ),
56
+ resolvedIcon ? /* @__PURE__ */ jsxs("div", { className: styles.inputIconWrapper, children: [
57
+ /* @__PURE__ */ jsx("span", { className: styles.fieldIcon, children: resolvedIcon }),
58
+ inputEl
59
+ ] }) : inputEl,
53
60
  displayText && /* @__PURE__ */ jsx("span", { className: styles.helperText, "aria-hidden": "true", children: displayText }),
54
61
  helperText && /* @__PURE__ */ jsx(
55
62
  "span",
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const defaultPlaceholders = {
4
+ text: "Enter text...",
5
+ email: "user@example.com",
6
+ password: "Enter password...",
7
+ // NOSONAR — avoid SonarQube flagging "password" as a hardcoded secret
8
+ phone: "+1 (555) 000-0000",
9
+ textarea: "Enter description...",
10
+ number: "0",
11
+ currency: "0.00",
12
+ date: "Select date",
13
+ time: "Select time",
14
+ datetime: "Select date and time",
15
+ autocomplete: "Search...",
16
+ "autocomplete-predict": "Search...",
17
+ "autocomplete-multi": "Search..."
18
+ };
19
+ exports.defaultPlaceholders = defaultPlaceholders;
@@ -0,0 +1,3 @@
1
+ import { BuiltInFieldType } from '../types';
2
+ export declare const defaultPlaceholders: Partial<Record<BuiltInFieldType, string>>;
3
+ //# sourceMappingURL=defaultPlaceholders.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"defaultPlaceholders.d.ts","sourceRoot":"","sources":["../../src/fields/defaultPlaceholders.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAOjD,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAczE,CAAC"}
@@ -0,0 +1,19 @@
1
+ const defaultPlaceholders = {
2
+ text: "Enter text...",
3
+ email: "user@example.com",
4
+ password: "Enter password...",
5
+ // NOSONAR — avoid SonarQube flagging "password" as a hardcoded secret
6
+ phone: "+1 (555) 000-0000",
7
+ textarea: "Enter description...",
8
+ number: "0",
9
+ currency: "0.00",
10
+ date: "Select date",
11
+ time: "Select time",
12
+ datetime: "Select date and time",
13
+ autocomplete: "Search...",
14
+ "autocomplete-predict": "Search...",
15
+ "autocomplete-multi": "Search..."
16
+ };
17
+ export {
18
+ defaultPlaceholders
19
+ };
@@ -5,31 +5,31 @@
5
5
  ═══════════════════════════════════════════════ */
6
6
 
7
7
  /* ── Field Wrapper ───────────────────────────── */
8
- ._wrapper_1lnpc_8 {
8
+ ._wrapper_1w6h8_8 {
9
9
  display: flex;
10
10
  flex-direction: column;
11
11
  width: 100%;
12
12
  }
13
13
 
14
14
  /* ── Label ───────────────────────────────────── */
15
- ._label_1lnpc_15 {
15
+ ._label_1w6h8_15 {
16
16
  display: block;
17
17
  font-size: var(--axen-font-size-sm, 0.875rem);
18
18
  font-weight: var(--axen-font-weight-medium, 500);
19
- color: var(--axen-color-text, #1a1a1a);
19
+ color: var(--axen-color-label, var(--axen-color-text, #1a1a1a));
20
20
  margin-bottom: var(--axen-label-margin-bottom, 0.375rem);
21
21
  line-height: var(--axen-line-height, 1.5);
22
22
  letter-spacing: 0.01em;
23
23
  }
24
24
 
25
- ._labelRequired_1lnpc_25::after {
25
+ ._labelRequired_1w6h8_25::after {
26
26
  content: ' *';
27
27
  color: var(--axen-color-error, #d32f2f);
28
28
  font-weight: var(--axen-font-weight-bold, 600);
29
29
  }
30
30
 
31
31
  /* ── Input Base ──────────────────────────────── */
32
- ._input_1lnpc_32 {
32
+ ._input_1w6h8_32 {
33
33
  display: block;
34
34
  width: 100%;
35
35
  height: var(--axen-field-height, 2.75rem);
@@ -48,52 +48,52 @@
48
48
  font-size: var(--axen-font-size-md, 1rem);
49
49
  line-height: var(--axen-line-height, 1.5);
50
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);
51
+ background-color: var(--axen-color-input-bg, var(--axen-color-bg, #ffffff));
52
+ border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);
53
+ border-radius: var(--axen-border-radius, 8px);
54
54
  transition:
55
55
  border-color var(--axen-transition-fast, 150ms ease),
56
56
  box-shadow var(--axen-transition-fast, 150ms ease);
57
57
  outline: none;
58
58
  }
59
59
 
60
- ._input_1lnpc_32::placeholder {
60
+ ._input_1w6h8_32::placeholder {
61
61
  color: var(--axen-color-text-disabled, #9e9e9e);
62
62
  }
63
63
 
64
- ._input_1lnpc_32:hover:not(:disabled):not(:read-only) {
64
+ ._input_1w6h8_32:hover:not(:disabled):not(:read-only) {
65
65
  border-color: var(--axen-color-border-hover, #888888);
66
66
  }
67
67
 
68
68
  /* Focus ring (keyboard + mouse) */
69
- ._input_1lnpc_32:focus {
69
+ ._input_1w6h8_32:focus {
70
70
  border-color: var(--axen-color-border-focus, var(--axen-color-primary, #1976d2));
71
71
  box-shadow: var(--axen-shadow-focus, 0 0 0 2px rgba(25, 118, 210, 0.5));
72
72
  outline: none;
73
73
  }
74
74
 
75
- ._input_1lnpc_32:disabled {
75
+ ._input_1w6h8_32:disabled {
76
76
  background-color: var(--axen-color-bg-disabled, #f5f5f5);
77
77
  color: var(--axen-color-text-disabled, #9e9e9e);
78
78
  cursor: not-allowed;
79
79
  }
80
80
 
81
- ._input_1lnpc_32:read-only {
81
+ ._input_1w6h8_32:read-only {
82
82
  background-color: var(--axen-color-bg-disabled, #f5f5f5);
83
83
  }
84
84
 
85
85
  /* ── Error State ─────────────────────────────── */
86
- ._inputError_1lnpc_86 {
86
+ ._inputError_1w6h8_86 {
87
87
  border-color: var(--axen-color-error, #d32f2f);
88
88
  }
89
89
 
90
- ._inputError_1lnpc_86:focus {
90
+ ._inputError_1w6h8_86:focus {
91
91
  border-color: var(--axen-color-error, #d32f2f);
92
92
  box-shadow: 0 0 0 var(--axen-focus-ring-width, 2px) rgba(211, 47, 47, 0.3);
93
93
  }
94
94
 
95
95
  /* ── Helper Text ─────────────────────────────── */
96
- ._helperText_1lnpc_96 {
96
+ ._helperText_1w6h8_96 {
97
97
  display: block;
98
98
  font-size: var(--axen-font-size-xs, 0.75rem);
99
99
  color: var(--axen-color-text-secondary, #666666);
@@ -101,12 +101,12 @@
101
101
  line-height: var(--axen-line-height, 1.5);
102
102
  }
103
103
 
104
- ._helperTextError_1lnpc_104 {
104
+ ._helperTextError_1w6h8_104 {
105
105
  color: var(--axen-color-error, #d32f2f);
106
106
  }
107
107
 
108
108
  /* ── Textarea ────────────────────────────────── */
109
- ._textarea_1lnpc_109 {
109
+ ._textarea_1w6h8_109 {
110
110
  height: auto;
111
111
  min-height: calc(var(--axen-field-min-height, 44px) * 2);
112
112
  resize: vertical;
@@ -114,7 +114,7 @@
114
114
  }
115
115
 
116
116
  /* ── Select ──────────────────────────────────── */
117
- ._select_1lnpc_117 {
117
+ ._select_1w6h8_117 {
118
118
  appearance: none;
119
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");
120
120
  background-repeat: no-repeat;
@@ -124,13 +124,37 @@
124
124
  }
125
125
 
126
126
  /* ── Input with prefix/suffix ────────────────── */
127
- ._inputGroup_1lnpc_127 {
127
+ ._inputGroup_1w6h8_127 {
128
128
  display: flex;
129
129
  align-items: stretch;
130
130
  }
131
131
 
132
- ._inputPrefix_1lnpc_132,
133
- ._inputSuffix_1lnpc_133 {
132
+ /* ── Icon inside input ───────────────────────── */
133
+ ._inputIconWrapper_1w6h8_133 {
134
+ position: relative;
135
+ }
136
+
137
+ ._fieldIcon_1w6h8_137 {
138
+ position: absolute;
139
+ left: 0.75rem;
140
+ top: 50%;
141
+ transform: translateY(-50%);
142
+ width: 1.125rem;
143
+ height: 1.125rem;
144
+ color: var(--axen-color-text-secondary, #666666);
145
+ pointer-events: none;
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+ z-index: 1;
150
+ }
151
+
152
+ ._inputWithIcon_1w6h8_152 {
153
+ padding-left: 2.5rem;
154
+ }
155
+
156
+ ._inputPrefix_1w6h8_156,
157
+ ._inputSuffix_1w6h8_157 {
134
158
  display: flex;
135
159
  align-items: center;
136
160
  padding: 0 var(--axen-space-sm, 0.5rem);
@@ -141,32 +165,32 @@
141
165
  white-space: nowrap;
142
166
  }
143
167
 
144
- ._inputPrefix_1lnpc_132 {
168
+ ._inputPrefix_1w6h8_156 {
145
169
  border-right: none;
146
170
  border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
147
171
  }
148
172
 
149
- ._inputSuffix_1lnpc_133 {
173
+ ._inputSuffix_1w6h8_157 {
150
174
  border-left: none;
151
175
  border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
152
176
  }
153
177
 
154
- ._inputGroupInput_1lnpc_154 {
178
+ ._inputGroupInput_1w6h8_178 {
155
179
  border-radius: 0;
156
180
  }
157
181
 
158
- ._inputPrefix_1lnpc_132 + ._inputGroupInput_1lnpc_154 {
182
+ ._inputPrefix_1w6h8_156 + ._inputGroupInput_1w6h8_178 {
159
183
  border-top-left-radius: 0;
160
184
  border-bottom-left-radius: 0;
161
185
  }
162
186
 
163
- ._inputGroupInput_1lnpc_154:has(+ ._inputSuffix_1lnpc_133) {
187
+ ._inputGroupInput_1w6h8_178:has(+ ._inputSuffix_1w6h8_157) {
164
188
  border-top-right-radius: 0;
165
189
  border-bottom-right-radius: 0;
166
190
  }
167
191
 
168
192
  /* ── Checkbox/Radio/Switch shared ────────────── */
169
- ._inlineWrapper_1lnpc_169 {
193
+ ._inlineWrapper_1w6h8_193 {
170
194
  display: flex;
171
195
  align-items: center;
172
196
  gap: var(--axen-space-sm, 0.5rem);
@@ -174,12 +198,12 @@
174
198
  cursor: pointer;
175
199
  }
176
200
 
177
- ._inlineWrapper_1lnpc_169:has(:disabled) {
201
+ ._inlineWrapper_1w6h8_193:has(:disabled) {
178
202
  cursor: not-allowed;
179
203
  opacity: 0.6;
180
204
  }
181
205
 
182
- ._inlineLabel_1lnpc_182 {
206
+ ._inlineLabel_1w6h8_206 {
183
207
  font-size: var(--axen-font-size-md, 1rem);
184
208
  color: var(--axen-color-text, #1a1a1a);
185
209
  user-select: none;
@@ -187,34 +211,34 @@
187
211
 
188
212
  /* ── Responsive: mobile touch targets ────────── */
189
213
  @media (max-width: 599px) {
190
- ._input_1lnpc_32 {
214
+ ._input_1w6h8_32 {
191
215
  font-size: 16px; /* Prevent iOS zoom on focus */
192
216
  min-height: 48px;
193
217
  }
194
218
 
195
- ._inlineWrapper_1lnpc_169 {
219
+ ._inlineWrapper_1w6h8_193 {
196
220
  min-height: 48px;
197
221
  }
198
222
  }
199
223
 
200
224
  /* ── High Contrast Mode ──────────────────────── */
201
225
  @media (prefers-contrast: more) {
202
- ._input_1lnpc_32 {
226
+ ._input_1w6h8_32 {
203
227
  border-width: 2px;
204
228
  }
205
229
 
206
- ._inputError_1lnpc_86 {
230
+ ._inputError_1w6h8_86 {
207
231
  border-width: 3px;
208
232
  }
209
233
 
210
- ._helperTextError_1lnpc_104 {
234
+ ._helperTextError_1w6h8_104 {
211
235
  font-weight: var(--axen-font-weight-bold, 600);
212
236
  }
213
237
  }
214
238
 
215
239
  /* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
216
240
  @media (prefers-reduced-motion: reduce) {
217
- ._input_1lnpc_32 {
241
+ ._input_1w6h8_32 {
218
242
  transition: none;
219
243
  }
220
244
  }
@@ -1,20 +1,23 @@
1
1
  "use strict";
2
2
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
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";
3
+ const wrapper = "_wrapper_1w6h8_8";
4
+ const label = "_label_1w6h8_15";
5
+ const labelRequired = "_labelRequired_1w6h8_25";
6
+ const input = "_input_1w6h8_32";
7
+ const inputError = "_inputError_1w6h8_86";
8
+ const helperText = "_helperText_1w6h8_96";
9
+ const helperTextError = "_helperTextError_1w6h8_104";
10
+ const textarea = "_textarea_1w6h8_109";
11
+ const select = "_select_1w6h8_117";
12
+ const inputGroup = "_inputGroup_1w6h8_127";
13
+ const inputIconWrapper = "_inputIconWrapper_1w6h8_133";
14
+ const fieldIcon = "_fieldIcon_1w6h8_137";
15
+ const inputWithIcon = "_inputWithIcon_1w6h8_152";
16
+ const inputPrefix = "_inputPrefix_1w6h8_156";
17
+ const inputSuffix = "_inputSuffix_1w6h8_157";
18
+ const inputGroupInput = "_inputGroupInput_1w6h8_178";
19
+ const inlineWrapper = "_inlineWrapper_1w6h8_193";
20
+ const inlineLabel = "_inlineLabel_1w6h8_206";
18
21
  const styles = {
19
22
  wrapper,
20
23
  label,
@@ -26,6 +29,9 @@ const styles = {
26
29
  textarea,
27
30
  select,
28
31
  inputGroup,
32
+ inputIconWrapper,
33
+ fieldIcon,
34
+ inputWithIcon,
29
35
  inputPrefix,
30
36
  inputSuffix,
31
37
  inputGroupInput,
@@ -33,6 +39,7 @@ const styles = {
33
39
  inlineLabel
34
40
  };
35
41
  exports.default = styles;
42
+ exports.fieldIcon = fieldIcon;
36
43
  exports.helperText = helperText;
37
44
  exports.helperTextError = helperTextError;
38
45
  exports.inlineLabel = inlineLabel;
@@ -41,8 +48,10 @@ exports.input = input;
41
48
  exports.inputError = inputError;
42
49
  exports.inputGroup = inputGroup;
43
50
  exports.inputGroupInput = inputGroupInput;
51
+ exports.inputIconWrapper = inputIconWrapper;
44
52
  exports.inputPrefix = inputPrefix;
45
53
  exports.inputSuffix = inputSuffix;
54
+ exports.inputWithIcon = inputWithIcon;
46
55
  exports.label = label;
47
56
  exports.labelRequired = labelRequired;
48
57
  exports.select = select;
@@ -1,18 +1,21 @@
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";
1
+ const wrapper = "_wrapper_1w6h8_8";
2
+ const label = "_label_1w6h8_15";
3
+ const labelRequired = "_labelRequired_1w6h8_25";
4
+ const input = "_input_1w6h8_32";
5
+ const inputError = "_inputError_1w6h8_86";
6
+ const helperText = "_helperText_1w6h8_96";
7
+ const helperTextError = "_helperTextError_1w6h8_104";
8
+ const textarea = "_textarea_1w6h8_109";
9
+ const select = "_select_1w6h8_117";
10
+ const inputGroup = "_inputGroup_1w6h8_127";
11
+ const inputIconWrapper = "_inputIconWrapper_1w6h8_133";
12
+ const fieldIcon = "_fieldIcon_1w6h8_137";
13
+ const inputWithIcon = "_inputWithIcon_1w6h8_152";
14
+ const inputPrefix = "_inputPrefix_1w6h8_156";
15
+ const inputSuffix = "_inputSuffix_1w6h8_157";
16
+ const inputGroupInput = "_inputGroupInput_1w6h8_178";
17
+ const inlineWrapper = "_inlineWrapper_1w6h8_193";
18
+ const inlineLabel = "_inlineLabel_1w6h8_206";
16
19
  const styles = {
17
20
  wrapper,
18
21
  label,
@@ -24,6 +27,9 @@ const styles = {
24
27
  textarea,
25
28
  select,
26
29
  inputGroup,
30
+ inputIconWrapper,
31
+ fieldIcon,
32
+ inputWithIcon,
27
33
  inputPrefix,
28
34
  inputSuffix,
29
35
  inputGroupInput,
@@ -32,6 +38,7 @@ const styles = {
32
38
  };
33
39
  export {
34
40
  styles as default,
41
+ fieldIcon,
35
42
  helperText,
36
43
  helperTextError,
37
44
  inlineLabel,
@@ -40,8 +47,10 @@ export {
40
47
  inputError,
41
48
  inputGroup,
42
49
  inputGroupInput,
50
+ inputIconWrapper,
43
51
  inputPrefix,
44
52
  inputSuffix,
53
+ inputWithIcon,
45
54
  label,
46
55
  labelRequired,
47
56
  select,
@@ -2,7 +2,7 @@
2
2
  * Field utility functions shared across all field components.
3
3
  */
4
4
  /** Compose CSS module class names — falsy values are filtered out */
5
- export declare function cx(...args: (string | false | null | undefined)[]): string;
5
+ export declare function cx(...args: (string | false | 0 | 0n | null | undefined)[]): string;
6
6
  /** Build ARIA props for a field */
7
7
  export declare function ariaProps(name: string, options: {
8
8
  error?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"fieldUtils.d.ts","sourceRoot":"","sources":["../../src/fields/fieldUtils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,qEAAqE;AACrE,wBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAEzE;AAED,mCAAmC;AACnC,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE;IACP,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;;;;;;EAYF;AAED,sCAAsC;AACtC,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,gCAAgC;AAChC,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C"}
1
+ {"version":3,"file":"fieldUtils.d.ts","sourceRoot":"","sources":["../../src/fields/fieldUtils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,qEAAqE;AACrE,wBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAElF;AAED,mCAAmC;AACnC,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE;IACP,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;;;;;;EAYF;AAED,sCAAsC;AACtC,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,gCAAgC;AAChC,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C"}