reactaform 1.4.3 → 1.5.0
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/README.md +72 -12
- package/dist/index.d.ts +1 -0
- package/dist/reactaform.cjs.js +5 -5
- package/dist/reactaform.es.js +1646 -1565
- package/dist/themes/ant-design-dark.css +31 -0
- package/dist/themes/ant-design.css +42 -0
- package/dist/themes/blueprint-dark.css +31 -0
- package/dist/themes/blueprint.css +43 -0
- package/dist/themes/compact-variant.css +8 -0
- package/dist/themes/fluent.css +40 -0
- package/dist/themes/glass-morphism.css +25 -0
- package/dist/themes/high-contrast-accessible.css +22 -0
- package/dist/themes/ios-mobile.css +32 -0
- package/dist/themes/macos-native.css +32 -0
- package/dist/themes/material-dark.css +27 -0
- package/dist/themes/material.css +46 -0
- package/dist/themes/midnight-dark.css +24 -0
- package/dist/themes/modern-light.css +23 -0
- package/dist/themes/neon-cyber-dark.css +24 -0
- package/dist/themes/shadcn.css +40 -0
- package/dist/themes/soft-pastel.css +24 -0
- package/dist/themes/spacious-variant.css +9 -0
- package/dist/themes/tailwind-dark.css +30 -0
- package/dist/themes/tailwind.css +50 -0
- package/package.json +25 -3
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
[data-reactaform-theme="antd-dark"] {
|
|
2
|
+
--reactaform-primary-bg: #141414;
|
|
3
|
+
--reactaform-secondary-bg: #1f1f1f;
|
|
4
|
+
--reactaform-input-bg: #1f1f1f;
|
|
5
|
+
|
|
6
|
+
--reactaform-text-color: #e8e8e8;
|
|
7
|
+
--reactaform-text-muted: #9ca3af;
|
|
8
|
+
|
|
9
|
+
--reactaform-border-color: #303030;
|
|
10
|
+
--reactaform-border-hover: #434343;
|
|
11
|
+
--reactaform-border-focus: #1677ff;
|
|
12
|
+
|
|
13
|
+
--reactaform-hover-bg: #1a1a1a;
|
|
14
|
+
|
|
15
|
+
--reactaform-error-color: #ff4d4f;
|
|
16
|
+
--reactaform-success-color: #52c41a;
|
|
17
|
+
|
|
18
|
+
--reactaform-border-radius: 6px;
|
|
19
|
+
|
|
20
|
+
--reactaform-shadow:
|
|
21
|
+
0 6px 20px rgba(0,0,0,.55);
|
|
22
|
+
|
|
23
|
+
--reactaform-button-bg: #1677ff;
|
|
24
|
+
--reactaform-button-text: white;
|
|
25
|
+
|
|
26
|
+
--reactaform-input-padding: 10px 12px;
|
|
27
|
+
|
|
28
|
+
/* Tooltip */
|
|
29
|
+
--reactaform-tooltip-color-bg: rgba(40, 40, 40, 0.95);
|
|
30
|
+
--reactaform-tooltip-color: #F5F5F5;
|
|
31
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
[data-reactaform-theme="antd"] {
|
|
2
|
+
/* Surfaces */
|
|
3
|
+
--reactaform-primary-bg: #ffffff;
|
|
4
|
+
--reactaform-secondary-bg: #ffffff;
|
|
5
|
+
--reactaform-input-bg: #ffffff;
|
|
6
|
+
|
|
7
|
+
/* Text */
|
|
8
|
+
--reactaform-text-color: #1f1f1f;
|
|
9
|
+
--reactaform-text-muted: #8c8c8c;
|
|
10
|
+
|
|
11
|
+
/* Borders */
|
|
12
|
+
--reactaform-border-color: #d9d9d9;
|
|
13
|
+
--reactaform-border-hover: #bfbfbf;
|
|
14
|
+
--reactaform-border-focus: #1677ff; /* Ant Primary */
|
|
15
|
+
|
|
16
|
+
/* States */
|
|
17
|
+
--reactaform-error-color: #ff4d4f;
|
|
18
|
+
--reactaform-success-color: #52c41a;
|
|
19
|
+
|
|
20
|
+
/* Interaction */
|
|
21
|
+
--reactaform-hover-bg: #fafafa;
|
|
22
|
+
|
|
23
|
+
/* Shape — AntD slightly rounded */
|
|
24
|
+
--reactaform-border-radius: 6px;
|
|
25
|
+
|
|
26
|
+
/* Elevation */
|
|
27
|
+
--reactaform-shadow:
|
|
28
|
+
0 2px 8px rgba(0,0,0,.08);
|
|
29
|
+
|
|
30
|
+
/* Buttons */
|
|
31
|
+
--reactaform-button-bg: #1677ff;
|
|
32
|
+
--reactaform-button-text: #ffffff;
|
|
33
|
+
--reactaform-button-border-radius: 6px;
|
|
34
|
+
|
|
35
|
+
/* Comfortable spacing */
|
|
36
|
+
--reactaform-input-padding: 10px 12px;
|
|
37
|
+
--reactaform-font-size: 14px;
|
|
38
|
+
|
|
39
|
+
/* Tooltip */
|
|
40
|
+
--reactaform-tooltip-color-bg: rgba(60,60,60,0.92);
|
|
41
|
+
--reactaform-tooltip-color: #ffffff;
|
|
42
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
[data-reactaform-theme="blueprint-dark"] {
|
|
2
|
+
--reactaform-primary-bg: #202b33;
|
|
3
|
+
--reactaform-secondary-bg: #293742;
|
|
4
|
+
--reactaform-input-bg: #30404d;
|
|
5
|
+
|
|
6
|
+
--reactaform-text-color: #f5f8fa;
|
|
7
|
+
--reactaform-text-muted: #c0cbd3;
|
|
8
|
+
|
|
9
|
+
--reactaform-border-color: #394b59;
|
|
10
|
+
--reactaform-border-hover: #738694;
|
|
11
|
+
--reactaform-border-focus: #2b95d6;
|
|
12
|
+
|
|
13
|
+
--reactaform-hover-bg: rgba(255,255,255,0.07);
|
|
14
|
+
|
|
15
|
+
--reactaform-error-color: #ff7373;
|
|
16
|
+
--reactaform-success-color: #3dcc91;
|
|
17
|
+
|
|
18
|
+
--reactaform-border-radius: 4px;
|
|
19
|
+
|
|
20
|
+
--reactaform-shadow:
|
|
21
|
+
0 4px 20px rgba(16,22,26,.45);
|
|
22
|
+
|
|
23
|
+
--reactaform-button-bg: #2b95d6;
|
|
24
|
+
--reactaform-button-text: white;
|
|
25
|
+
|
|
26
|
+
--reactaform-input-padding: 8px 10px;
|
|
27
|
+
|
|
28
|
+
/* Tooltip */
|
|
29
|
+
--reactaform-tooltip-color-bg: rgba(40, 40, 40, 0.95);
|
|
30
|
+
--reactaform-tooltip-color: #F5F5F5;
|
|
31
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
[data-reactaform-theme="blueprint"] {
|
|
2
|
+
/* Surfaces */
|
|
3
|
+
--reactaform-primary-bg: #f5f8fa;
|
|
4
|
+
--reactaform-secondary-bg: #ffffff;
|
|
5
|
+
--reactaform-input-bg: #ffffff;
|
|
6
|
+
|
|
7
|
+
/* Text */
|
|
8
|
+
--reactaform-text-color: #182026;
|
|
9
|
+
--reactaform-text-muted: #5c7080;
|
|
10
|
+
|
|
11
|
+
/* Borders */
|
|
12
|
+
--reactaform-border-color: #d8e1e8;
|
|
13
|
+
--reactaform-border-hover: #8a9ba8;
|
|
14
|
+
--reactaform-border-focus: #137cbd; /* Blueprint Primary Blue */
|
|
15
|
+
|
|
16
|
+
/* Status */
|
|
17
|
+
--reactaform-error-color: #c23030;
|
|
18
|
+
--reactaform-success-color: #0f9960;
|
|
19
|
+
|
|
20
|
+
/* Interaction */
|
|
21
|
+
--reactaform-hover-bg: #ebf1f5;
|
|
22
|
+
|
|
23
|
+
/* Shape */
|
|
24
|
+
--reactaform-border-radius: 4px;
|
|
25
|
+
|
|
26
|
+
/* Elevation */
|
|
27
|
+
--reactaform-shadow:
|
|
28
|
+
0 1px 3px rgba(16,22,26,.1),
|
|
29
|
+
0 0 0 1px rgba(16,22,26,.1);
|
|
30
|
+
|
|
31
|
+
/* Buttons */
|
|
32
|
+
--reactaform-button-bg: #137cbd;
|
|
33
|
+
--reactaform-button-text: #ffffff;
|
|
34
|
+
--reactaform-button-border-radius: 4px;
|
|
35
|
+
|
|
36
|
+
/* Density */
|
|
37
|
+
--reactaform-input-padding: 8px 10px;
|
|
38
|
+
--reactaform-font-size: 13px;
|
|
39
|
+
|
|
40
|
+
/* Tooltip */
|
|
41
|
+
--reactaform-tooltip-color-bg: rgba(60,60,60,0.92);
|
|
42
|
+
--reactaform-tooltip-color: #ffffff;
|
|
43
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
[data-reactaform-theme="fluent"] {
|
|
2
|
+
/* Surfaces */
|
|
3
|
+
--reactaform-primary-bg: #ffffff;
|
|
4
|
+
--reactaform-secondary-bg: #ffffff;
|
|
5
|
+
--reactaform-input-bg: #f5f6f8;
|
|
6
|
+
|
|
7
|
+
/* Text */
|
|
8
|
+
--reactaform-text-color: #242424;
|
|
9
|
+
--reactaform-text-muted: #616161;
|
|
10
|
+
|
|
11
|
+
/* Borders */
|
|
12
|
+
--reactaform-border-color: #d1d1d6;
|
|
13
|
+
--reactaform-border-hover: #bdbdbd;
|
|
14
|
+
--reactaform-border-focus: #0078d4;
|
|
15
|
+
|
|
16
|
+
/* Accent */
|
|
17
|
+
--reactaform-success-color: #107c10;
|
|
18
|
+
--reactaform-error-color: #d13438;
|
|
19
|
+
|
|
20
|
+
/* Interaction */
|
|
21
|
+
--reactaform-hover-bg: rgba(0,0,0,0.04);
|
|
22
|
+
|
|
23
|
+
/* Shape */
|
|
24
|
+
--reactaform-border-radius: 6px;
|
|
25
|
+
|
|
26
|
+
/* Shadow */
|
|
27
|
+
--reactaform-shadow:
|
|
28
|
+
0 4px 12px rgba(0,0,0,.08);
|
|
29
|
+
|
|
30
|
+
/* Buttons */
|
|
31
|
+
--reactaform-button-bg: #0078d4;
|
|
32
|
+
--reactaform-button-text: white;
|
|
33
|
+
--reactaform-button-border-radius: 6px;
|
|
34
|
+
|
|
35
|
+
--reactaform-input-padding: 10px 12px;
|
|
36
|
+
|
|
37
|
+
/* Tooltip */
|
|
38
|
+
--reactaform-tooltip-color-bg: rgba(60,60,60,0.92);
|
|
39
|
+
--reactaform-tooltip-color: #ffffff;
|
|
40
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
[data-reactaform-theme="glass"] {
|
|
2
|
+
--reactaform-primary-bg: rgba(255,255,255,0.25);
|
|
3
|
+
--reactaform-secondary-bg: rgba(255,255,255,0.35);
|
|
4
|
+
--reactaform-input-bg: rgba(255,255,255,0.35);
|
|
5
|
+
|
|
6
|
+
backdrop-filter: blur(14px);
|
|
7
|
+
-webkit-backdrop-filter: blur(14px);
|
|
8
|
+
|
|
9
|
+
--reactaform-text-color: #111827;
|
|
10
|
+
--reactaform-text-muted: #4b5563;
|
|
11
|
+
|
|
12
|
+
--reactaform-border-color: rgba(255,255,255,0.4);
|
|
13
|
+
--reactaform-border-hover: rgba(255,255,255,0.7);
|
|
14
|
+
--reactaform-border-focus: #38bdf8;
|
|
15
|
+
|
|
16
|
+
--reactaform-error-color: #e11d48;
|
|
17
|
+
--reactaform-success-color: #059669;
|
|
18
|
+
|
|
19
|
+
--reactaform-border-radius: 12px;
|
|
20
|
+
--reactaform-shadow: 0 12px 40px rgba(0,0,0,0.2);
|
|
21
|
+
|
|
22
|
+
/* Tooltip */
|
|
23
|
+
--reactaform-tooltip-color-bg: rgba(60,60,60,0.92);
|
|
24
|
+
--reactaform-tooltip-color: #ffffff;
|
|
25
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
[data-reactaform-theme="accessible"] {
|
|
2
|
+
--reactaform-primary-bg: #ffffff;
|
|
3
|
+
--reactaform-secondary-bg: #ffffff;
|
|
4
|
+
--reactaform-input-bg: #ffffff;
|
|
5
|
+
|
|
6
|
+
--reactaform-text-color: #000000;
|
|
7
|
+
--reactaform-text-muted: #333333;
|
|
8
|
+
|
|
9
|
+
--reactaform-border-color: #000000;
|
|
10
|
+
--reactaform-border-hover: #000000;
|
|
11
|
+
--reactaform-border-focus: #1d4ed8;
|
|
12
|
+
|
|
13
|
+
--reactaform-error-color: #b91c1c;
|
|
14
|
+
--reactaform-success-color: #166534;
|
|
15
|
+
|
|
16
|
+
--reactaform-border-radius: 0;
|
|
17
|
+
--reactaform-shadow: none;
|
|
18
|
+
|
|
19
|
+
/* Tooltip */
|
|
20
|
+
--reactaform-tooltip-color-bg: rgba(60,60,60,0.92);
|
|
21
|
+
--reactaform-tooltip-color: #ffffff;
|
|
22
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
[data-reactaform-theme="ios"] {
|
|
2
|
+
--reactaform-primary-bg: #f2f2f7;
|
|
3
|
+
--reactaform-secondary-bg: #ffffff;
|
|
4
|
+
--reactaform-input-bg: #ffffff;
|
|
5
|
+
|
|
6
|
+
--reactaform-text-color: #000000;
|
|
7
|
+
--reactaform-text-muted: #8e8e93;
|
|
8
|
+
|
|
9
|
+
--reactaform-border-color: #d1d1d6;
|
|
10
|
+
--reactaform-border-hover: #b3b3b9;
|
|
11
|
+
--reactaform-border-focus: #0a84ff;
|
|
12
|
+
|
|
13
|
+
--reactaform-error-color: #ff3b30;
|
|
14
|
+
--reactaform-success-color: #34c759;
|
|
15
|
+
|
|
16
|
+
--reactaform-hover-bg: rgba(0,0,0,0.03);
|
|
17
|
+
|
|
18
|
+
--reactaform-border-radius: 14px;
|
|
19
|
+
|
|
20
|
+
--reactaform-shadow:
|
|
21
|
+
0 10px 30px rgba(0,0,0,.10);
|
|
22
|
+
|
|
23
|
+
--reactaform-button-bg: #0a84ff;
|
|
24
|
+
--reactaform-button-text: white;
|
|
25
|
+
--reactaform-button-border-radius: 14px;
|
|
26
|
+
|
|
27
|
+
--reactaform-input-padding: 14px 16px;
|
|
28
|
+
|
|
29
|
+
/* Tooltip */
|
|
30
|
+
--reactaform-tooltip-color-bg: rgba(60,60,60,0.92);
|
|
31
|
+
--reactaform-tooltip-color: #ffffff;
|
|
32
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
[data-reactaform-theme="macos"] {
|
|
2
|
+
--reactaform-primary-bg: #f5f5f7;
|
|
3
|
+
--reactaform-secondary-bg: #ffffff;
|
|
4
|
+
--reactaform-input-bg: #ffffff;
|
|
5
|
+
|
|
6
|
+
--reactaform-text-color: #111111;
|
|
7
|
+
--reactaform-text-muted: #6e6e73;
|
|
8
|
+
|
|
9
|
+
--reactaform-border-color: #d2d2d7;
|
|
10
|
+
--reactaform-border-hover: #9e9ea2;
|
|
11
|
+
--reactaform-border-focus: #0a84ff;
|
|
12
|
+
|
|
13
|
+
--reactaform-success-color: #34c759;
|
|
14
|
+
--reactaform-error-color: #ff3b30;
|
|
15
|
+
|
|
16
|
+
--reactaform-hover-bg: rgba(0,0,0,0.03);
|
|
17
|
+
|
|
18
|
+
--reactaform-border-radius: 10px;
|
|
19
|
+
|
|
20
|
+
--reactaform-shadow:
|
|
21
|
+
0 8px 30px rgba(0,0,0,.08);
|
|
22
|
+
|
|
23
|
+
--reactaform-button-bg: #0a84ff;
|
|
24
|
+
--reactaform-button-text: white;
|
|
25
|
+
--reactaform-button-border-radius: 999px;
|
|
26
|
+
|
|
27
|
+
--reactaform-input-padding: 12px 14px;
|
|
28
|
+
|
|
29
|
+
/* Tooltip */
|
|
30
|
+
--reactaform-tooltip-color-bg: rgba(60,60,60,0.92);
|
|
31
|
+
--reactaform-tooltip-color: #ffffff;
|
|
32
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
[data-reactaform-theme="material-dark"] {
|
|
2
|
+
--reactaform-primary-bg: #121212;
|
|
3
|
+
--reactaform-secondary-bg: #1D1B20;
|
|
4
|
+
--reactaform-input-bg: #2B2830;
|
|
5
|
+
|
|
6
|
+
--reactaform-text-color: #EDE7F6;
|
|
7
|
+
--reactaform-text-muted: #BDB5D7;
|
|
8
|
+
|
|
9
|
+
--reactaform-border-color: #3A3346;
|
|
10
|
+
--reactaform-border-hover: #524364;
|
|
11
|
+
--reactaform-border-focus: #D0BCFF;
|
|
12
|
+
|
|
13
|
+
--reactaform-hover-bg: rgba(255,255,255,0.06);
|
|
14
|
+
|
|
15
|
+
--reactaform-error-color: #F2B8B5;
|
|
16
|
+
--reactaform-success-color: #81C995;
|
|
17
|
+
|
|
18
|
+
--reactaform-border-radius: 12px;
|
|
19
|
+
--reactaform-shadow: 0 8px 30px rgba(0,0,0,0.4);
|
|
20
|
+
|
|
21
|
+
--reactaform-button-bg: #D0BCFF;
|
|
22
|
+
--reactaform-button-text: #381E72;
|
|
23
|
+
|
|
24
|
+
/* Tooltip */
|
|
25
|
+
--reactaform-tooltip-color-bg: rgba(40, 40, 40, 0.95);
|
|
26
|
+
--reactaform-tooltip-color: #F5F5F5;
|
|
27
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* Material Design 3 Inspired Light Theme */
|
|
2
|
+
[data-reactaform-theme="material"] {
|
|
3
|
+
|
|
4
|
+
/* Surfaces */
|
|
5
|
+
--reactaform-primary-bg: #ffffff;
|
|
6
|
+
--reactaform-secondary-bg: #ffffff;
|
|
7
|
+
--reactaform-input-bg: #f9fafb;
|
|
8
|
+
|
|
9
|
+
/* Text */
|
|
10
|
+
--reactaform-text-color: #1f2937;
|
|
11
|
+
--reactaform-text-muted: #6b7280;
|
|
12
|
+
|
|
13
|
+
/* Material Border System */
|
|
14
|
+
--reactaform-border-color: #e5e7eb;
|
|
15
|
+
--reactaform-border-hover: #cbd5e1;
|
|
16
|
+
--reactaform-border-focus: #6750A4; /* Material Purple Primary */
|
|
17
|
+
|
|
18
|
+
/* State Colors */
|
|
19
|
+
--reactaform-error-color: #B3261E;
|
|
20
|
+
--reactaform-success-color: #1E8E3E;
|
|
21
|
+
|
|
22
|
+
/* Interaction */
|
|
23
|
+
--reactaform-hover-bg: rgba(0,0,0,0.03);
|
|
24
|
+
|
|
25
|
+
/* Shape */
|
|
26
|
+
--reactaform-border-radius: 12px;
|
|
27
|
+
|
|
28
|
+
/* Elevation */
|
|
29
|
+
--reactaform-shadow:
|
|
30
|
+
0 1px 2px rgba(0,0,0,.08),
|
|
31
|
+
0 2px 6px rgba(0,0,0,.08);
|
|
32
|
+
|
|
33
|
+
/* Buttons */
|
|
34
|
+
--reactaform-button-bg: #6750A4;
|
|
35
|
+
--reactaform-button-text: #ffffff;
|
|
36
|
+
--reactaform-button-border-radius: 999px; /* pill */
|
|
37
|
+
--reactaform-button-shadow:
|
|
38
|
+
0 2px 6px rgba(0,0,0,0.18);
|
|
39
|
+
|
|
40
|
+
/* Inputs */
|
|
41
|
+
--reactaform-input-padding: 12px 14px;
|
|
42
|
+
|
|
43
|
+
/* Tooltip */
|
|
44
|
+
--reactaform-tooltip-color-bg: rgba(60,60,60,0.92);
|
|
45
|
+
--reactaform-tooltip-color: #ffffff;
|
|
46
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
[data-reactaform-theme="midnight-dark"] {
|
|
2
|
+
--reactaform-primary-bg: #0b1120;
|
|
3
|
+
--reactaform-secondary-bg: #111c2d;
|
|
4
|
+
--reactaform-input-bg: #14223a;
|
|
5
|
+
|
|
6
|
+
--reactaform-text-color: #e5f0ff;
|
|
7
|
+
--reactaform-text-muted: #9db2d4;
|
|
8
|
+
|
|
9
|
+
--reactaform-border-color: #1f2b44;
|
|
10
|
+
--reactaform-border-hover: #2c3d5e;
|
|
11
|
+
--reactaform-border-focus: #60a5fa;
|
|
12
|
+
|
|
13
|
+
--reactaform-error-color: #fb7185;
|
|
14
|
+
--reactaform-success-color: #4ade80;
|
|
15
|
+
|
|
16
|
+
--reactaform-hover-bg: rgba(255,255,255,0.06);
|
|
17
|
+
--reactaform-border-radius: 6px;
|
|
18
|
+
|
|
19
|
+
--reactaform-shadow: 0 12px 28px rgba(0,0,0,0.55);
|
|
20
|
+
|
|
21
|
+
/* Tooltip */
|
|
22
|
+
--reactaform-tooltip-color-bg: rgba(40, 40, 40, 0.95);
|
|
23
|
+
--reactaform-tooltip-color: #F5F5F5;
|
|
24
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
[data-reactaform-theme="modern-light"] {
|
|
2
|
+
--reactaform-primary-bg: #ffffff;
|
|
3
|
+
--reactaform-secondary-bg: #fafafa;
|
|
4
|
+
--reactaform-input-bg: #ffffff;
|
|
5
|
+
|
|
6
|
+
--reactaform-text-color: #1f2937;
|
|
7
|
+
--reactaform-text-muted: #6b7280;
|
|
8
|
+
|
|
9
|
+
--reactaform-border-color: #e5e7eb;
|
|
10
|
+
--reactaform-border-hover: #d1d5db;
|
|
11
|
+
--reactaform-border-focus: #2563eb;
|
|
12
|
+
|
|
13
|
+
--reactaform-error-color: #dc2626;
|
|
14
|
+
--reactaform-success-color: #16a34a;
|
|
15
|
+
|
|
16
|
+
--reactaform-hover-bg: #f3f4f6;
|
|
17
|
+
--reactaform-border-radius: 6px;
|
|
18
|
+
--reactaform-shadow: 0 8px 24px rgba(0,0,0,0.06);
|
|
19
|
+
|
|
20
|
+
/* Tooltip */
|
|
21
|
+
--reactaform-tooltip-color-bg: rgba(60,60,60,0.92);
|
|
22
|
+
--reactaform-tooltip-color: #ffffff;
|
|
23
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
[data-reactaform-theme="neon-cyber-dark"] {
|
|
2
|
+
--reactaform-primary-bg: #0c0f1a;
|
|
3
|
+
--reactaform-secondary-bg: #11172b;
|
|
4
|
+
--reactaform-input-bg: #141c33;
|
|
5
|
+
|
|
6
|
+
--reactaform-text-color: #e0e7ff;
|
|
7
|
+
--reactaform-text-muted: #9ca3af;
|
|
8
|
+
|
|
9
|
+
--reactaform-border-color: #303b63;
|
|
10
|
+
--reactaform-border-hover: #6366f1;
|
|
11
|
+
--reactaform-border-focus: #22d3ee;
|
|
12
|
+
|
|
13
|
+
--reactaform-error-color: #fb7185;
|
|
14
|
+
--reactaform-success-color: #34d399;
|
|
15
|
+
|
|
16
|
+
--reactaform-hover-bg: rgba(99,102,241,0.08);
|
|
17
|
+
--reactaform-border-radius: 10px;
|
|
18
|
+
|
|
19
|
+
--reactaform-shadow: 0 0 20px rgba(99,102,241,.3);
|
|
20
|
+
|
|
21
|
+
/* Tooltip */
|
|
22
|
+
--reactaform-tooltip-color-bg: rgba(40, 40, 40, 0.95);
|
|
23
|
+
--reactaform-tooltip-color: #F5F5F5;
|
|
24
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
[data-reactaform-theme="shadcn"] {
|
|
2
|
+
/* Surfaces */
|
|
3
|
+
--reactaform-primary-bg: #ffffff;
|
|
4
|
+
--reactaform-secondary-bg: #ffffff;
|
|
5
|
+
--reactaform-input-bg: #f5f6f8;
|
|
6
|
+
|
|
7
|
+
/* Text */
|
|
8
|
+
--reactaform-text-color: #242424;
|
|
9
|
+
--reactaform-text-muted: #616161;
|
|
10
|
+
|
|
11
|
+
/* Borders */
|
|
12
|
+
--reactaform-border-color: #d1d1d6;
|
|
13
|
+
--reactaform-border-hover: #bdbdbd;
|
|
14
|
+
--reactaform-border-focus: #0078d4;
|
|
15
|
+
|
|
16
|
+
/* Accent */
|
|
17
|
+
--reactaform-success-color: #107c10;
|
|
18
|
+
--reactaform-error-color: #d13438;
|
|
19
|
+
|
|
20
|
+
/* Interaction */
|
|
21
|
+
--reactaform-hover-bg: rgba(0,0,0,0.04);
|
|
22
|
+
|
|
23
|
+
/* Shape */
|
|
24
|
+
--reactaform-border-radius: 6px;
|
|
25
|
+
|
|
26
|
+
/* Shadow */
|
|
27
|
+
--reactaform-shadow:
|
|
28
|
+
0 4px 12px rgba(0,0,0,.08);
|
|
29
|
+
|
|
30
|
+
/* Buttons */
|
|
31
|
+
--reactaform-button-bg: #0078d4;
|
|
32
|
+
--reactaform-button-text: white;
|
|
33
|
+
--reactaform-button-border-radius: 6px;
|
|
34
|
+
|
|
35
|
+
--reactaform-input-padding: 10px 12px;
|
|
36
|
+
|
|
37
|
+
/* Tooltip */
|
|
38
|
+
--reactaform-tooltip-color-bg: rgba(60,60,60,0.92);
|
|
39
|
+
--reactaform-tooltip-color: #ffffff;
|
|
40
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
[data-reactaform-theme="pastel"] {
|
|
2
|
+
--reactaform-primary-bg: #fafafa;
|
|
3
|
+
--reactaform-secondary-bg: #ffffff;
|
|
4
|
+
--reactaform-input-bg: #ffffff;
|
|
5
|
+
|
|
6
|
+
--reactaform-text-color: #374151;
|
|
7
|
+
--reactaform-text-muted: #6b7280;
|
|
8
|
+
|
|
9
|
+
--reactaform-border-color: #e5e7eb;
|
|
10
|
+
--reactaform-border-hover: #cbd5e1;
|
|
11
|
+
--reactaform-border-focus: #a78bfa;
|
|
12
|
+
|
|
13
|
+
--reactaform-error-color: #fb7185;
|
|
14
|
+
--reactaform-success-color: #4ade80;
|
|
15
|
+
|
|
16
|
+
--reactaform-hover-bg: #f4f4ff;
|
|
17
|
+
|
|
18
|
+
--reactaform-border-radius: 10px;
|
|
19
|
+
--reactaform-shadow: 0 10px 28px rgba(99,102,241,0.08);
|
|
20
|
+
|
|
21
|
+
/* Tooltip */
|
|
22
|
+
--reactaform-tooltip-color-bg: rgba(60,60,60,0.92);
|
|
23
|
+
--reactaform-tooltip-color: #ffffff;
|
|
24
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
[data-reactaform-size="spacious"] {
|
|
2
|
+
--reactaform-input-padding: 14px 16px;
|
|
3
|
+
--reactaform-font-size: 15px;
|
|
4
|
+
--reactaform-space: 14px;
|
|
5
|
+
--reactaform-space-lg: 18px;
|
|
6
|
+
--reactaform-field-gap: 18px;
|
|
7
|
+
--reactaform-column-gap: 14px;
|
|
8
|
+
--reactaform-border-radius: 10px;
|
|
9
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
[data-reactaform-theme="tailwind-dark"] {
|
|
2
|
+
--reactaform-primary-bg: #0f172a; /* slate-900 */
|
|
3
|
+
--reactaform-secondary-bg: #020617; /* slate-950 */
|
|
4
|
+
--reactaform-input-bg: #020617;
|
|
5
|
+
|
|
6
|
+
--reactaform-text-color: #f9fafb; /* slate-50 */
|
|
7
|
+
--reactaform-text-muted: #9ca3af; /* gray-400 */
|
|
8
|
+
--reactaform-field-text-color: #e5e7eb;
|
|
9
|
+
|
|
10
|
+
--reactaform-border-color: #334155; /* slate-600 */
|
|
11
|
+
--reactaform-border-hover: #475569; /* slate-500 */
|
|
12
|
+
--reactaform-border-focus: #818cf8; /* indigo-400 */
|
|
13
|
+
|
|
14
|
+
--reactaform-error-color: #fb7185; /* rose-400 */
|
|
15
|
+
--reactaform-success-color: #34d399; /* emerald-400 */
|
|
16
|
+
|
|
17
|
+
--reactaform-hover-bg: rgba(255,255,255,0.05);
|
|
18
|
+
|
|
19
|
+
--reactaform-border-radius: 0.5rem;
|
|
20
|
+
|
|
21
|
+
--reactaform-shadow:
|
|
22
|
+
0 2px 8px rgba(0,0,0,.6);
|
|
23
|
+
|
|
24
|
+
--reactaform-button-bg: #4f46e5; /* indigo-600 */
|
|
25
|
+
--reactaform-button-text: #ffffff;
|
|
26
|
+
|
|
27
|
+
/* Tooltip */
|
|
28
|
+
--reactaform-tooltip-color-bg: rgba(40, 40, 40, 0.95);
|
|
29
|
+
--reactaform-tooltip-color: #F5F5F5;
|
|
30
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
[data-reactaform-theme="tailwind"] {
|
|
2
|
+
/* Backgrounds */
|
|
3
|
+
--reactaform-primary-bg: #f9fafb; /* slate-50 */
|
|
4
|
+
--reactaform-secondary-bg: #ffffff; /* white */
|
|
5
|
+
--reactaform-input-bg: #ffffff;
|
|
6
|
+
|
|
7
|
+
/* Text */
|
|
8
|
+
--reactaform-text-color: #111827; /* gray-900 */
|
|
9
|
+
--reactaform-text-muted: #6b7280; /* gray-500 */
|
|
10
|
+
--reactaform-field-text-color: #1f2937; /* gray-800 */
|
|
11
|
+
|
|
12
|
+
/* Borders */
|
|
13
|
+
--reactaform-border-color: #d1d5db; /* gray-300 */
|
|
14
|
+
--reactaform-border-hover: #9ca3af; /* gray-400 */
|
|
15
|
+
--reactaform-border-focus: #6366f1; /* indigo-500 */
|
|
16
|
+
|
|
17
|
+
/* Status colors */
|
|
18
|
+
--reactaform-error-color: #f43f5e; /* rose-500 */
|
|
19
|
+
--reactaform-success-color: #10b981; /* emerald-500 */
|
|
20
|
+
|
|
21
|
+
/* Hover */
|
|
22
|
+
--reactaform-hover-bg: #f3f4f6; /* gray-100 */
|
|
23
|
+
|
|
24
|
+
/* Radii */
|
|
25
|
+
--reactaform-border-radius: 0.5rem; /* rounded-lg */
|
|
26
|
+
|
|
27
|
+
/* Shadows (Tailwind style) */
|
|
28
|
+
--reactaform-shadow:
|
|
29
|
+
0 1px 2px rgba(0,0,0,.05),
|
|
30
|
+
0 1px 3px rgba(0,0,0,.1);
|
|
31
|
+
|
|
32
|
+
/* Typography */
|
|
33
|
+
--reactaform-font-size: 14px;
|
|
34
|
+
--reactaform-font-weight: 500;
|
|
35
|
+
|
|
36
|
+
/* Spacing (Tailwind scale) */
|
|
37
|
+
--reactaform-space: 0.5rem; /* 2 = 8px */
|
|
38
|
+
--reactaform-space-lg: 0.75rem; /* 3 = 12px */
|
|
39
|
+
|
|
40
|
+
/* Buttons */
|
|
41
|
+
--reactaform-button-bg: #4f46e5; /* indigo-600 */
|
|
42
|
+
--reactaform-button-text: #ffffff;
|
|
43
|
+
--reactaform-button-border-radius: 0.5rem;
|
|
44
|
+
--reactaform-button-shadow:
|
|
45
|
+
0 2px 4px rgba(79,70,229,.3);
|
|
46
|
+
|
|
47
|
+
/* Tooltip */
|
|
48
|
+
--reactaform-tooltip-color-bg: rgba(60,60,60,0.92);
|
|
49
|
+
--reactaform-tooltip-color: #ffffff;
|
|
50
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reactaform",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "A powerful, type-safe React form builder library with dynamic field rendering, conditional visibility, multi-language support, and extensible validation",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -34,7 +34,28 @@
|
|
|
34
34
|
"import": "./dist/reactaform.es.js",
|
|
35
35
|
"require": "./dist/reactaform.cjs.js"
|
|
36
36
|
},
|
|
37
|
-
"./style.css": "./dist/reactaform.css"
|
|
37
|
+
"./style.css": "./dist/reactaform.css",
|
|
38
|
+
"./themes/*.css": "./dist/themes/*.css",
|
|
39
|
+
"./themes/ant-design.css": "./dist/themes/ant-design.css",
|
|
40
|
+
"./themes/ant-design-dark.css": "./dist/themes/ant-design-dark.css",
|
|
41
|
+
"./themes/blueprint.css": "./dist/themes/blueprint.css",
|
|
42
|
+
"./themes/blueprint-dark.css": "./dist/themes/blueprint-dark.css",
|
|
43
|
+
"./themes/compact-variant.css": "./dist/themes/compact-variant.css",
|
|
44
|
+
"./themes/fluent.css": "./dist/themes/fluent.css",
|
|
45
|
+
"./themes/glass-morphism.css": "./dist/themes/glass-morphism.css",
|
|
46
|
+
"./themes/high-contrast-accessible.css": "./dist/themes/high-contrast-accessible.css",
|
|
47
|
+
"./themes/ios-mobile.css": "./dist/themes/ios-mobile.css",
|
|
48
|
+
"./themes/macos-native.css": "./dist/themes/macos-native.css",
|
|
49
|
+
"./themes/material.css": "./dist/themes/material.css",
|
|
50
|
+
"./themes/material-dark.css": "./dist/themes/material-dark.css",
|
|
51
|
+
"./themes/midnight-dark.css": "./dist/themes/midnight-dark.css",
|
|
52
|
+
"./themes/modern-light.css": "./dist/themes/modern-light.css",
|
|
53
|
+
"./themes/neon-cyber-dark.css": "./dist/themes/neon-cyber-dark.css",
|
|
54
|
+
"./themes/shadcn.css": "./dist/themes/shadcn.css",
|
|
55
|
+
"./themes/soft-pastel.css": "./dist/themes/soft-pastel.css",
|
|
56
|
+
"./themes/spacious-variant.css": "./dist/themes/spacious-variant.css",
|
|
57
|
+
"./themes/tailwind.css": "./dist/themes/tailwind.css",
|
|
58
|
+
"./themes/tailwind-dark.css": "./dist/themes/tailwind-dark.css"
|
|
38
59
|
},
|
|
39
60
|
"files": [
|
|
40
61
|
"dist/*.js",
|
|
@@ -44,6 +65,7 @@
|
|
|
44
65
|
"dist/*.css",
|
|
45
66
|
"dist/*.map",
|
|
46
67
|
"dist/*.d.ts",
|
|
68
|
+
"dist/themes/*.css",
|
|
47
69
|
"README.md",
|
|
48
70
|
"LICENSE"
|
|
49
71
|
],
|
|
@@ -53,7 +75,7 @@
|
|
|
53
75
|
},
|
|
54
76
|
"scripts": {
|
|
55
77
|
"build:types": "tsc -p tsconfig.build.json --noEmit false",
|
|
56
|
-
"build:lib": "vite build --config vite.lib.config.ts && npm run build:types",
|
|
78
|
+
"build:lib": "vite build --config vite.lib.config.ts && npm run build:types && node scripts/copy-themes.js",
|
|
57
79
|
"build:pack": "npm run build:lib && npm pack",
|
|
58
80
|
"test": "vitest run --config ./vitest.config.ts",
|
|
59
81
|
"typecheck": "tsc -p tsconfig.build.json --noEmit",
|