@rolster/react-components 18.21.22 → 18.21.24

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 (7) hide show
  1. package/dist/cjs/assets/{index-CiASINsv.css → index-Buj4-HoB.css} +36 -27
  2. package/dist/es/assets/{index-CiASINsv.css → index-Buj4-HoB.css} +36 -27
  3. package/dist/esm/components/atoms/CheckBox/CheckBox.css +13 -11
  4. package/dist/esm/components/atoms/InputSearch/InputSearch.css +1 -1
  5. package/dist/esm/components/atoms/RadioButton/RadioButton.css +12 -9
  6. package/dist/esm/components/atoms/Switch/Switch.css +10 -6
  7. package/package.json +4 -4
package/dist/cjs/assets/{index-CiASINsv.css → index-Buj4-HoB.css} RENAMED
@@ -439,37 +439,39 @@
439
439
  }
440
440
 
441
441
  .rls-checkbox {
442
+ --pvt-component-border-color: var(--rls-app-color-500);
442
443
  --pvt-component-transform: scale(0);
443
444
  position: relative;
444
- float: left;
445
445
  display: flex;
446
- width: var(--rls-sizing-x12);
447
- height: var(--rls-sizing-x12);
446
+ width: var(--rlc-checkbox-dimension);
447
+ height: var(--rlc-checkbox-dimension);
448
+ justify-content: center;
449
+ align-items: center;
448
450
  box-sizing: border-box;
449
451
  outline: none;
450
- border-radius: var(--rls-sizing-x2);
451
- border: var(--rls-app-border-1-300);
452
+ border-radius: var(--rls-sizing-x3);
453
+ background: var(--rls-theme-color-050);
454
+ border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
452
455
  }
453
456
  .rls-checkbox:hover {
454
457
  cursor: pointer;
455
458
  }
456
459
  .rls-checkbox--checked {
460
+ --pvt-component-border-color: var(--rls-theme-color-500);
457
461
  --pvt-component-transform: scale(1);
458
- border: var(--rls-theme-border-1-500);
459
462
  }
460
463
  .rls-checkbox--disabled {
461
464
  opacity: 0.5;
462
465
  pointer-events: none;
463
466
  }
464
467
  .rls-checkbox__component {
468
+ width: var(--rlc-checkbox-children-dimension);
469
+ height: var(--rlc-checkbox-children-dimension);
465
470
  border-radius: var(--rls-sizing-x1);
466
- width: 7rem;
467
- height: 7rem;
468
- margin: auto;
469
- background: var(--rls-theme-gradient-500);
471
+ background: var(--rls-theme-color-500);
470
472
  transform: var(--pvt-component-transform);
471
473
  transform-origin: 50% 50%;
472
- /*transition: all 160ms 0ms var(--rls-standard-curve);*/
474
+ transition: all 160ms 0ms var(--rls-standard-curve);
473
475
  }
474
476
 
475
477
  .rls-input {
@@ -594,7 +596,7 @@
594
596
  align-items: center;
595
597
  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
596
598
  box-sizing: border-box;
597
- border: var(--rls-app-border-1-300);
599
+ background: var(--rls-app-color-100);
598
600
  border-radius: var(--rls-sizing-x4);
599
601
  }
600
602
 
@@ -773,36 +775,39 @@
773
775
  }
774
776
 
775
777
  .rls-radiobutton {
778
+ --pvt-component-border-color: var(--rls-app-color-500);
776
779
  --pvt-component-transform: scale(0);
777
780
  position: relative;
778
781
  display: flex;
782
+ width: var(--rlc-radiobutton-dimension);
783
+ height: var(--rlc-radiobutton-dimension);
784
+ justify-content: center;
785
+ align-items: center;
779
786
  outline: none;
780
- width: var(--rls-sizing-x12);
781
- height: var(--rls-sizing-x12);
782
787
  border-radius: 50%;
783
788
  box-sizing: border-box;
784
- border: var(--rls-app-border-1-300);
789
+ background: var(--rls-theme-color-050);
790
+ border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
785
791
  }
786
792
  .rls-radiobutton:hover {
787
793
  cursor: pointer;
788
794
  }
789
795
  .rls-radiobutton--checked {
796
+ --pvt-component-border-color: var(--rls-theme-color-500);
790
797
  --pvt-component-transform: scale(1);
791
- border: var(--rls-theme-border-1-500);
792
798
  }
793
799
  .rls-radiobutton--disabled {
794
800
  opacity: 0.5;
795
801
  pointer-events: none;
796
802
  }
