@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.
- package/dist/fields/AutocompleteField/AutocompleteField.cjs +10 -2
- package/dist/fields/AutocompleteField/AutocompleteField.d.ts +1 -1
- package/dist/fields/AutocompleteField/AutocompleteField.d.ts.map +1 -1
- package/dist/fields/AutocompleteField/AutocompleteField.js +10 -2
- package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.cjs +11 -0
- package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.d.ts +1 -1
- package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.d.ts.map +1 -1
- package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.js +11 -0
- package/dist/fields/AutocompletePredictField/AutocompletePredictField.cjs +10 -2
- package/dist/fields/AutocompletePredictField/AutocompletePredictField.d.ts +1 -1
- package/dist/fields/AutocompletePredictField/AutocompletePredictField.d.ts.map +1 -1
- package/dist/fields/AutocompletePredictField/AutocompletePredictField.js +10 -2
- package/dist/fields/DateField/DateField.cjs +26 -19
- package/dist/fields/DateField/DateField.d.ts +1 -1
- package/dist/fields/DateField/DateField.d.ts.map +1 -1
- package/dist/fields/DateField/DateField.js +27 -20
- package/dist/fields/DateTimeField/DateTimeField.cjs +26 -19
- package/dist/fields/DateTimeField/DateTimeField.d.ts +1 -1
- package/dist/fields/DateTimeField/DateTimeField.d.ts.map +1 -1
- package/dist/fields/DateTimeField/DateTimeField.js +27 -20
- package/dist/fields/EmailField/EmailField.cjs +24 -39
- package/dist/fields/EmailField/EmailField.d.ts +1 -1
- package/dist/fields/EmailField/EmailField.d.ts.map +1 -1
- package/dist/fields/EmailField/EmailField.js +25 -40
- package/dist/fields/NumberField/NumberField.cjs +21 -5
- package/dist/fields/NumberField/NumberField.d.ts +1 -1
- package/dist/fields/NumberField/NumberField.d.ts.map +1 -1
- package/dist/fields/NumberField/NumberField.js +21 -5
- package/dist/fields/PasswordField/PasswordField.cjs +12 -3
- package/dist/fields/PasswordField/PasswordField.d.ts +1 -1
- package/dist/fields/PasswordField/PasswordField.d.ts.map +1 -1
- package/dist/fields/PasswordField/PasswordField.js +12 -3
- package/dist/fields/PhoneField/PhoneField.cjs +25 -18
- package/dist/fields/PhoneField/PhoneField.d.ts +1 -1
- package/dist/fields/PhoneField/PhoneField.d.ts.map +1 -1
- package/dist/fields/PhoneField/PhoneField.js +26 -19
- package/dist/fields/TextField/TextField.cjs +23 -16
- package/dist/fields/TextField/TextField.d.ts +1 -1
- package/dist/fields/TextField/TextField.d.ts.map +1 -1
- package/dist/fields/TextField/TextField.js +24 -17
- package/dist/fields/TimeField/TimeField.cjs +24 -17
- package/dist/fields/TimeField/TimeField.d.ts +1 -1
- package/dist/fields/TimeField/TimeField.d.ts.map +1 -1
- package/dist/fields/TimeField/TimeField.js +25 -18
- package/dist/fields/defaultPlaceholders.cjs +19 -0
- package/dist/fields/defaultPlaceholders.d.ts +3 -0
- package/dist/fields/defaultPlaceholders.d.ts.map +1 -0
- package/dist/fields/defaultPlaceholders.js +19 -0
- package/dist/fields/fieldBase.module.css +60 -36
- package/dist/fields/fieldBase.module.css.cjs +24 -15
- package/dist/fields/fieldBase.module.css.js +24 -15
- package/dist/fields/fieldUtils.d.ts +1 -1
- package/dist/fields/fieldUtils.d.ts.map +1 -1
- package/dist/fields/iconUtils.cjs +9 -0
- package/dist/fields/iconUtils.d.ts +9 -0
- package/dist/fields/iconUtils.d.ts.map +1 -0
- package/dist/fields/iconUtils.js +9 -0
- package/dist/fields/icons.cjs +111 -0
- package/dist/fields/icons.d.ts +6 -0
- package/dist/fields/icons.d.ts.map +1 -0
- package/dist/fields/icons.js +111 -0
- package/dist/index.cjs +8 -0
- package/dist/index.d.ts +5 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +8 -0
- package/dist/react/AxenForm.cjs +55 -7
- package/dist/react/AxenForm.d.ts.map +1 -1
- package/dist/react/AxenForm.js +55 -7
- package/dist/react/fieldGroup.module.css +22 -0
- package/dist/react/fieldGroup.module.css.cjs +11 -0
- package/dist/react/fieldGroup.module.css.js +11 -0
- package/dist/tokens/themes.css +31 -0
- package/dist/tokens/tokens.css +6 -4
- package/dist/types.cjs +6 -0
- package/dist/types.d.ts +22 -2
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +6 -0
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
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__ */
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
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.
|
|
40
|
-
"
|
|
41
|
-
|
|
42
|
-
|
|
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;
|
|
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 {
|
|
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__ */
|
|
38
|
-
"
|
|
39
|
-
|
|
40
|
-
|
|
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 @@
|
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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, #
|
|
53
|
-
border-radius: var(--axen-border-radius,
|
|
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
|
-
.
|
|
60
|
+
._input_1w6h8_32::placeholder {
|
|
61
61
|
color: var(--axen-color-text-disabled, #9e9e9e);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
86
|
+
._inputError_1w6h8_86 {
|
|
87
87
|
border-color: var(--axen-color-error, #d32f2f);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
104
|
+
._helperTextError_1w6h8_104 {
|
|
105
105
|
color: var(--axen-color-error, #d32f2f);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
/* ── Textarea ────────────────────────────────── */
|
|
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
|
-
.
|
|
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
|
-
.
|
|
127
|
+
._inputGroup_1w6h8_127 {
|
|
128
128
|
display: flex;
|
|
129
129
|
align-items: stretch;
|
|
130
130
|
}
|
|
131
131
|
|
|
132
|
-
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
178
|
+
._inputGroupInput_1w6h8_178 {
|
|
155
179
|
border-radius: 0;
|
|
156
180
|
}
|
|
157
181
|
|
|
158
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
201
|
+
._inlineWrapper_1w6h8_193:has(:disabled) {
|
|
178
202
|
cursor: not-allowed;
|
|
179
203
|
opacity: 0.6;
|
|
180
204
|
}
|
|
181
205
|
|
|
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
|
-
.
|
|
214
|
+
._input_1w6h8_32 {
|
|
191
215
|
font-size: 16px; /* Prevent iOS zoom on focus */
|
|
192
216
|
min-height: 48px;
|
|
193
217
|
}
|
|
194
218
|
|
|
195
|
-
.
|
|
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
|
-
.
|
|
226
|
+
._input_1w6h8_32 {
|
|
203
227
|
border-width: 2px;
|
|
204
228
|
}
|
|
205
229
|
|
|
206
|
-
.
|
|
230
|
+
._inputError_1w6h8_86 {
|
|
207
231
|
border-width: 3px;
|
|
208
232
|
}
|
|
209
233
|
|
|
210
|
-
.
|
|
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
|
-
.
|
|
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 = "
|
|
4
|
-
const label = "
|
|
5
|
-
const labelRequired = "
|
|
6
|
-
const input = "
|
|
7
|
-
const inputError = "
|
|
8
|
-
const helperText = "
|
|
9
|
-
const helperTextError = "
|
|
10
|
-
const textarea = "
|
|
11
|
-
const select = "
|
|
12
|
-
const inputGroup = "
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const
|
|
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 = "
|
|
2
|
-
const label = "
|
|
3
|
-
const labelRequired = "
|
|
4
|
-
const input = "
|
|
5
|
-
const inputError = "
|
|
6
|
-
const helperText = "
|
|
7
|
-
const helperTextError = "
|
|
8
|
-
const textarea = "
|
|
9
|
-
const select = "
|
|
10
|
-
const inputGroup = "
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
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,
|
|
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"}
|