@itcase/ui 1.0.16 → 1.0.18

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 (21) hide show
  1. package/dist/components/Avatar.js +9 -4
  2. package/dist/components/Button.js +20 -19
  3. package/dist/components/Code.js +150 -0
  4. package/dist/components/DatePicker.js +32 -28
  5. package/dist/components/Dropdown.js +14 -12
  6. package/dist/components/FormField.js +4 -1
  7. package/dist/components/Group.js +5 -1
  8. package/dist/components/Icon.js +2 -0
  9. package/dist/components/Input.js +4 -0
  10. package/dist/components/Select.js +160 -88
  11. package/dist/components/Tab.js +19 -10
  12. package/dist/css/components/Code/Code.css +55 -0
  13. package/dist/css/components/DatePicker/DatePicker.css +164 -99
  14. package/dist/css/components/Notification/Notification.css +1 -2
  15. package/dist/css/components/Select/Select.css +12 -0
  16. package/dist/css/components/Select/css/__multi-value/select__multi-value.css +6 -0
  17. package/dist/css/components/Select/css/__value-container/select__value-container.css +4 -0
  18. package/dist/css/components/Switch/Switch.css +15 -8
  19. package/dist/css/components/Tab/Tab.css +18 -1
  20. package/dist/css/components/Textarea/Textarea.css +1 -7
  21. package/package.json +1 -1
package/dist/css/components/DatePicker/DatePicker.css CHANGED
@@ -721,109 +721,155 @@
721
721
  vertical-align: -0.125em;
722
722
  }
