@itcase/ui 1.0.58 → 1.0.60

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 (8) hide show
  1. package/dist/components/Badge.js +5 -1
  2. package/dist/components/Button.js +2 -0
  3. package/dist/components/Label.js +2 -0
  4. package/dist/css/components/Choice/Choice.css +8 -18
  5. package/dist/css/components/Choice/css/__item/choice__item.css +5 -7
  6. package/dist/css/components/DatePicker/DatePicker.css +69 -77
  7. package/dist/css/styles/position/position.css +1 -1
  8. package/package.json +1 -1
package/dist/components/Badge.js CHANGED
@@ -50,6 +50,10 @@ function Badge(props) {
50
50
  prefix: 'fill_',
51
51
  propsKey: 'fill'
52
52
  });
53
+ const positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
54
+ prefix: 'position_',
55
+ propsKey: 'position'
56
+ });
53
57
  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
54
58
  prefix: 'badge_size_',
55
59
  propsKey: 'size'
@@ -59,7 +63,7 @@ function Badge(props) {
59
63
  propsKey: 'type'
60
64
  });
61
65
  return /*#__PURE__*/React__default.default.createElement("div", {
62
- className: clsx__default.default(className, 'badge', borderClass, borderTypeClass, fillClass, sizeClass, typeClass)
66
+ className: clsx__default.default(className, 'badge', borderClass, borderTypeClass, fillClass, positionClass, sizeClass, typeClass)
63
67
  }, children || /*#__PURE__*/React__default.default.createElement(index.Text, {
64
68
  textColor: textColor,
65
69
  size: textSize
package/dist/components/Button.js CHANGED
@@ -62,6 +62,7 @@ const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(pr
62
62
  iconBeforeSize,
63
63
  label,
64
64
  labelTextColor,
65
+ labelTextColorHover,
65
66
  labelTextSize,
66
67
  labelTextWrap,
67
68
  loaderSet,
@@ -164,6 +165,7 @@ const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(pr
164
165
  size: labelTextSize,
165
166
  style: labelStyles,
166
167
  textColor: labelTextColor,
168
+ textColorHover: labelTextColorHover,
167
169
  textWrap: labelTextWrap
168
170
  }, children || label), iconAfter && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
169
171
  className: "button__icon_after",
package/dist/components/Label.js CHANGED
@@ -45,6 +45,7 @@ function Label(props) {
45
45
  labelTextSize,
46
46
  labelTextWrap,
47
47
  labelTextColor,
48
+ labelTextColorHover,
48
49
  set,
49
50
  before,
50
51
  after,
@@ -95,6 +96,7 @@ function Label(props) {
95
96
  }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
96
97
  className: "label__label",
97
98
  textColor: labelTextColor || labelConfig.appearance[appearance] && labelConfig.appearance[appearance].labelTextColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
99
+ textColorHoverClass: labelTextColorHover || labelConfig.appearance[appearance] && labelConfig.appearance[appearance].labelTextColorHover.replace(/([A-Z])/g, '-$1').toLowerCase(),
98
100
  size: labelTextSize,
99
101
  textWrap: labelTextWrap
100
102
  }, label) : /*#__PURE__*/React__default.default.createElement("div", {
package/dist/css/components/Choice/Choice.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .choice {
2
+ position: relative;
2
3
  display: flex;
3
4
  align-items: center;
4
5
  &__wrapper {
@@ -10,16 +11,7 @@
10
11
  &_shape {
11
12
  &_rounded {
12
13
  border-radius: 8px;
13
- ^^&__wrapper {
14
- ^^^&__item:first-child {
15
- border-top-left-radius: 8px;
16
- border-bottom-left-radius: 8px;
17
- }
18
- ^^^&__item:last-child {
19
- border-top-right-radius: 8px;
20
- border-bottom-right-radius: 8px;
21
- }
22
- }
14
+ overflow: hidden;
23
15
  }
24
16
  &_circular {
25
17
  border-radius: 50%;
@@ -32,25 +24,23 @@
32
24
  &_$(size) {
33
25
  ^^&__item {
34
26
  &-label {
35
- padding: var(--choice-item-size-$(size)-padding, 10px 16px);
27
+ padding: var(--choice-item-size-$(size)-padding, 9px 16px);
36
28
  }
37
29
  }
38
30
  }
39
31
  }
40
32
  }
41
33
  }
42
- .choice__item {
34
+ div.choice__item {
43
35
  min-width: 30px;
44
- border-left: 0;
45
- border-top: 0;
46
- border-bottom: 0;
36
+ border-width: 0;
47
37
  position: relative;
48
38
  display: flex;
49
39
  &:hover {
50
40
  background: var(--choice-item-background-hover);
51
41
  }
52
- &:last-child {
53
- border-right: 0;
42
+ &:not(:last-child) {
43
+ border-right-width: 1px;
54
44
  }
55
45
  &_active {
56
46
  background: var(--choice-item-background-active);
@@ -70,7 +60,7 @@
70
60
  width: 100%;
71
61
  text-align: center;
72
62
  position: relative;
73
- display: block;
63
+ display: flex;
74
64
  z-index: 3;
75
65
  transition: color 0.5s ease;
76
66
  cursor: pointer;
package/dist/css/components/Choice/css/__item/choice__item.css CHANGED
@@ -1,15 +1,13 @@
1
- .choice__item {
1
+ div.choice__item {
2
2
  min-width: 30px;
3
- border-left: 0;
4
- border-top: 0;
5
- border-bottom: 0;
3
+ border-width: 0;
6
4
  position: relative;
7
5
  display: flex;
8
6
  &:hover {
9
7
  background: var(--choice-item-background-hover);
10
8
  }
11
- &:last-child {
12
- border-right: 0;
9
+ &:not(:last-child) {
10
+ border-right-width: 1px;
13
11
  }
14
12
  &_active {
15
13
  background: var(--choice-item-background-active);
@@ -29,7 +27,7 @@
29
27
  width: 100%;
30
28
  text-align: center;
31
29
  position: relative;
32
- display: block;
30
+ display: flex;
33
31
  z-index: 3;
34
32
  transition: color 0.5s ease;
35
33
  cursor: pointer;
package/dist/css/components/DatePicker/DatePicker.css CHANGED
@@ -760,23 +760,15 @@
760
760
  vertical-align: -0.125em;
761
761
  }
762
762
  .react-datepicker {
763
+ font-size: inherit;
763
764
  background: var(--date-picker-background);
764
- border-radius: var(--date-picker-border-radius);
765
765
  border: none;
766
- box-shadow: var(--date-picker-box-shadow);
767
- font-size: inherit;
766
+ border-radius: var(--date-picker-border-radius);
768
767
  display: flex;
768
+ box-shadow: var(--date-picker-box-shadow);
769
769
  &__triangle {
770
770
  display: none;
771
771
  }
772
- &-wrapper {
773
- width: 100%;
774
- ^&__input-container {
775
- & .input {
776
- cursor: pointer;
777
- }
778
- }
779
- }
780
772
  &__tab-loop {
781
773
  ^&-popper {
782
774
  z-index: 1000 !important;
@@ -784,8 +776,8 @@
784
776
  }
785
777
  &__header {
786
778
  background: var(--date-picker-background);
787
- border: none;
788
779
  padding: 0;
780
+ border: none;
789
781
  &--time {
790
782
  padding: 0;
791
783
  }
@@ -793,12 +785,12 @@
793
785
  &__month {
794
786
  margin: 0;
795
787
  &-container {
796
- margin: 0;
797
788
  padding: var(--date-picker-padding);
789
+ margin: 0;
798
790
  ^^&__header {
799
791
  padding: 0;
800
- border-bottom: none;
801
792
  border-radius: 0;
793
+ border-bottom: none;
802
794
  display: flex;
803
795
  flex-direction: column;
804
796
  gap: 24px;
@@ -808,13 +800,13 @@
808
800
  justify-content: space-between;
809
801
  align-items: center;
810
802
  ^^^^&__data {
803
+ display: flex;
811
804
  flex: 1;
812
805
  justify-content: center;
813
- display: flex;
814
806
  align-items: center;
815
807
  gap: 12px;
816
808
  ^^^^^&__month {
817
- &:first-letter {
809
+ &::first-letter {
818
810
  text-transform: uppercase;
819
811
  }
820
812
  }
@@ -829,13 +821,13 @@
829
821
  display: flex;
830
822
  }
831
823
  &-name {
832
- display: flex;
833
824
  width: var(--date-picker-day-width);
834
825
  height: var(--date-picker-day-height);
826
+ line-height: normal;
835
827
  margin: 0;
828
+ display: flex;
836
829
  justify-content: center;
837
830
  align-items: center;
838
- line-height: normal;
839
831
  }
840
832
  }
841
833
  }
@@ -848,42 +840,38 @@
848
840
  margin: 0;
849
841
  border-radius: var(--date-picker-day-border-radius);
850
842
  &:hover {
851
- background: var(--date-picker-day-hover-background);
852
843
  color: var(--date-picker-day-hover-text-color);
844
+ background: var(--date-picker-day-hover-background);
853
845
  }
854
846
  &:focus {
855
847
  outline: none;
856
848
  }
857
849
  &--disabled {
858
- cursor: default !important;
859
850
  background: var(--date-picker-day-outside-background) !important;
851
+ cursor: default !important;
860
852
  & .button__label {
861
- cursor: default !important;
862
853
  color: var(--date-picker-day-outside-text-color) !important;
854
+ cursor: default !important;
863
855
  }
864
856
  }
865
- &--in-selecting-range:not(.react-datepicker__day--in-range):not(
866
- .react-datepicker__month-text--in-range
867
- ):not(.react-datepicker__quarter-text--in-range):not(
868
- .react-datepicker__year-text--in-range
869
- ) {
857
+ &--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
870
858
  background: var(--date-picker-day-selected-background);
871
859
  & .button__label {
872
860
  color: var(--date-picker-day-selected-text-color);
873
861
  }
874
862
  }
875
863
  &--in-range {
876
- border-radius: 0;
877
864
  background: var(--date-picker-day-selected-background);
878
- & .button__label {
879
- color: var(--date-picker-day-selected-text-color);
880
- }
865
+ border-radius: 0;
881
866
  &:hover {
882
867
  background: var(--date-picker-day-selected-background) !important;
883
868
  & .button__label {
884
869
  color: var(--date-picker-day-selected-text-color) !important;
885
870
  }
886
871
  }
872
+ & .button__label {
873
+ color: var(--date-picker-day-selected-text-color);
874
+ }
887
875
  }
888
876
  &--in-selecting-range,
889
877
  &--selecting-range,
@@ -908,24 +896,24 @@
908
896
  }
909
897
  &--today {
910
898
  background: var(--date-picker-day-today-background);
911
- & .button__label {
912
- color: var(--date-picker-day-today-text-color);
913
- }
914
899
  &:hover {
915
900
  background: var(--date-picker-day-hover-background);
916
901
  }
902
+ & .button__label {
903
+ color: var(--date-picker-day-today-text-color);
904
+ }
917
905
  &.react-datepicker__day--in-range {
918
- border-radius: 0;
919
906
  background: var(--date-picker-day-selected-background);
920
- & .button__label {
921
- color: var(--date-picker-day-selected-text-color);
922
- }
907
+ border-radius: 0;
923
908
  &:hover {
924
909
  background: var(--date-picker-day-selected-background) !important;
925
910
  & .button__label {
926
911
  color: var(--date-picker-day-selected-text-color) !important;
927
912
  }
928
913
  }
914
+ & .button__label {
915
+ color: var(--date-picker-day-selected-text-color);
916
+ }
929
917
  }
930
918
  &.react-datepicker__day--range {
931
919
  background-color: var(--date-picker-day-range-background) !important;
@@ -948,41 +936,41 @@
948
936
  }
949
937
  }
950
938
  &--today.react-datepicker__day--selecting-range-start.react-datepicker__day--selecting-range-end {
951
- border-radius: var(--date-picker-day-border-radius) !important;
952
939
  background: var(--date-picker-day-today-background);
940
+ border-radius: var(--date-picker-day-border-radius) !important;
953
941
  & .button__label {
954
942
  color: var(--date-picker-day-today-text-color);
955
943
  }
956
944
  }
957
945
  &--keyboard-selected {
958
- background: var(--date-picker-day-hover-background);
959
946
  color: var(--date-picker-day-hover-text-color);
947
+ background: var(--date-picker-day-hover-background);
960
948
  }
961
949
  &--selected {
962
950
  background: var(--date-picker-day-selected-background);
963
- & .button__label {
964
- color: var(--date-picker-day-selected-text-color);
965
- }
966
951
  &:hover {
967
952
  background: var(--date-picker-day-selected-background) !important;
968
953
  }
954
+ & .button__label {
955
+ color: var(--date-picker-day-selected-text-color);
956
+ }
969
957
  }
970
958
  &--weekend {
971
959
  background: var(--date-picker-day-weekend-background);
972
- & .button__label {
973
- color: var(--date-picker-day-weekend-text-color);
974
- }
975
960
  &:hover {
976
961
  background: var(--date-picker-day-hover-background);
977
962
  }
963
+ & .button__label {
964
+ color: var(--date-picker-day-weekend-text-color);
965
+ }
978
966
  &.react-datepicker__day--selected {
979
967
  background: var(--date-picker-day-selected-background);
980
- & .button__label {
981
- color: var(--date-picker-day-selected-text-color);
982
- }
983
968
  &:hover {
984
969
  background: var(--date-picker-day-selected-background) !important;
985
970
  }
971
+ & .button__label {
972
+ color: var(--date-picker-day-selected-text-color);
973
+ }
986
974
  }
987
975
  &.react-datepicker__day--outside-month {
988
976
  & .button__label {
@@ -990,17 +978,17 @@
990
978
  }
991
979
  }
992
980
  &.react-datepicker__day--in-range {
993
- border-radius: 0;
994
981
  background: var(--date-picker-day-selected-background);
995
- & .button__label {
996
- color: var(--date-picker-day-selected-text-color);
997
- }
982
+ border-radius: 0;
998
983
  &:hover {
999
984
  background: var(--date-picker-day-selected-background) !important;
1000
985
  & .button__label {
1001
986
  color: var(--date-picker-day-selected-text-color) !important;
1002
987
  }
1003
988
  }
989
+ & .button__label {
990
+ color: var(--date-picker-day-selected-text-color);
991
+ }
1004
992
  }
1005
993
  &.react-datepicker__day--range {
1006
994
  background-color: var(--date-picker-day-range-background) !important;
@@ -1023,11 +1011,11 @@
1023
1011
  }
1024
1012
  }
1025
1013
  &--outside-month {
1026
- cursor: default !important;
1027
1014
  background: var(--date-picker-day-outside-background) !important;
1015
+ cursor: default !important;
1028
1016
  & .button__label {
1029
- cursor: default !important;
1030
1017
  color: var(--date-picker-day-outside-text-color) !important;
1018
+ cursor: default !important;
1031
1019
  }
1032
1020
  }
1033
1021
  &-button {
@@ -1044,29 +1032,29 @@
1044
1032
  background: var(--date-picker-background) !important;
1045
1033
  &-container {
1046
1034
  width: auto;
1047
- float: none;
1048
1035
  padding: var(--date-picker-padding);
1036
+ border-left: var(--date-picker-border);
1037
+ float: none;
1049
1038
  display: flex;
1050
1039
  flex-direction: column;
1051
1040
  gap: 24px;
1052
- border-left: var(--date-picker-border);
1053
1041
  ^&-box {
1054
1042
  }
1055
1043
  }
1056
1044
  &-list {
1057
1045
  height: 240px !important;
1058
1046
  &-item {
1059
- border-radius: var(--date-picker-day-border-radius);
1047
+ max-height: var(--date-picker-day-height);
1060
1048
  font-size: var(--date-picker-name-size);
1061
1049
  line-height: 30px;
1062
- max-height: var(--date-picker-day-height);
1050
+ border-radius: var(--date-picker-day-border-radius);
1063
1051
  &:hover {
1064
1052
  background: var(--date-picker-day-hover-background) !important;
1065
1053
  }
1066
1054
  &--selected {
1067
- background: var(--date-picker-day-selected-background) !important;
1068
- color: var(--date-picker-day-selected-text-color) !important;
1069
1055
  font-weight: var(--date-picker-selected-weight) !important;
1056
+ color: var(--date-picker-day-selected-text-color) !important;
1057
+ background: var(--date-picker-day-selected-background) !important;
1070
1058
  &:hover {
1071
1059
  background: var(--date-picker-day-selected-background) !important;
1072
1060
  }
@@ -1074,19 +1062,13 @@
1074
1062
  }
1075
1063
  }
1076
1064
  }
1077
- &-time {
1078
- &__header {
1079
- font-size: var(--date-picker-name-size);
1080
- font-weight: var(--date-picker-name-weight);
1081
- }
1082
- }
1083
1065
  &__input {
1084
1066
  &-time-container {
1085
- margin: 0;
1067
+ text-align: center;
1086
1068
  padding: 4px;
1087
- float: none;
1069
+ margin: 0;
1088
1070
  border-top: var(--date-picker-border);
1089
- text-align: center;
1071
+ float: none;
1090
1072
  ^^&-time {
1091
1073
  &__caption {
1092
1074
  display: none;
@@ -1101,6 +1083,23 @@
1101
1083
  }
1102
1084
  }
1103
1085
  }
1086
+ &-wrapper {
1087
+ width: 100%;
1088
+ ^&__input-container {
1089
+ & .input {
1090
+ cursor: pointer;
1091
+ &.input_size_l {
1092
+ padding: var(--input-container-padding);
1093
+ }
1094
+ }
1095
+ }
1096
+ }
1097
+ &-time {
1098
+ &__header {
1099
+ font-size: var(--date-picker-name-size);
1100
+ font-weight: var(--date-picker-name-weight);
1101
+ }
1102
+ }
1104
1103
  }
1105
1104
  .datepicker {
1106
1105
  width: 100%;
@@ -1134,41 +1133,34 @@
1134
1133
  }
1135
1134
  }
1136
1135
  :root {
1136
+ --input-container-padding: 9px 15px;
1137
1137
  --date-picker-name-size: 18px;
1138
1138
  --date-picker-name-weight: 400;
1139
1139
  --date-picker-selected-weight: 400;
1140
1140
  --date-picker-input-border-radius: 6px;
1141
-
1142
1141
  --date-picker-background: var(--color-surface-primary);
1143
1142
  --date-picker-padding: 24px 12px;
1144
1143
  --date-picker-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
1145
1144
  --date-picker-border-radius: 12px;
1146
1145
  --date-picker-border: 1px solid var(--color-surface-tertiary);
1147
-
1148
1146
  --date-picker-day-width: 40px;
1149
1147
  --date-picker-day-height: 40px;
1150
1148
  --date-picker-day-padding: 8px 0;
1151
1149
  --date-picker-day-border-radius: 6px;
1152
-
1153
1150
  --date-picker-day-hover-background: var(--color-accent-tertiary);
1154
1151
  --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
1155
-
1156
1152
  --date-picker-day-range-background: var(--color-accent-tertiary);
1157
1153
  --date-picker-day-range-text-color: var(--color-accent-text-secondary);
1158
1154
  --date-picker-day-range-border-radius: 0;
1159
1155
  --date-picker-day-range-start-border-radius: 12px 0 0 12px;
1160
1156
  --date-picker-day-range-end-border-radius: 0 12px 12px 0;
1161
-
1162
1157
  --date-picker-day-today-background: var(--color-surface-secondary);
1163
1158
  --date-picker-day-today-text-color: var(--color-surface-text-primary);
1164
-
1165
1159
  --date-picker-day-weekend-background: var(--color-surface-primary);
1166
1160
  --date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);
1167
1161
  --date-picker-day-weekend-outside-text-color: var(--color-secondary-text-disabled);
1168
-
1169
1162
  --date-picker-day-selected-background: var(--color-accent-primary);
1170
1163
  --date-picker-day-selected-text-color: var(--color-accent-text-primary);
1171
-
1172
1164
  --date-picker-day-outside-background: var(--color-surface-primary);
1173
1165
  --date-picker-day-outside-text-color: var(--color-surface-text-quaternary);
1174
1166
  }
package/dist/css/styles/position/position.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .position {
2
2
  &_absolute {
3
- position: asoluite;
3
+ position: absolute;
4
4
  }
5
5
  &_relative {
6
6
  position: relative;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.0.58",
3
+ "version": "1.0.60",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",