armtek-uikit-react 1.0.262 → 1.0.265

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 (77) hide show
  1. package/assets/Accordion.scss +123 -123
  2. package/assets/Adornment.scss +22 -22
  3. package/assets/Alert.scss +56 -56
  4. package/assets/Avatar.scss +111 -111
  5. package/assets/AvatarGroup.scss +47 -47
  6. package/assets/BackDrop.scss +39 -39
  7. package/assets/Badge.scss +96 -96
  8. package/assets/Button.scss +750 -750
  9. package/assets/ButtonGroup.scss +37 -37
  10. package/assets/ButtonIcon.scss +59 -32
  11. package/assets/Card.scss +13 -13
  12. package/assets/Checkbox.scss +313 -313
  13. package/assets/Chip.scss +327 -327
  14. package/assets/DateField.scss +2 -2
  15. package/assets/DatePicker.scss +72 -72
  16. package/assets/Dropdown.scss +42 -42
  17. package/assets/FormControls.scss +14 -14
  18. package/assets/HelperText.scss +11 -11
  19. package/assets/Icon.scss +30 -30
  20. package/assets/Interval.scss +34 -34
  21. package/assets/Link.scss +96 -96
  22. package/assets/ListItem.scss +76 -76
  23. package/assets/Loader.scss +56 -56
  24. package/assets/Logo.scss +28 -28
  25. package/assets/Modal.scss +103 -103
  26. package/assets/Pagination.scss +3 -3
  27. package/assets/Paper.scss +22 -22
  28. package/assets/Period.scss +8 -8
  29. package/assets/Popper.scss +2 -2
  30. package/assets/Rating.scss +26 -26
  31. package/assets/Select.scss +85 -85
  32. package/assets/Skeleton.scss +25 -25
  33. package/assets/Slider.scss +5 -5
  34. package/assets/Stack.scss +27 -27
  35. package/assets/Status.scss +69 -69
  36. package/assets/StepItem.scss +89 -89
  37. package/assets/StepItemIcon.scss +47 -47
  38. package/assets/Stepper.scss +30 -30
  39. package/assets/Switch.scss +67 -67
  40. package/assets/Table.scss +52 -52
  41. package/assets/TextArea.scss +17 -17
  42. package/assets/TextField.scss +197 -197
  43. package/assets/Tooltip.scss +17 -17
  44. package/assets/classes.scss +422 -422
  45. package/assets/fonts.scss +24 -24
  46. package/assets/global.scss +222 -222
  47. package/assets/styles.min.css +1 -1
  48. package/assets/styles.min.css.map +1 -1
  49. package/assets/styles.scss +46 -46
  50. package/assets/variables.scss +13 -13
  51. package/lib/helpers/helpers.d.ts +1 -1
  52. package/lib/helpers/helpers.js +1 -1
  53. package/lib/hooks/useEnhancedEffect.js +6 -6
  54. package/lib/hooks/useTimeout.js +2 -2
  55. package/package.json +1 -1
  56. package/ui/Avatar/Avatar.d.ts +10 -1
  57. package/ui/Avatar/Avatar.js +4 -2
  58. package/ui/ButtonIcon/ButtonIcon.js +5 -2
  59. package/ui/Card/Card.d.ts +1 -1
  60. package/ui/Card/Card.js +4 -2
  61. package/ui/Chip/Chip.d.ts +3 -2
  62. package/ui/Chip/Chip.js +4 -2
  63. package/ui/Form/DateField/DateField.js +2 -2
  64. package/ui/Form/DatePicker/styles.css +802 -802
  65. package/ui/Form/TextArea/TextArea.d.ts +7 -1
  66. package/ui/Form/TextArea/TextArea.js +37 -6
  67. package/ui/Icon/Mi.d.ts +17 -1
  68. package/ui/Icon/Mi.js +5 -3
  69. package/ui/Icon/Mis.d.ts +1 -1
  70. package/ui/Icon/Mis.js +4 -3
  71. package/ui/Link/Link.d.ts +3 -2
  72. package/ui/Link/Link.js +4 -2
  73. package/ui/Slider/style.scss +346 -346
  74. package/ui/Stack/Stack.d.ts +1 -1
  75. package/ui/Stack/Stack.js +3 -2
  76. package/ui/Status/Status.d.ts +4 -3
  77. package/ui/Status/Status.js +4 -2