797
803
  .rls-radiobutton__component {
804
+ width: var(--rlc-radiobutton-children-dimension);
805
+ height: var(--rlc-radiobutton-children-dimension);
798
806
  border-radius: 50%;
799
- width: 7rem;
800
- height: 7rem;
801
- margin: auto;
802
- background: var(--rls-theme-gradient-500);
807
+ background: var(--rls-theme-color-500);
803
808
  transform: var(--pvt-component-transform);
804
809
  transform-origin: 50% 50%;
805
- /*transition: all 160ms 0ms var(--rls-standard-curve);*/
810
+ transition: all 160ms 0ms var(--rls-standard-curve);
806
811
  }
807
812
 
808
813
  .rls-skeleton {
@@ -869,18 +874,22 @@
869
874
 
870
875
  .rls-switch {
871
876
  --pvt-element-left: var(--rls-sizing-x1);
877
+ --pvt-element-border-color: var(--rls-app-color-400);
872
878
  --pvt-element-background: var(--rls-app-color-050);
879
+ --pvt-element-item-background: transparent;
873
880
  --pvt-bar-background: var(--rls-app-color-200);
874
- max-width: var(--rls-sizing-x20);
881
+ max-width: var(--rlc-switch-max-width);
875
882
  }
876
883
  .rls-switch:hover {
877
884
  cursor: pointer;
878
885
  }
879
886
  .rls-switch--checked {
880
- --pvt-element-background: var(--rls-theme-gradient-500);
881
887
  --pvt-element-left: calc(
882
888
  100% - var(--rlc-switch-element-size) - var(--rls-sizing-x1)
883
889
  );
890
+ --pvt-element-border-color: var(--rls-theme-color-500);
891
+ --pvt-element-background: var(--rls-theme-color-050);
892
+ --pvt-element-item-background: var(--rls-theme-color-500);
884
893
  --pvt-bar-background: var(--rls-theme-color-300);
885
894
  }
886
895
  .rls-switch--disabled {
@@ -903,9 +912,9 @@
903
912
  padding: var(--rls-sizing-x2);
904
913
  box-sizing: border-box;
905
914
  border-radius: 50%;
906
- background: var(--rls-app-color-050);
907
- box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
908
- /*transition: left 240ms var(--rls-standard-curve);*/
915
+ background: var(--pvt-element-background);
916
+ border: var(--rls-sizing-x1) solid var(--pvt-element-border-color);
917
+ transition: left 240ms var(--rls-standard-curve);
909
918
  }
910
919
  .rls-switch__component__element::before {
911
920
  display: block;
@@ -913,7 +922,7 @@
913
922
  width: 100%;
914
923
  height: 100%;
915
924
  border-radius: 50%;
916
- background: var(--pvt-element-background);
925
+ background: var(--pvt-element-item-background);
917
926
  }
918
927
  .rls-switch__component__bar {
919
928
  background: var(--pvt-bar-background);
package/dist/es/assets/{index-CiASINsv.css → index-Buj4-HoB.css} RENAMED
@@ -439,37 +439,39 @@
439
439
  }
440
440
 
441
441
  .rls-checkbox {
442
+ --pvt-component-border-color: var(--rls-app-color-500);
442
443
  --pvt-component-transform: scale(0);
443
444
  position: relative;
444
- float: left;
445
445
  display: flex;
446
- width: var(--rls-sizing-x12);
447
- height: var(--rls-sizing-x12);
446
+ width: var(--rlc-checkbox-dimension);
447
+ height: var(--rlc-checkbox-dimension);
448
+ justify-content: center;
449
+ align-items: center;
448
450
  box-sizing: border-box;
449
451
  outline: none;
450
- border-radius: var(--rls-sizing-x2);
451
- border: var(--rls-app-border-1-300);
452
+ border-radius: var(--rls-sizing-x3);
453
+ background: var(--rls-theme-color-050);
454
+ border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
452
455
  }
453
456
  .rls-checkbox:hover {
454
457
  cursor: pointer;
455
458
  }
456
459
  .rls-checkbox--checked {
460
+ --pvt-component-border-color: var(--rls-theme-color-500);
457
461
  --pvt-component-transform: scale(1);
458
- border: var(--rls-theme-border-1-500);
459
462
  }
460
463
  .rls-checkbox--disabled {
461
464
  opacity: 0.5;
462
465
  pointer-events: none;
463
466
  }
464
467
  .rls-checkbox__component {
468
+ width: var(--rlc-checkbox-children-dimension);
469
+ height: var(--rlc-checkbox-children-dimension);
465
470
  border-radius: var(--rls-sizing-x1);
466
- width: 7rem;
467
- height: 7rem;
468
- margin: auto;
469
- background: var(--rls-theme-gradient-500);
471
+ background: var(--rls-theme-color-500);
470
472
  transform: var(--pvt-component-transform);
471
473
  transform-origin: 50% 50%;
472
- /*transition: all 160ms 0ms var(--rls-standard-curve);*/
474
+ transition: all 160ms 0ms var(--rls-standard-curve);
473
475
  }
474
476
 
475
477
  .rls-input {
@@ -594,7 +596,7 @@
594
596
  align-items: center;
595
597
  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
596
598
  box-sizing: border-box;
597
- border: var(--rls-app-border-1-300);
599
+ background: var(--rls-app-color-100);
598
600
  border-radius: var(--rls-sizing-x4);
599
601
  }
600
602
 
@@ -773,36 +775,39 @@
773
775
  }