723
723
  .react-datepicker {
724
- background: var(--date-picker-container-background);
725
- border-radius: var(--date-picker-month-border-radius);
726
- border: none;
727
- box-shadow: var(--date-picker-container-box-shadow);
728
- &-popper {
729
- z-index: 1000 !important;
730
- }
724
+ background: var(--date-picker-background);
725
+ border-radius: var(--date-picker-border-radius);
726
+ border: var(--date-picker-border);
727
+ box-shadow: var(--date-picker-box-shadow);
728
+ font-size: inherit;
731
729
  &__triangle {
732
730
  display: none;
733
731
  }
734
- &__header {
735
- padding: 0;
736
- background-color: var(--date-picker-container-background);
737
- border-bottom: none;
738
- display: flex;
739
- flex-direction: column;
740
- gap: 24px;
741
- &--div {
742
- display: flex;
743
- justify-content: space-between;
744
- }
745
- &--time {
746
- padding: 0;
732
+ &-wrapper {
733
+ width: 100%;
734
+ ^&-popper {
735
+ z-index: 1000 !important;
747
736
  }
748
737
  }
749
738
  &__month {
750
739
  margin: 0;
751
- background-color: var(--date-picker-container-background);
752
740
  &-container {
753
741
  margin: 0;
754
- padding: var(--date-picker-container-padding);
755
- }
756
- }
757
- &__data {
758
- display: flex;
759
- align-items: center;
760
- gap: 12px;
761
- }
762
- &__month {
763
- &:first-letter {
764
- text-transform: uppercase;
765
- }
766
- }
767
- &__day {
768
- margin: 0;
769
- min-width: var(--date-picker-day-width);
770
- max-height: var(--date-picker-day-height);
771
- border-radius: var(--date-picker-day-border-radius);
772
- & .button__wrapper {
773
- padding: 0;
774
- }
775
- &:has(button) {
776
- padding: var(--date-picker-day-padding);
777
- }
778
- &:hover {
779
- background: var(--date-picker-day-background-hover);
780
- color: var(--date-picker-day-color-hover);
781
- }
782
- &-names {
783
- margin: 0;
784
- }
785
- &-name {
786
- margin: 0;
787
- padding: var(--date-picker-day-padding);
788
- min-width: var(--date-picker-day-width);
789
- max-height: var(--date-picker-day-height);
790
- color: var(--date-picker-name-color);
791
- font-size: var(--date-picker-name-size);
792
- }
793
- &--selected {
794
- background: var(--date-picker-selected-background);
795
- ^^^& .button__label {
796
- color: var(--date-picker-selected-color);
797
- }
798
- }
799
- &--selected:hover,
800
- &--in-range:hover {
801
- background: var(--date-picker-selected-background-hover);
802
- }
803
- &--outside-month {
804
- ^^^& .button__label {
805
- color: var(--date-picker-outside-color);
806
- }
807
- }
808
- &--weekend {
809
- ^^^& .button__label {
810
- color: var(--date-picker-weekend-color);
811
- }
812
- }
813
- &--outside-month&--weekend {
814
- ^^^& .button__label {
815
- color: var(--date-picker-outside-weekend-color);
816
- }
817
- }
818
- &--in-range {
819
- background: var(--date-picker-selected-background);
820
- ^^^& .button__label {
821
- color: var(--date-picker-selected-color);
742
+ padding: var(--date-picker-padding);
743
+ ^^&__header {
744
+ padding: 0;
745
+ border-bottom: none;
746
+ border-radius: 0;
747
+ display: flex;
748
+ flex-direction: column;
749
+ gap: 24px;
750
+ background-color: transparent;
751
+ &--div {
752
+ display: flex;
753
+ justify-content: space-between;
754
+ align-items: center;
755
+ ^^^^&__data {
756
+ flex: 1;
757
+ justify-content: center;
758
+ display: flex;
759
+ align-items: center;
760
+ gap: 12px;
761
+ ^^^^^&__month {
762
+ &:first-letter {
763
+ text-transform: uppercase;
764
+ }
765
+ }
766
+ }
767
+ }
768
+ &--time {
769
+ padding: 0;
770
+ }
771
+ ^^^&__day {
772
+ &-names {
773
+ margin: 0;
774
+ display: flex;
775
+ }
776
+ &-name {
777
+ display: flex;
778
+ width: var(--date-picker-day-width);
779
+ height: var(--date-picker-day-height);
780
+ margin: 0;
781
+ justify-content: center;
782
+ align-items: center;
783
+ line-height: normal;
784
+ }
785
+ }
822
786
  }
823
- }
824
- &--in-range&--weekend {
825
- ^^^& .button__label {
826
- color: var(--date-picker-weekend-color);
787
+ ^^&__month {
788
+ ^^^&__week {
789
+ display: flex;
790
+ ^^^^&__day {
791
+ width: var(--date-picker-day-width);
792
+ height: var(--date-picker-day-height);
793
+ margin: 0;
794
+ border-radius: var(--date-picker-day-border-radius);
795
+ &:hover {
796
+ background: var(--date-picker-day-hover-background);
797
+ color: var(--date-picker-day-hover-text-color);
798
+ }
799
+ &--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range) {
800
+ background: var(--date-picker-day-selected-background);
801
+ & .button__label {
802
+ color: var(--date-picker-day-selected-text-color);
803
+ }
804
+ }
805
+ &--in-range {
806
+ border-radius: 0;
807
+ background: var(--date-picker-day-selected-background);
808
+ & .button__label {
809
+ color: var(--date-picker-day-selected-text-color);
810
+ }
811
+ &:hover {
812
+ background: var(--date-picker-day-selected-background) !important;
813
+ & .button__label {
814
+ color: var(--date-picker-day-selected-text-color) !important;
815
+ }
816
+ }
817
+ }
818
+ &--in-selecting-range,
819
+ &--selecting-range,
820
+ &--range {
821
+ background-color: var(--date-picker-day-range-background) !important;
822
+ border-radius: var(--date-picker-day-range-border-radius) !important;
823
+ & .button__label {
824
+ color: var(--date-picker-day-range-text-color) !important;
825
+ }
826
+ &-start {
827
+ border-radius: var(--date-picker-day-range-start-border-radius) !important;
828
+ &:hover {
829
+ border-radius: var(--date-picker-day-range-start-border-radius) !important;
830
+ }
831
+ }
832
+ &-end {
833
+ border-radius: var(--date-picker-day-range-end-border-radius) !important;
834
+ &:hover {
835
+ border-radius: var(--date-picker-day-range-end-border-radius) !important;
836
+ }
837
+ }
838
+ }
839
+ &--today {
840
+ background: var(--date-picker-day-today-background);
841
+ & .button__label {
842
+ color: var(--date-picker-day-today-text-color);
843
+ }
844
+ }
845
+ &--today.react-datepicker__day--selecting-range-start.react-datepicker__day--selecting-range-end {
846
+ border-radius: var(--date-picker-day-border-radius) !important;
847
+ background: var(--date-picker-day-today-background);
848
+ & .button__label {
849
+ color: var(--date-picker-day-today-text-color);
850
+ }
851
+ }
852
+ &--keyboard-selected {
853
+ background: transparent;
854
+ }
855
+ &--selected {
856
+ background: var(--date-picker-day-selected-background);
857
+ & .button__label {
858
+ color: var(--date-picker-day-selected-text-color);
859
+ }
860
+ }
861
+ &--outside-month {
862
+ background: var(--date-picker-day-outside-background) !important;
863
+ & .button__label {
864
+ color: var(--date-picker-day-outside-text-color) !important;
865
+ }
866
+ }
867
+ &-button {
868
+ width: 100%;
869
+ height: 100%;
870
+ }
871
+ }
872
+ }
827
873
  }
828
874
  }
829
875
  }
@@ -842,13 +888,16 @@
842
888
  height: 300px !important;
843
889
  &-item {
844
890
  border-radius: var(--date-picker-day-border-radius);
845
- font-size: 18px;
891
+ font-size: var(--date-picker-name-size);
892
+ line-height: 30px;
846
893
  max-height: var(--date-picker-height);
847
894
  &:hover {
848
895
  background: var(--date-picker-day-background-hover) !important;
849
896
  }
850
897
  &--selected {
851
898
  background: var(--date-picker-selected-background) !important;
899
+ color: var(--date-picker-selected-color) !important;
900
+ font-weight: var(--date-picker-selected-weight) !important;
852
901
  }
853
902
  &--selected:hover {
854
903
  background: var(--date-picker-selected-background-hover) !important;
@@ -891,11 +940,26 @@
891
940
  border-radius: var(--date-picker-day-border-radius);
892
941
  }
893
942
  }
894
- .datepicker {
895
- &&_type_multiple-months {
896
- & .react-datepicker {
897
- &__month-container {
898
- border: solid 2px red;
943
+ .datepicker_type_multiple-months {
944
+ & .react-datepicker {
945
+ &__month-container {
946
+ &:nth-last-child(2) {
947
+ & .react-datepicker__header--div {
948
+ & .react-datepicker__icon {
949
+ &:last-child {
950
+ display: none;
951
+ }
952
+ }
953
+ }
954
+ }
955
+ &:last-child {
956
+ & .react-datepicker__header--div {
957
+ & .react-datepicker__icon {
958
+ &:first-child {
959
+ display: none;
960
+ }
961
+ }
962
+ }
899
963
  }
900
964
  }
901
965
  }
@@ -917,6 +981,7 @@
917
981
  --date-picker-name-size: 18px;
918
982
  --date-picker-name-weight: 400;
919
983
  --date-picker-selected-color: var(--color-accent-text-primary);
984
+ --date-picker-selected-weight: 400;
920
985
  --date-picker-selected-background: var(--color-accent-primary);
921
986
  --date-picker-selected-background-hover: var(--color-accent-primary-hover);
922
987
  --date-picker-outside-color: var(--color-surface-text-quaternary);
package/dist/css/components/Notification/Notification.css CHANGED
@@ -2,9 +2,8 @@
2
2
  }
3
3
  .notification {
4
4
  &&_type_global {
5
- width: 100%;
6
5
  position: fixed;
7
- left: 0;
6
+ right: 0;
8
7
  top: 0;
9
8
  padding: 0;
10
9
  background: none;
package/dist/css/components/Select/Select.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .select {
2
+ width: 100%;
2
3
  position: relative;
3
4
  min-width: 240px;
4
5
  }
@@ -185,6 +186,13 @@
185
186
  }
186
187
  }
187
188
 
189
+ .select__multi-value {
190
+ &-wrapper {
191
+ padding: 4px 6px;
192
+ border-radius: 6px;
193
+ }
194
+ }
195
+
188
196
  .select {
189
197
  &__option {
190
198
  display: flex;
@@ -257,6 +265,10 @@
257
265
  flex-wrap: wrap;
258
266
  align-items: center;
259
267
  &--is-multi {
268
+ gap: 8px;
269
+ & .select__input-container {
270
+ display: none;
271
+ }
260
272
  }
261
273
  }
262
274
  }
package/dist/css/components/Select/css/__multi-value/select__multi-value.css ADDED
@@ -0,0 +1,6 @@
1
+ .select__multi-value {
2
+ &-wrapper {
3
+ padding: 4px 6px;
4
+ border-radius: 6px;
5
+ }
6
+ }
package/dist/css/components/Select/css/__value-container/select__value-container.css CHANGED
@@ -7,6 +7,10 @@
7
7
  flex-wrap: wrap;
8
8
  align-items: center;
9
9
  &--is-multi {
10
+ gap: 8px;
11
+ & .select__input-container {
12
+ display: none;
13
+ }
10
14
  }
11
15
  }
12
16
  }
package/dist/css/components/Switch/Switch.css CHANGED
@@ -55,14 +55,21 @@
55
55
  }
56
56
  }
57
57
  .switch {
58
- &_size {
59
- &_normal {
60
- min-width: 52px;
61
- min-height: 32px;
62
- }
63
- &_compact {
64
- min-width: 40px;
65
- min-height: 24px;
58
+ &&_size {
59
+ @each $size in normal, compact {
60
+ &_$(size) {
61
+ min-width: var(--switch-size-$(size)-width);
62
+ min-height: var(--switch-size-$(size)-height);
63
+ max-width: var(--switch-size-$(size)-width);
64
+ max-height: var(--switch-size-$(size)-height);
65
+ }
66
66
  }
67
67
  }
68
68
  }
69
+ :root {
70
+ --switch-size-normal-width: 52px;
71
+ --switch-size-normal-height: 32px;
72
+
73
+ --switch-size-compact-width: 40px;
74
+ --switch-size-compact-height: 24px;
75
+ }
package/dist/css/components/Tab/Tab.css CHANGED
@@ -28,7 +28,7 @@
28
28
  &_size {
29
29
  @each $size in normal, compact {
30
30
  &_$(size) {
31
- ^^&__label {
31
+ ^^&__wrapper {
32
32
  padding: var(--tab-size-$(size)-padding);
33
33
  gap: var(--tab-size-$(size)-gap);
34
34
  }
@@ -38,6 +38,23 @@
38
38
  }
39
39
  .tab-group {
40
40
  position: relative;
41
+ display: flex;
42
+ align-items: stretch;
43
+ & .tab {
44
+ display: flex;
45
+ flex-flow: column nowrap;
46
+ justify-content: flex-end;
47
+ &__wrapper {
48
+ display: flex;
49
+ justify-content: center;
50
+ align-items: center;
51
+ gap: 4px;
52
+ }
53
+ &__label {
54
+ flex: 1;
55
+ display: flex;
56
+ }
57
+ }
41
58
  }
42
59
  :root {
43
60
  --tab-size-normal-padding: 10px;
package/dist/css/components/Textarea/Textarea.css CHANGED
@@ -14,9 +14,6 @@
14
14
  &:read-only {
15
15
  color: var(--color-surface-text-tertiary);
16
16
  }
17
- &:focus {
18
- background: var(--color-surface-primary-hover);
19
- }
20
17
  }
21
18
  .textarea {
22
19
  &_shape {
@@ -30,10 +27,7 @@
30
27
  &&_size {
31
28
  @each $sizeValue in xs, s, m, l, xl, xxl {
32
29
  &_$(sizeValue) {
33
- padding-top: var(--textarea-size-$(sizeValue)-padding-top);
34
- padding-right: var(--textarea-size-$(sizeValue)-padding-right);
35
- padding-bottom: var(--textarea-size-$(sizeValue)-padding-bottom);
36
- padding-left: var(--textarea-size-$(sizeValue)-padding-left);
30
+ padding: var(--textarea-size-$(sizeValue)-padding);
37
31
  }
38
32
  }
39
33
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.0.16",
3
+ "version": "1.0.18",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",