package/assets/StepItemIcon.scss CHANGED
@@ -1,48 +1,48 @@
1
- @use "variables" as v;
2
-
3
- .arm-step-item-icon{
4
- @include v.flex(center);
5
- width: 24px;
6
- min-width: 24px;
7
- height: 24px;
8
- border-radius: 50%;
9
- border: 1px solid;
10
- border-color: var(--color-primary);
11
- color: var(--color-primary);
12
- background: #fff;
13
- & .arm-step-item-icon__number{
14
- font-size: 16px;
15
- }
16
- &_small{
17
- width: 20px;
18
- min-width: 20px;
19
- height: 20px;
20
- & .arm-step-item-icon__number{
21
- font-size: 14px;
22
- }
23
- }
24
- }
25
-
26
- .arm-step-item-icon__inner{
27
- font-size: 0;
28
- }
29
-
30
- .arm-step-item-icon_active{
31
- color: #fff;
32
- background: var(--color-primary);
33
- &.arm-step-item-icon_icon{
34
- background: transparent;
35
- color: var(--color-primary);
36
- border: none;
37
- }
38
- }
39
- .arm-step-item-icon_complete{
40
- color: #fff;
41
- background: var(--color-success);
42
- border-color: var(--color-success);
43
- }
44
- .arm-step-item-icon_error{
45
- color: var(--color-error-dark) !important;
46
- background: transparent;
47
- border-color: transparent;
1
+ @use "variables" as v;
2
+
3
+ .arm-step-item-icon{
4
+ @include v.flex(center);
5
+ width: 24px;
6
+ min-width: 24px;
7
+ height: 24px;
8
+ border-radius: 50%;
9
+ border: 1px solid;
10
+ border-color: var(--color-primary);
11
+ color: var(--color-primary);
12
+ background: #fff;
13
+ & .arm-step-item-icon__number{
14
+ font-size: 16px;
15
+ }
16
+ &_small{
17
+ width: 20px;
18
+ min-width: 20px;
19
+ height: 20px;
20
+ & .arm-step-item-icon__number{
21
+ font-size: 14px;
22
+ }
23
+ }
24
+ }
25
+
26
+ .arm-step-item-icon__inner{
27
+ font-size: 0;
28
+ }
29
+
30
+ .arm-step-item-icon_active{
31
+ color: #fff;
32
+ background: var(--color-primary);
33
+ &.arm-step-item-icon_icon{
34
+ background: transparent;
35
+ color: var(--color-primary);
36
+ border: none;
37
+ }
38
+ }
39
+ .arm-step-item-icon_complete{
40
+ color: #fff;
41
+ background: var(--color-success);
42
+ border-color: var(--color-success);
43
+ }
44
+ .arm-step-item-icon_error{
45
+ color: var(--color-error-dark) !important;
46
+ background: transparent;
47
+ border-color: transparent;
48
48
  }
package/assets/Stepper.scss CHANGED
@@ -1,31 +1,31 @@
1
-
2
-
3
- .arm-stepper_horizontal{
4
- display: flex;
5
- }
6
- .arm-stepper__connector{
7
- padding-left: 23px;
8
- border-left: 1px solid #B1BCC6;
9
- margin-left: 11px;
10
- height: 25px;
11
- margin-bottom: 5px;
12
- }
13
- .arm-stepper_small{
14
- & .arm-stepper__connector{
15
- padding-left: 19px;
16
- margin-left: 10px;
17
- }
18
- }
19
- .arm-stepper_horizontal{
20
- & .arm-stepper__connector{
21
- height: 1px;
22
- width: auto;
23
- margin-right: 5px;
24
- margin-bottom: 0;
25
- padding-left: 0;
26
- border-left:none;
27
- border-top: 1px solid #B1BCC6;
28
- flex: 1 1 0;
29
- margin-top:10px;
30
- }
1
+
2
+
3
+ .arm-stepper_horizontal{
4
+ display: flex;
5
+ }
6
+ .arm-stepper__connector{
7
+ padding-left: 23px;
8
+ border-left: 1px solid #B1BCC6;
9
+ margin-left: 11px;
10
+ height: 25px;
11
+ margin-bottom: 5px;
12
+ }
13
+ .arm-stepper_small{
14
+ & .arm-stepper__connector{
15
+ padding-left: 19px;
16
+ margin-left: 10px;
17
+ }
18
+ }
19
+ .arm-stepper_horizontal{
20
+ & .arm-stepper__connector{
21
+ height: 1px;
22
+ width: auto;
23
+ margin-right: 5px;
24
+ margin-bottom: 0;
25
+ padding-left: 0;
26
+ border-left:none;
27
+ border-top: 1px solid #B1BCC6;
28
+ flex: 1 1 0;
29
+ margin-top:10px;
30
+ }
31
31
  }
package/assets/Switch.scss CHANGED
@@ -1,68 +1,68 @@
1
-
2
-
3
- .arm-switch {
4
- position: relative;
5
- display: block;
6
- width: 34px;
7
- height: 14px;
8
- }
9
-
10
-
11
- .arm-switch__input {
12
- opacity: 0;
13
- width: 0;
14
- height: 0;
15
- }
16
-
17
- /* The slider */
18
- .arm-switch__slider {
19
- position: absolute;
20
- cursor: pointer;
21
- top: 0;
22
- left: 0;
23
- right: 0;
24
- bottom: 0;
25
- background-color: var(--color-neutral-light);
26
- -webkit-transition: .4s;
27
- transition: .4s;
28
- border-radius: 7px;
29
- }
30
-
31
- .arm-switch__slider:before {
32
- position: absolute;
33
- content: "";
34
- height: 20px;
35
- width: 20px;
36
- left: -3px;
37
- bottom: -3px;
38
- background-color: white;
39
- -webkit-transition: .4s;
40
- transition: .4s;
41
- border-radius: 50%;
42
- box-shadow: var(--box-shadow);
43
- }
44
-
45
- .arm-switch__input:checked + .arm-switch__slider {
46
- background-color: var(--color-orange-400);
47
- }
48
-
49
- .arm-switch__input:checked + .arm-switch__slider:before {
50
- -webkit-transform: translateX(22px);
51
- -ms-transform: translateX(22px);
52
- transform: translateX(22px);
53
- background: var(--color-secondary);
54
- }
55
-
56
- .arm-switch_small{
57
- width: 26px;
58
- height: 10px;
59
- & .arm-switch__slider:before{
60
- width: 16px;
61
- height: 16px;
62
- }
63
- & .arm-switch__input:checked + .arm-switch__slider:before {
64
- -webkit-transform: translateX(20px);
65
- -ms-transform: translateX(20px);
66
- transform: translateX(18px);
67
- }
1
+
2
+
3
+ .arm-switch {
4
+ position: relative;
5
+ display: block;
6
+ width: 34px;
7
+ height: 14px;
8
+ }
9
+
10
+
11
+ .arm-switch__input {
12
+ opacity: 0;
13
+ width: 0;
14
+ height: 0;
15
+ }
16
+
17
+ /* The slider */
18
+ .arm-switch__slider {
19
+ position: absolute;
20
+ cursor: pointer;
21
+ top: 0;
22
+ left: 0;
23
+ right: 0;
24
+ bottom: 0;
25
+ background-color: var(--color-neutral-light);
26
+ -webkit-transition: .4s;
27
+ transition: .4s;
28
+ border-radius: 7px;
29
+ }
30
+
31
+ .arm-switch__slider:before {
32
+ position: absolute;
33
+ content: "";
34
+ height: 20px;
35
+ width: 20px;
36
+ left: -3px;
37
+ bottom: -3px;
38
+ background-color: white;
39
+ -webkit-transition: .4s;
40
+ transition: .4s;
41
+ border-radius: 50%;
42
+ box-shadow: var(--box-shadow);
43
+ }
44
+
45
+ .arm-switch__input:checked + .arm-switch__slider {
46
+ background-color: var(--color-orange-400);
47
+ }
48
+
49
+ .arm-switch__input:checked + .arm-switch__slider:before {
50
+ -webkit-transform: translateX(22px);
51
+ -ms-transform: translateX(22px);
52
+ transform: translateX(22px);
53
+ background: var(--color-secondary);
54
+ }
55
+
56
+ .arm-switch_small{
57
+ width: 26px;
58
+ height: 10px;
59
+ & .arm-switch__slider:before{
60
+ width: 16px;
61
+ height: 16px;
62
+ }
63
+ & .arm-switch__input:checked + .arm-switch__slider:before {
64
+ -webkit-transform: translateX(20px);
65
+ -ms-transform: translateX(20px);
66
+ transform: translateX(18px);
67
+ }
68
68
  }
package/assets/Table.scss CHANGED
@@ -1,53 +1,53 @@
1
-
2
- .arm-table{
3
- width: 100%;
4
- margin:0;
5
- padding:0;
6
- background:none;
7
- border:none;
8
- border-collapse:collapse;
9
- border-spacing:0;
10
- }
11
-
12
- .arm-table-row_click:hover td{
13
- background: #F8F9FA;
14
- }
15
-
16
- .arm-table-cell{
17
- color: var(--color-gray-800);
18
- font-size: 14px;
19
- border-bottom: 1px solid var(--color-gray-300);
20
- background-color: #fff;
21
- }
22
- .arm-table-cell__inner{
23
- padding: calc(var(--size-step) * 2 ) var(--size-step);
24
- }
25
- .arm-table-cell__inner_size_small{
26
- padding: var(--size-step) calc(var(--size-step) / 2 );
27
- }
28
- .arm-table-cell__inner_variant_outlined{
29
- padding-left: 0;
30
- padding-right: 0;
31
- }
32
-
33
-
34
-
35
- .arm-table-cell_head{
36
- color: var(--color-gray-500)
37
- }
38
- .arm-table-cell_variant_outlined{
39
- background-color: transparent;
40
- }
41
- .arm-theme-dark{
42
- .arm-table-cell{
43
- background-color: var(--color-gray-800);
44
- color: var(--color-gray-200);
45
- border-color: var(--color-gray-700);
46
- }
47
- .arm-table-cell_head{
48
- color: var(--color-gray-200)
49
- }
50
- .arm-table-row_click:hover td{
51
- background-color: rgba(var(--color-gray-700-rgb), 0.5);
52
- }
1
+
2
+ .arm-table{
3
+ width: 100%;
4
+ margin:0;
5
+ padding:0;
6
+ background:none;
7
+ border:none;
8
+ border-collapse:collapse;
9
+ border-spacing:0;
10
+ }
11
+
12
+ .arm-table-row_click:hover td{
13
+ background: #F8F9FA;
14
+ }
15
+
16
+ .arm-table-cell{
17
+ color: var(--color-gray-800);
18
+ font-size: 14px;
19
+ border-bottom: 1px solid var(--color-gray-300);
20
+ background-color: #fff;
21
+ }
22
+ .arm-table-cell__inner{
23
+ padding: calc(var(--size-step) * 2 ) var(--size-step);
24
+ }
25
+ .arm-table-cell__inner_size_small{
26
+ padding: var(--size-step) calc(var(--size-step) / 2 );
27
+ }
28
+ .arm-table-cell__inner_variant_outlined{
29
+ padding-left: 0;
30
+ padding-right: 0;
31
+ }
32
+
33
+
34
+
35
+ .arm-table-cell_head{
36
+ color: var(--color-gray-500)
37
+ }
38
+ .arm-table-cell_variant_outlined{
39
+ background-color: transparent;
40
+ }
41
+ .arm-theme-dark{
42
+ .arm-table-cell{
43
+ background-color: var(--color-gray-800);
44
+ color: var(--color-gray-200);
45
+ border-color: var(--color-gray-700);
46
+ }
47
+ .arm-table-cell_head{
48
+ color: var(--color-gray-200)
49
+ }
50
+ .arm-table-row_click:hover td{
51
+ background-color: rgba(var(--color-gray-700-rgb), 0.5);
52
+ }
53
53
  }
package/assets/TextArea.scss CHANGED
@@ -1,18 +1,18 @@
1
-
2
- .arm-textarea{
3
- height: auto;
4
- min-height: var(--size-elarge);
5
- line-height: 20px;
6
- & textarea{
7
- resize: none;
8
- appearance: none;
9
- }
10
- }
11
-
12
- .arm-textarea_size_small{
13
- height: auto;
14
- min-height: var(--size-large);
15
- }
16
- .arm-textarea__root{
17
- height: auto;
1
+
2
+ .arm-textarea{
3
+ height: auto;
4
+ min-height: var(--size-elarge);
5
+ line-height: 20px;
6
+ & textarea{
7
+ resize: none;
8
+ appearance: none;
9
+ }
10
+ }
11
+
12
+ .arm-textarea_size_small{
13
+ height: auto;
14
+ min-height: var(--size-large);
15
+ }
16
+ .arm-textarea__root{
17
+ height: auto;
18
18
  }