774
776
 
775
777
  .rls-radiobutton {
778
+ --pvt-component-border-color: var(--rls-app-color-500);
776
779
  --pvt-component-transform: scale(0);
777
780
  position: relative;
778
781
  display: flex;
782
+ width: var(--rlc-radiobutton-dimension);
783
+ height: var(--rlc-radiobutton-dimension);
784
+ justify-content: center;
785
+ align-items: center;
779
786
  outline: none;
780
- width: var(--rls-sizing-x12);
781
- height: var(--rls-sizing-x12);
782
787
  border-radius: 50%;
783
788
  box-sizing: border-box;
784
- border: var(--rls-app-border-1-300);
789
+ background: var(--rls-theme-color-050);
790
+ border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
785
791
  }
786
792
  .rls-radiobutton:hover {
787
793
  cursor: pointer;
788
794
  }
789
795
  .rls-radiobutton--checked {
796
+ --pvt-component-border-color: var(--rls-theme-color-500);
790
797
  --pvt-component-transform: scale(1);
791
- border: var(--rls-theme-border-1-500);
792
798
  }
793
799
  .rls-radiobutton--disabled {
794
800
  opacity: 0.5;
795
801
  pointer-events: none;
796
802
  }
797
803
  .rls-radiobutton__component {
804
+ width: var(--rlc-radiobutton-children-dimension);
805
+ height: var(--rlc-radiobutton-children-dimension);
798
806
  border-radius: 50%;
799
- width: 7rem;
800
- height: 7rem;
801
- margin: auto;
802
- background: var(--rls-theme-gradient-500);
807
+ background: var(--rls-theme-color-500);
803
808
  transform: var(--pvt-component-transform);
804
809
  transform-origin: 50% 50%;
805
- /*transition: all 160ms 0ms var(--rls-standard-curve);*/
810
+ transition: all 160ms 0ms var(--rls-standard-curve);
806
811
  }
807
812
 
808
813
  .rls-skeleton {
@@ -869,18 +874,22 @@
869
874
 
870
875
  .rls-switch {
871
876
  --pvt-element-left: var(--rls-sizing-x1);
877
+ --pvt-element-border-color: var(--rls-app-color-400);
872
878
  --pvt-element-background: var(--rls-app-color-050);
879
+ --pvt-element-item-background: transparent;
873
880
  --pvt-bar-background: var(--rls-app-color-200);
874
- max-width: var(--rls-sizing-x20);
881
+ max-width: var(--rlc-switch-max-width);
875
882
  }
876
883
  .rls-switch:hover {
877
884
  cursor: pointer;
878
885
  }
879
886
  .rls-switch--checked {
880
- --pvt-element-background: var(--rls-theme-gradient-500);
881
887
  --pvt-element-left: calc(
882
888
  100% - var(--rlc-switch-element-size) - var(--rls-sizing-x1)
883
889
  );
890
+ --pvt-element-border-color: var(--rls-theme-color-500);
891
+ --pvt-element-background: var(--rls-theme-color-050);
892
+ --pvt-element-item-background: var(--rls-theme-color-500);
884
893
  --pvt-bar-background: var(--rls-theme-color-300);
885
894
  }
886
895
  .rls-switch--disabled {
@@ -903,9 +912,9 @@
903
912
  padding: var(--rls-sizing-x2);
904
913
  box-sizing: border-box;
905
914
  border-radius: 50%;
906
- background: var(--rls-app-color-050);
907
- box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
908
- /*transition: left 240ms var(--rls-standard-curve);*/
915
+ background: var(--pvt-element-background);
916
+ border: var(--rls-sizing-x1) solid var(--pvt-element-border-color);
917
+ transition: left 240ms var(--rls-standard-curve);
909
918
  }
910
919
  .rls-switch__component__element::before {
911
920
  display: block;
@@ -913,7 +922,7 @@
913
922
  width: 100%;
914
923
  height: 100%;
915
924
  border-radius: 50%;
916
- background: var(--pvt-element-background);
925
+ background: var(--pvt-element-item-background);
917
926
  }
918
927
  .rls-switch__component__bar {
919
928
  background: var(--pvt-bar-background);
package/dist/esm/components/atoms/CheckBox/CheckBox.css CHANGED
@@ -1,33 +1,35 @@
1
1
  .rls-checkbox {
2
+ --pvt-component-border-color: var(--rls-app-color-500);
2
3
  --pvt-component-transform: scale(0);
3
4
  position: relative;
4
- float: left;
5
5
  display: flex;
6
- width: var(--rls-sizing-x12);
7
- height: var(--rls-sizing-x12);
6
+ width: var(--rlc-checkbox-dimension);
7
+ height: var(--rlc-checkbox-dimension);
8
+ justify-content: center;
9
+ align-items: center;
8
10
  box-sizing: border-box;
9
11
  outline: none;
10
- border-radius: var(--rls-sizing-x2);
11
- border: var(--rls-app-border-1-300);
12
+ border-radius: var(--rls-sizing-x3);
13
+ background: var(--rls-theme-color-050);
14
+ border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
12
15
  }
13
16
  .rls-checkbox:hover {
14
17
  cursor: pointer;
15
18
  }
16
19
  .rls-checkbox--checked {
20
+ --pvt-component-border-color: var(--rls-theme-color-500);
17
21
  --pvt-component-transform: scale(1);
18
- border: var(--rls-theme-border-1-500);
19
22
  }
20
23
  .rls-checkbox--disabled {
21
24
  opacity: 0.5;
22
25
  pointer-events: none;
23
26
  }
24
27
  .rls-checkbox__component {
28
+ width: var(--rlc-checkbox-children-dimension);
29
+ height: var(--rlc-checkbox-children-dimension);
25
30
  border-radius: var(--rls-sizing-x1);
26
- width: 7rem;
27
- height: 7rem;
28
- margin: auto;
29
- background: var(--rls-theme-gradient-500);
31
+ background: var(--rls-theme-color-500);
30
32
  transform: var(--pvt-component-transform);
31
33
  transform-origin: 50% 50%;
32
- /*transition: all 160ms 0ms var(--rls-standard-curve);*/
34
+ transition: all 160ms 0ms var(--rls-standard-curve);
33
35
  }
package/dist/esm/components/atoms/InputSearch/InputSearch.css CHANGED
@@ -5,6 +5,6 @@
5
5
  align-items: center;
6
6
  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
7
7
  box-sizing: border-box;
8
- border: var(--rls-app-border-1-300);
8
+ background: var(--rls-app-color-100);
9
9
  border-radius: var(--rls-sizing-x4);
10
10
  }
package/dist/esm/components/atoms/RadioButton/RadioButton.css CHANGED
@@ -1,32 +1,35 @@
1
1
  .rls-radiobutton {
2
+ --pvt-component-border-color: var(--rls-app-color-500);
2
3
  --pvt-component-transform: scale(0);
3
4
  position: relative;
4
5
  display: flex;
6
+ width: var(--rlc-radiobutton-dimension);
7
+ height: var(--rlc-radiobutton-dimension);
8
+ justify-content: center;
9
+ align-items: center;
5
10
  outline: none;
6
- width: var(--rls-sizing-x12);
7
- height: var(--rls-sizing-x12);
8
11
  border-radius: 50%;
9
12
  box-sizing: border-box;
10
- border: var(--rls-app-border-1-300);
13
+ background: var(--rls-theme-color-050);
14
+ border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
11
15
  }
12
16
  .rls-radiobutton:hover {
13
17
  cursor: pointer;
14
18
  }
15
19
  .rls-radiobutton--checked {
20
+ --pvt-component-border-color: var(--rls-theme-color-500);
16
21
  --pvt-component-transform: scale(1);
17
- border: var(--rls-theme-border-1-500);
18
22
  }
19
23
  .rls-radiobutton--disabled {
20
24
  opacity: 0.5;
21
25
  pointer-events: none;
22
26
  }
23
27
  .rls-radiobutton__component {
28
+ width: var(--rlc-radiobutton-children-dimension);
29
+ height: var(--rlc-radiobutton-children-dimension);
24
30
  border-radius: 50%;
25
- width: 7rem;
26
- height: 7rem;
27
- margin: auto;
28
- background: var(--rls-theme-gradient-500);
31
+ background: var(--rls-theme-color-500);
29
32
  transform: var(--pvt-component-transform);
30
33
  transform-origin: 50% 50%;
31
- /*transition: all 160ms 0ms var(--rls-standard-curve);*/
34
+ transition: all 160ms 0ms var(--rls-standard-curve);
32
35
  }
package/dist/esm/components/atoms/Switch/Switch.css CHANGED
@@ -1,17 +1,21 @@
1
1
  .rls-switch {
2
2
  --pvt-element-left: var(--rls-sizing-x1);
3
+ --pvt-element-border-color: var(--rls-app-color-400);
3
4
  --pvt-element-background: var(--rls-app-color-050);
5
+ --pvt-element-item-background: transparent;
4
6
  --pvt-bar-background: var(--rls-app-color-200);
5
- max-width: var(--rls-sizing-x20);
7
+ max-width: var(--rlc-switch-max-width);
6
8
  }
7
9
  .rls-switch:hover {
8
10
  cursor: pointer;
9
11
  }
10
12
  .rls-switch--checked {
11
- --pvt-element-background: var(--rls-theme-gradient-500);
12
13
  --pvt-element-left: calc(
13
14
  100% - var(--rlc-switch-element-size) - var(--rls-sizing-x1)
14
15
  );
16
+ --pvt-element-border-color: var(--rls-theme-color-500);
17
+ --pvt-element-background: var(--rls-theme-color-050);
18
+ --pvt-element-item-background: var(--rls-theme-color-500);
15
19
  --pvt-bar-background: var(--rls-theme-color-300);
16
20
  }
17
21
  .rls-switch--disabled {
@@ -34,9 +38,9 @@
34
38
  padding: var(--rls-sizing-x2);
35
39
  box-sizing: border-box;
36
40
  border-radius: 50%;
37
- background: var(--rls-app-color-050);
38
- box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
39
- /*transition: left 240ms var(--rls-standard-curve);*/
41
+ background: var(--pvt-element-background);
42
+ border: var(--rls-sizing-x1) solid var(--pvt-element-border-color);
43
+ transition: left 240ms var(--rls-standard-curve);
40
44
  }
41
45
  .rls-switch__component__element::before {
42
46
  display: block;
@@ -44,7 +48,7 @@
44
48
  width: 100%;
45
49
  height: 100%;
46
50
  border-radius: 50%;
47
- background: var(--pvt-element-background);
51
+ background: var(--pvt-element-item-background);
48
52
  }
49
53
  .rls-switch__component__bar {
50
54
  background: var(--pvt-bar-background);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/react-components",
3
- "version": "18.21.22",
3
+ "version": "18.21.24",
4
4
  "type": "module",
5
5
  "description": "Package containing UI components for React Project.",
6
6
  "module": "dist/esm/index.js",
@@ -30,7 +30,7 @@
30
30
  "prepublishOnly": "npm run build"
31
31
  },
32
32
  "dependencies": {
33
- "@rolster/commons": "^2.3.4",
33
+ "@rolster/commons": "^2.3.16",
34
34
  "@rolster/components": "^0.5.3",
35
35
  "@rolster/dates": "^2.1.0",
36
36
  "@rolster/forms": "^2.10.0",
@@ -49,7 +49,7 @@
49
49
  "@rollup/plugin-node-resolve": "^15.2.1",
50
50
  "@rollup/plugin-typescript": "^11.1.3",
51
51
  "@rolster/rollup": "^1.0.6",
52
- "@rolster/styles-foundations": "^2.4.16",
52
+ "@rolster/styles-foundations": "^2.4.18",
53
53
  "@rolster/types": "^1.1.0",
54
54
  "@types/node-sass": "^4.11.4",
55
55
  "@types/react": "^18.0.28",
@@ -71,7 +71,7 @@
71
71
  "sass": "^1.62.1",
72
72
  "sort-by": "^0.0.2",
73
73
  "typescript": "^5.7.2",
74
- "vite": "^6.2.6"
74
+ "vite": "^6.2.7"
75
75
  },
76
76
  "repository": {
77
77
  "type": "git",