@rolster/react-components 18.12.10 → 18.13.1

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 (136) hide show
  1. package/dist/cjs/assets/{index-VcI5p9dK.css → index-fykwrWLx.css} +700 -652
  2. package/dist/cjs/index.js +745 -779
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/es/assets/{index-VcI5p9dK.css → index-fykwrWLx.css} +700 -652
  5. package/dist/es/index.js +747 -781
  6. package/dist/es/index.js.map +1 -1
  7. package/dist/esm/components/atoms/Amount/Amount.css +3 -3
  8. package/dist/esm/components/atoms/Avatar/Avatar.css +7 -7
  9. package/dist/esm/components/atoms/Badge/Badge.css +7 -7
  10. package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css +12 -12
  11. package/dist/esm/components/atoms/Button/Button.css +74 -53
  12. package/dist/esm/components/atoms/Button/Button.d.ts +1 -1
  13. package/dist/esm/components/atoms/Button/Button.js +1 -1
  14. package/dist/esm/components/atoms/Button/Button.js.map +1 -1
  15. package/dist/esm/components/atoms/ButtonAction/ButtonAction.css +22 -22
  16. package/dist/esm/components/atoms/CheckBox/CheckBox.css +8 -8
  17. package/dist/esm/components/atoms/Icon/Icon.css +7 -8
  18. package/dist/esm/components/atoms/Input/Input.css +13 -13
  19. package/dist/esm/components/atoms/InputMoney/InputMoney.css +1 -1
  20. package/dist/esm/components/atoms/InputNumber/InputNumber.css +1 -1
  21. package/dist/esm/components/atoms/InputPassword/InputPassword.css +8 -8
  22. package/dist/esm/components/atoms/InputText/InputText.css +1 -1
  23. package/dist/esm/components/atoms/Label/Label.css +1 -1
  24. package/dist/esm/components/atoms/MessageIcon/MessageIcon.css +6 -6
  25. package/dist/esm/components/atoms/Poster/Poster.css +6 -6
  26. package/dist/esm/components/atoms/ProgressBar/ProgressBar.css +7 -7
  27. package/dist/esm/components/atoms/ProgressCircular/ProgressCircular.css +5 -5
  28. package/dist/esm/components/atoms/RadioButton/RadioButton.css +6 -6
  29. package/dist/esm/components/atoms/SearchInput/SearchInput.css +4 -4
  30. package/dist/esm/components/atoms/Skeleton/Skeleton.css +6 -6
  31. package/dist/esm/components/atoms/SkeletonText/SkeletonText.css +6 -8
  32. package/dist/esm/components/atoms/Switch/Switch.css +16 -16
  33. package/dist/esm/components/atoms/TabularText/TabularText.css +2 -2
  34. package/dist/esm/components/definitions.d.ts +1 -1
  35. package/dist/esm/components/molecules/Ballot/Ballot.css +27 -34
  36. package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.css +1 -1
  37. package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +32 -30
  38. package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.css +8 -8
  39. package/dist/esm/components/molecules/DayPicker/DayPicker.css +39 -27
  40. package/dist/esm/components/molecules/DayPicker/DayPicker.d.ts +3 -1
  41. package/dist/esm/components/molecules/DayPicker/DayPicker.js +32 -24
  42. package/dist/esm/components/molecules/DayPicker/DayPicker.js.map +1 -1
  43. package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.css +28 -28
  44. package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.js +16 -19
  45. package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.js.map +1 -1
  46. package/dist/esm/components/molecules/MoneyField/MoneyField.css +1 -2
  47. package/dist/esm/components/molecules/MonthPicker/MonthPicker.css +34 -19
  48. package/dist/esm/components/molecules/MonthPicker/MonthPicker.d.ts +2 -1
  49. package/dist/esm/components/molecules/MonthPicker/MonthPicker.js +30 -19
  50. package/dist/esm/components/molecules/MonthPicker/MonthPicker.js.map +1 -1
  51. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.css +6 -6
  52. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.d.ts +1 -1
  53. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.js +26 -21
  54. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.js.map +1 -1
  55. package/dist/esm/components/molecules/NumberField/NumberField.css +1 -2
  56. package/dist/esm/components/molecules/Pagination/Pagination.css +29 -30
  57. package/dist/esm/components/molecules/PasswordField/PasswordField.css +4 -5
  58. package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.css +8 -10
  59. package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.css +8 -9
  60. package/dist/esm/components/molecules/TextField/TextField.css +1 -2
  61. package/dist/esm/components/molecules/Toolbar/Toolbar.css +10 -10
  62. package/dist/esm/components/molecules/YearPicker/YearPicker.css +42 -28
  63. package/dist/esm/components/molecules/YearPicker/YearPicker.d.ts +1 -1
  64. package/dist/esm/components/molecules/YearPicker/YearPicker.js +33 -26
  65. package/dist/esm/components/molecules/YearPicker/YearPicker.js.map +1 -1
  66. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.css +22 -22
  67. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.d.ts +1 -1
  68. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.js +1 -1
  69. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.js.map +1 -1
  70. package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.d.ts +1 -1
  71. package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.js +27 -81
  72. package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.js.map +1 -1
  73. package/dist/esm/components/organisms/Card/Card.css +5 -5
  74. package/dist/esm/components/organisms/Confirmation/Confirmation.css +38 -38
  75. package/dist/esm/components/organisms/DateField/DateField.css +15 -15
  76. package/dist/esm/components/organisms/DateField/DateField.d.ts +2 -2
  77. package/dist/esm/components/organisms/DateField/DateField.js +27 -16
  78. package/dist/esm/components/organisms/DateField/DateField.js.map +1 -1
  79. package/dist/esm/components/organisms/DatePicker/DatePicker.css +27 -24
  80. package/dist/esm/components/organisms/DatePicker/DatePicker.d.ts +2 -2
  81. package/dist/esm/components/organisms/DatePicker/DatePicker.js +37 -55
  82. package/dist/esm/components/organisms/DatePicker/DatePicker.js.map +1 -1
  83. package/dist/esm/components/organisms/DateRangeField/DateRangeField.css +13 -15
  84. package/dist/esm/components/organisms/DateRangeField/DateRangeField.js +5 -5
  85. package/dist/esm/components/organisms/DateRangeField/DateRangeField.js.map +1 -1
  86. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.css +20 -20
  87. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.d.ts +2 -2
  88. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.js +13 -33
  89. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.js.map +1 -1
  90. package/dist/esm/components/organisms/FormNavigation/FormNavigation.css +15 -14
  91. package/dist/esm/components/organisms/Modal/Modal.css +11 -11
  92. package/dist/esm/components/organisms/SelectField/SelectField.css +1 -1
  93. package/dist/esm/components/organisms/SelectField/SelectField.d.ts +1 -1
  94. package/dist/esm/components/organisms/SelectField/SelectField.js +1 -1
  95. package/dist/esm/components/organisms/SelectField/SelectField.js.map +1 -1
  96. package/dist/esm/components/organisms/SelectField/SelectFieldHook.d.ts +1 -1
  97. package/dist/esm/components/organisms/SelectField/SelectFieldHook.js +18 -35
  98. package/dist/esm/components/organisms/SelectField/SelectFieldHook.js.map +1 -1
  99. package/dist/esm/components/organisms/Snackbar/Snackbar.css +26 -26
  100. package/dist/esm/constants/index.d.ts +1 -0
  101. package/dist/esm/constants/index.js +2 -0
  102. package/dist/esm/constants/index.js.map +1 -0
  103. package/dist/esm/constants/picker.constant.d.ts +1 -0
  104. package/dist/esm/constants/picker.constant.js +2 -0
  105. package/dist/esm/constants/picker.constant.js.map +1 -0
  106. package/dist/esm/helpers/date-range-picker.d.ts +1 -12
  107. package/dist/esm/helpers/date-range-picker.js +5 -107
  108. package/dist/esm/helpers/date-range-picker.js.map +1 -1
  109. package/dist/esm/helpers/index.d.ts +2 -0
  110. package/dist/esm/helpers/index.js +3 -0
  111. package/dist/esm/helpers/index.js.map +1 -0
  112. package/dist/esm/hooks/ListControlHook.d.ts +2 -3
  113. package/dist/esm/hooks/ListControlHook.js +22 -92
  114. package/dist/esm/hooks/ListControlHook.js.map +1 -1
  115. package/dist/esm/index.d.ts +1 -2
  116. package/dist/esm/index.js +1 -2
  117. package/dist/esm/index.js.map +1 -1
  118. package/package.json +6 -5
  119. package/dist/esm/helpers/date-picker.d.ts +0 -1
  120. package/dist/esm/helpers/date-picker.js +0 -9
  121. package/dist/esm/helpers/date-picker.js.map +0 -1
  122. package/dist/esm/helpers/day-picker.d.ts +0 -9
  123. package/dist/esm/helpers/day-picker.js +0 -86
  124. package/dist/esm/helpers/day-picker.js.map +0 -1
  125. package/dist/esm/helpers/month-picker.d.ts +0 -14
  126. package/dist/esm/helpers/month-picker.js +0 -78
  127. package/dist/esm/helpers/month-picker.js.map +0 -1
  128. package/dist/esm/helpers/year-picker.d.ts +0 -17
  129. package/dist/esm/helpers/year-picker.js +0 -83
  130. package/dist/esm/helpers/year-picker.js.map +0 -1
  131. package/dist/esm/models.d.ts +0 -58
  132. package/dist/esm/models.js +0 -9
  133. package/dist/esm/models.js.map +0 -1
  134. package/dist/esm/types.d.ts +0 -12
  135. package/dist/esm/types.js +0 -7
  136. package/dist/esm/types.js.map +0 -1
@@ -2,11 +2,11 @@
2
2
  position: relative;
3
3
  float: left;
4
4
  width: auto;
5
- height: var(--rls-poster-height);
6
- line-height: var(--rls-poster-height);
7
- padding: var(--rls-poster-padding);
5
+ height: var(--rlc-poster-height);
6
+ line-height: var(--rlc-poster-height);
7
+ padding: var(--rlc-poster-padding);
8
8
  box-sizing: border-box;
9
- border-radius: var(--sizing-x2);
10
- color: var(--color-light-500);
11
- background: var(--gradient-rolster-500);
9
+ border-radius: var(--rls-sizing-x2);
10
+ color: var(--rls-light-color-500);
11
+ background: var(--rls-theme-gradient-500);
12
12
  }
@@ -3,9 +3,9 @@
3
3
  position: relative;
4
4
  float: left;
5
5
  width: 100%;
6
- height: var(--sizing-x2);
6
+ height: var(--rls-sizing-x2);
7
7
  overflow: hidden;
8
- background: var(--color-rolster-100);
8
+ background: var(--rls-theme-color-100);
9
9
  }
10
10
  .rls-progress-bar--indeterminate {
11
11
  --pvt-component-display: none;
@@ -16,8 +16,8 @@
16
16
  content: '';
17
17
  top: 0rem;
18
18
  width: 0%;
19
- height: var(--sizing-x2);
20
- background: var(--gradient-rolster-500);
19
+ height: var(--rls-sizing-x2);
20
+ background: var(--rls-theme-gradient-500);
21
21
  }
22
22
  .rls-progress-bar--indeterminate::after {
23
23
  animation: progress-bar-indeterminate-after 2000ms infinite;
@@ -29,10 +29,10 @@
29
29
  position: absolute;
30
30
  top: 0rem;
31
31
  width: 0%;
32
- height: var(--sizing-x4);
32
+ height: var(--rls-sizing-x4);
33
33
  display: var(--pvt-component-display);
34
- background: var(--gradient-rolster-500);
35
- transition: width 320ms 0ms var(--standard-curve);
34
+ background: var(--rls-theme-gradient-500);
35
+ transition: width 320ms 0ms var(--rls-standard-curve);
36
36
  }
37
37
 
38
38
  @keyframes progress-bar-indeterminate-before {
@@ -1,10 +1,10 @@
1
1
  .rls-progress-circular {
2
2
  position: relative;
3
- width: var(--rls-progress-circular-dimension);
4
- height: var(--rls-progress-circular-dimension);
5
- padding: var(--sizing-x2);
3
+ width: var(--rlc-progress-circular-dimension);
4
+ height: var(--rlc-progress-circular-dimension);
5
+ padding: var(--rls-sizing-x2);
6
6
  box-sizing: border-box;
7
- stroke: var(--color-rolster-500);
7
+ stroke: var(--rls-theme-color-500);
8
8
  }
9
9
  .rls-progress-circular__svg {
10
10
  height: 100%;
@@ -19,7 +19,7 @@
19
19
  stroke-dasharray: 65;
20
20
  stroke-dashoffset: 65;
21
21
  opacity: 1;
22
- animation: progress-circular-circle 1750ms var(--standard-curve) infinite;
22
+ animation: progress-circular-circle 1750ms var(--rls-standard-curve) infinite;
23
23
  }
24
24
 
25
25
  @keyframes progress-circular-svg {
@@ -4,18 +4,18 @@
4
4
  float: left;
5
5
  display: flex;
6
6
  outline: none;
7
- width: var(--sizing-x12);
8
- height: var(--sizing-x12);
7
+ width: var(--rls-sizing-x12);
8
+ height: var(--rls-sizing-x12);
9
9
  border-radius: 50%;
10
10
  box-sizing: border-box;
11
- border: var(--border-1-theme-300);
11
+ border: var(--rls-app-border-1-300);
12
12
  }
13
13
  .rls-radiobutton:hover {
14
14
  cursor: pointer;
15
15
  }
16
16
  .rls-radiobutton--checked {
17
17
  --pvt-component-transform: scale(1);
18
- border: var(--border-1-rolster-500);
18
+ border: var(--rls-theme-border-1-500);
19
19
  }
20
20
  .rls-radiobutton--disabled {
21
21
  opacity: 0.5;
@@ -26,8 +26,8 @@
26
26
  width: 7rem;
27
27
  height: 7rem;
28
28
  margin: auto;
29
- background: var(--gradient-rolster-500);
29
+ background: var(--rls-theme-gradient-500);
30
30
  transform: var(--pvt-component-transform);
31
31
  transform-origin: 50% 50%;
32
- transition: all 160ms 0ms var(--standard-curve);
32
+ transition: all 160ms 0ms var(--rls-standard-curve);
33
33
  }
@@ -1,11 +1,11 @@
1
1
  .rls-search-input {
2
- --rls-input-height: var(--sizing-x14);
2
+ --rlc-input-height: var(--rls-sizing-x14);
3
3
  position: relative;
4
4
  float: left;
5
5
  display: flex;
6
6
  align-items: center;
7
- padding: var(--sizing-x4) var(--sizing-x6);
7
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
8
8
  box-sizing: border-box;
9
- border: var(--border-1-theme-300);
10
- border-radius: var(--sizing-x4);
9
+ border: var(--rls-app-border-1-300);
10
+ border-radius: var(--rls-sizing-x4);
11
11
  }
@@ -8,8 +8,8 @@
8
8
  line-height: inherit;
9
9
  letter-spacing: inherit;
10
10
  overflow: hidden;
11
- background: var(--color-rolster-100);
12
- border-radius: var(--sizing-x2);
11
+ background: var(--rls-theme-color-100);
12
+ border-radius: var(--rls-sizing-x2);
13
13
  }
14
14
  .rls-skeleton::after {
15
15
  position: absolute;
@@ -21,10 +21,10 @@
21
21
  transform: translateX(-100%);
22
22
  background-image: linear-gradient(
23
23
  90deg,
24
- var(--skeleton-rolster-100) 0%,
25
- var(--skeleton-rolster-100) 20%,
26
- var(--skeleton-rolster-300) 60%,
27
- var(--skeleton-rolster-100)
24
+ var(--rls-theme-skeleton-100) 0%,
25
+ var(--rls-theme-skeleton-100) 20%,
26
+ var(--rls-theme-skeleton-300) 60%,
27
+ var(--rls-theme-skeleton-100)
28
28
  );
29
29
  animation: skeleton-animation 1600ms infinite;
30
30
  }
@@ -1,7 +1,6 @@
1
1
  .rls-skeleton-text {
2
2
  --pvt-value-visibility: visible;
3
3
  position: relative;
4
- float: left;
5
4
  width: 100%;
6
5
  max-height: inherit;
7
6
  min-height: inherit;
@@ -12,8 +11,8 @@
12
11
  }
13
12
  .rls-skeleton-text--active {
14
13
  --pvt-value-visibility: hidden;
15
- background: var(--color-rolster-100);
16
- border-radius: var(--sizing-x2);
14
+ background: var(--rls-theme-color-100);
15
+ border-radius: var(--rls-sizing-x2);
17
16
  }
18
17
  .rls-skeleton-text--active::after {
19
18
  animation: skeleton-text-animation 1600ms infinite;
@@ -28,16 +27,15 @@
28
27
  transform: translateX(-100%);
29
28
  background-image: linear-gradient(
30
29
  90deg,
31
- var(--skeleton-rolster-100) 0%,
32
- var(--skeleton-rolster-100) 20%,
33
- var(--skeleton-rolster-300) 60%,
34
- var(--skeleton-rolster-100)
30
+ var(--rls-theme-skeleton-100) 0%,
31
+ var(--rls-theme-skeleton-100) 20%,
32
+ var(--rls-theme-skeleton-300) 60%,
33
+ var(--rls-theme-skeleton-100)
35
34
  );
36
35
  }
37
36
  .rls-skeleton-text__value {
38
37
  position: relative;
39
38
  display: block;
40
- float: left;
41
39
  width: 100%;
42
40
  height: inherit;
43
41
  max-height: inherit;
@@ -1,18 +1,18 @@
1
1
  .rls-switch {
2
- --pvt-element-left: var(--sizing-x1);
3
- --pvt-element-background: var(--background-theme-500);
4
- --pvt-bar-background: var(--background-theme-100);
5
- max-width: var(--sizing-x20);
2
+ --pvt-element-left: var(--rls-sizing-x1);
3
+ --pvt-element-background: var(--rls-app-background-500);
4
+ --pvt-bar-background: var(--rls-app-background-100);
5
+ max-width: var(--rls-sizing-x20);
6
6
  }
7
7
  .rls-switch:hover {
8
8
  cursor: pointer;
9
9
  }
10
10
  .rls-switch--checked {
11
- --pvt-element-background: var(--gradient-rolster-500);
11
+ --pvt-element-background: var(--rls-theme-gradient-500);
12
12
  --pvt-element-left: calc(
13
- 100% - var(--rls-switch-element-size) - var(--sizing-x1)
13
+ 100% - var(--rlc-switch-element-size) - var(--rls-sizing-x1)
14
14
  );
15
- --pvt-bar-background: var(--color-rolster-300);
15
+ --pvt-bar-background: var(--rls-theme-color-300);
16
16
  }
17
17
  .rls-switch--disabled {
18
18
  opacity: 0.5;
@@ -21,22 +21,22 @@
21
21
  .rls-switch__component {
22
22
  position: relative;
23
23
  width: 100%;
24
- padding: var(--sizing-x3) var(--sizing-x1);
24
+ padding: var(--rls-sizing-x3) var(--rls-sizing-x1);
25
25
  box-sizing: border-box;
26
26
  }
27
27
  .rls-switch__component__element {
28
28
  position: absolute;
29
29
  top: 0rem;
30
30
  left: var(--pvt-element-left);
31
- width: var(--rls-switch-element-size);
32
- height: var(--rls-switch-element-size);
33
- z-index: var(--z-index-2);
34
- padding: var(--sizing-x2);
31
+ width: var(--rlc-switch-element-size);
32
+ height: var(--rlc-switch-element-size);
33
+ z-index: var(--rls-z-index-2);
34
+ padding: var(--rls-sizing-x2);
35
35
  box-sizing: border-box;
36
36
  border-radius: 50%;
37
- background: var(--background-theme-500);
37
+ background: var(--rls-app-background-500);
38
38
  box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
39
- transition: left 240ms var(--standard-curve);
39
+ transition: left 240ms var(--rls-standard-curve);
40
40
  }
41
41
  .rls-switch__component__element::before {
42
42
  display: block;
@@ -49,6 +49,6 @@
49
49
  .rls-switch__component__bar {
50
50
  background: var(--pvt-bar-background);
51
51
  width: 100%;
52
- height: var(--rls-switch-bar-height);
53
- border-radius: var(--rls-switch-bar-radius);
52
+ height: var(--rlc-switch-bar-height);
53
+ border-radius: var(--rlc-switch-bar-radius);
54
54
  }
@@ -5,11 +5,11 @@
5
5
  display: block;
6
6
  float: left;
7
7
  text-align: center;
8
- width: var(--rls-tabulartext-char-width);
8
+ width: var(--rlc-tabulartext-char-width);
9
9
  }
10
10
  .rls-tabular-text__pointer {
11
11
  display: block;
12
12
  float: left;
13
13
  text-align: center;
14
- width: var(--rls-tabulartext-pointer-width);
14
+ width: var(--rlc-tabulartext-pointer-width);
15
15
  }
@@ -1,5 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
- export type RlsTheme = 'primary' | 'success' | 'info' | 'happy' | 'warning' | 'danger' | 'coffee' | 'obsidian';
2
+ export type RlsTheme = 'standard' | 'success' | 'info' | 'warning' | 'danger' | 'amaizing' | 'smartness' | 'obsidian';
3
3
  export interface RlsComponent {
4
4
  children?: ReactNode;
5
5
  rlsTheme?: RlsTheme;
@@ -1,58 +1,51 @@
1
1
  .rls-ballot {
2
- --rls-avatar-width: var(--sizing-x20);
3
- --rls-avatar-height: var(--sizing-x20);
2
+ --rlc-avatar-width: var(--rls-sizing-x20);
3
+ --rlc-avatar-height: var(--rls-sizing-x20);
4
4
  position: relative;
5
- float: left;
6
5
  display: flex;
7
6
  width: 100%;
8
- padding: var(--sizing-x4);
7
+ align-content: center;
8
+ column-gap: var(--rls-sizing-x4);
9
+ padding: var(--rls-sizing-x4);
9
10
  box-sizing: border-box;
10
11
  overflow: hidden;
11
12
  }
12
13
  .rls-ballot--bordered {
13
- border-radius: var(--sizing-x4);
14
- border: var(--border-1-theme-300);
14
+ border-radius: var(--rls-sizing-x4);
15
+ border: var(--rls-app-border-1-300);
15
16
  }
16
17
  .rls-ballot--skeleton {
17
- --subtitle-width: 60%;
18
- }
19
- .rls-ballot > .rls-avatar {
20
- margin: auto 0rem;
21
- }
22
- .rls-ballot > .rls-avatar + .rls-ballot__component {
23
- width: calc(100% - var(--sizing-x28));
24
- margin-left: var(--sizing-x4);
18
+ --rls-subtitle-width: 60%;
25
19
  }
26
20
  .rls-ballot__component {
21
+ display: flex;
27
22
  overflow: hidden;
28
- margin: auto;
23
+ flex-direction: column;
24
+ row-gap: var(--rls-sizing-x2);
29
25
  }
30
26
  .rls-ballot__title {
31
27
  position: relative;
32
- float: left;
33
28
  width: 100%;
34
- color: var(--color-theme-500);
29
+ color: var(--rls-app-color-500);
35
30
  overflow: hidden;
36
31
  white-space: nowrap;
37
32
  text-overflow: ellipsis;
38
- font-weight: var(--font-weight-medium);
39
- font-size: var(--label-font-size);
40
- letter-spacing: var(--label-letter-spacing);
41
- min-height: var(--label-line-height);
42
- line-height: var(--label-line-height);
33
+ font-weight: var(--rls-font-weight-medium);
34
+ font-size: var(--rls-label-font-size);
35
+ letter-spacing: var(--rls-label-letter-spacing);
36
+ min-height: var(--rls-label-line-height);
37
+ line-height: var(--rls-label-line-height);
43
38
  }
44
39
  .rls-ballot__subtitle {
45
40
  position: relative;
46
- float: left;
47
- width: var(--rls-ballot-subtitle-width);
48
- color: var(--color-theme-300);
49
- margin-top: var(--sizing-x2);
50
- font-weight: var(--font-weight-semibold);
51
- font-size: var(--smalltext-font-size);
52
- letter-spacing: var(--smalltext-letter-spacing);
53
- min-height: var(--rls-ballot-subtitle-height);
54
- line-height: var(--rls-ballot-subtitle-height);
55
- overflow: var(--rls-ballot-subtitle-overflow);
56
- text-overflow: var(--rls-ballot-subtitle-text-overflow);
57
- white-space: var(--rls-ballot-subtitle-white-space);
41
+ width: var(--rlc-ballot-subtitle-width);
42
+ color: var(--rls-app-color-300);
43
+ font-weight: var(--rls-font-weight-semibold);
44
+ font-size: var(--rls-smalltext-font-size);
45
+ letter-spacing: var(--rls-smalltext-letter-spacing);
46
+ min-height: var(--rlc-ballot-subtitle-height);
47
+ line-height: var(--rlc-ballot-subtitle-height);
48
+ overflow: var(--rlc-ballot-subtitle-overflow);
49
+ text-overflow: var(--rlc-ballot-subtitle-text-overflow);
50
+ white-space: var(--rlc-ballot-subtitle-white-space);
58
51
  }
@@ -1,5 +1,5 @@
1
1
  .rls-button-progress {
2
- --rls-progress-circular-dimension: var(--sizing-x16);
2
+ --rlc-progress-circular-dimension: var(--rls-sizing-x16);
3
3
  position: relative;
4
4
  display: flex;
5
5
  justify-content: center;
@@ -6,34 +6,36 @@
6
6
  justify-content: center;
7
7
  }
8
8
  .rls-button-toggle__action {
9
- --rls-button-content-radius: var(--sizing-x2) 0rem 0rem var(--sizing-x2);
9
+ --rlc-button-content-radius: var(--rls-sizing-x2) 0rem 0rem
10
+ var(--rls-sizing-x2);
10
11
  width: auto;
11
12
  }
12
13
  .rls-button-toggle__icon {
13
- --rls-button-content-radius: 0rem var(--sizing-x2) var(--sizing-x2) 0rem;
14
- --rls-button-content-padding: var(--sizing-x2);
14
+ --rlc-button-content-radius: 0rem var(--rls-sizing-x2) var(--rls-sizing-x2)
15
+ 0rem;
16
+ --rlc-button-content-padding: var(--rls-sizing-x2);
15
17
  width: auto;
16
18
  }
17
19
  .rls-button-toggle__list {
18
- --rls-button-toggle-ul-height: 0rem;
19
- --rls-button-toggle-ul-opacity: 0;
20
- --rls-button-toggle-ul-transform: none;
20
+ --rlc-button-toggle-ul-height: 0rem;
21
+ --rlc-button-toggle-ul-opacity: 0;
22
+ --rlc-button-toggle-ul-transform: none;
21
23
  position: absolute;
22
24
  top: 22.5rem;
23
25
  left: 0rem;
24
26
  width: 100%;
25
27
  height: 0rem;
26
28
  overflow: hidden;
27
- z-index: var(--z-index-4);
29
+ z-index: var(--rls-z-index-4);
28
30
  }
29
31
  .rls-button-toggle__list--hide {
30
- --rls-button-toggle-ul-opacity: 0;
31
- --rls-button-toggle-ul-transform: scale(0, 0);
32
+ --rlc-button-toggle-ul-opacity: 0;
33
+ --rlc-button-toggle-ul-transform: scale(0, 0);
32
34
  }
33
35
  .rls-button-toggle__list--visible {
34
- --rls-button-toggle-ul-height: auto;
35
- --rls-button-toggle-ul-opacity: 1;
36
- --rls-button-toggle-ul-transform: scale(1, 1);
36
+ --rlc-button-toggle-ul-height: auto;
37
+ --rlc-button-toggle-ul-opacity: 1;
38
+ --rlc-button-toggle-ul-transform: scale(1, 1);
37
39
  overflow: initial;
38
40
  opacity: 1;
39
41
  height: auto;
@@ -44,36 +46,36 @@
44
46
  flex-direction: column;
45
47
  float: left;
46
48
  width: 100%;
47
- height: var(--rls-button-toggle-ul-height);
48
- opacity: var(--rls-button-toggle-ul-opacity);
49
- padding: var(--sizing-x4) 0rem;
50
- border-radius: var(--sizing-x4);
49
+ height: var(--rlc-button-toggle-ul-height);
50
+ opacity: var(--rlc-button-toggle-ul-opacity);
51
+ padding: var(--rls-sizing-x4) 0rem;
52
+ border-radius: var(--rls-sizing-x4);
51
53
  box-sizing: border-box;
52
54
  overflow-y: auto;
53
55
  overflow-x: hidden;
54
- z-index: var(--z-index-2);
55
- background: var(--background-theme-500);
56
- border: var(--border-1-rolster-500);
57
- transform: var(--rls-button-toggle-ul-transform);
56
+ z-index: var(--rls-z-index-2);
57
+ background: var(--rls-app-background-500);
58
+ border: var(--rls-theme-border-1-500);
59
+ transform: var(--rlc-button-toggle-ul-transform);
58
60
  transform-origin: 0% 0%;
59
- transition: transform 240ms 0ms var(--standard-curve),
60
- opacity 240ms 0ms var(--standard-curve);
61
+ transition: transform 240ms 0ms var(--rls-standard-curve),
62
+ opacity 240ms 0ms var(--rls-standard-curve);
61
63
  will-change: opacity, transform;
62
- box-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
64
+ box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
63
65
  }
64
66
  .rls-button-toggle__list ul li {
65
- padding: 0rem var(--sizing-x6);
67
+ padding: 0rem var(--rls-sizing-x6);
66
68
  box-sizing: border-box;
67
- height: var(--sizing-x20);
68
- line-height: var(--sizing-x20);
69
+ height: var(--rls-sizing-x20);
70
+ line-height: var(--rls-sizing-x20);
69
71
  cursor: default;
70
- font-weight: var(--font-weight-semibold);
72
+ font-weight: var(--rls-font-weight-semibold);
71
73
  font-size: 6rem;
72
74
  letter-spacing: 0.825px;
73
75
  text-transform: uppercase;
74
- color: var(--color-theme-300);
76
+ color: var(--rls-app-color-300);
75
77
  }
76
78
  .rls-button-toggle__list ul li:hover {
77
- background: var(--background-theme-300);
78
- color: var(--color-theme-500);
79
+ background: var(--rls-app-background-300);
80
+ color: var(--rls-app-color-500);
79
81
  }
@@ -1,11 +1,11 @@
1
1
  .rls-checkbox-label {
2
2
  --pvt-text-opacity: 1;
3
- --pvt-text-height: var(--sizing-x12);
3
+ --pvt-text-height: var(--rls-sizing-x12);
4
4
  --pvt-text-overflow: hidden;
5
5
  --pvt-text-white-space: nowrap;
6
6
  --pvt-text-text-overflow: ellipsis;
7
7
  display: flex;
8
- column-gap: var(--sizing-x4);
8
+ column-gap: var(--rls-sizing-x4);
9
9
  }
10
10
  .rls-checkbox-label--disabled {
11
11
  --pvt-text-opacity: 0.5;
@@ -21,13 +21,13 @@
21
21
  width: auto;
22
22
  }
23
23
  .rls-checkbox-label__text {
24
- max-width: calc(100% - var(--sizing-x16));
24
+ max-width: calc(100% - var(--rls-sizing-x16));
25
25
  height: var(--pvt-text-height);
26
- line-height: var(--sizing-x12);
27
- color: var(--color-theme-300);
28
- font-size: var(--label-font-size);
29
- font-weight: var(--font-weight-medium);
30
- letter-spacing: var(--label-letter-spacing);
26
+ line-height: var(--rls-sizing-x12);
27
+ color: var(--rls-app-color-300);
28
+ font-size: var(--rls-label-font-size);
29
+ font-weight: var(--rls-font-weight-medium);
30
+ letter-spacing: var(--rls-label-letter-spacing);
31
31
  user-select: none;
32
32
  opacity: var(--pvt-text-opacity);
33
33
  overflow: var(--pvt-text-overflow);
@@ -1,9 +1,8 @@
1
1
  .rls-day-picker {
2
- --pvt-span-nothover-background: transparent;
3
- --pvt-span-nothover-font-color: inherit;
4
2
  --pvt-span-background: transparent;
3
+ --pvt-span-font-color: var(--rls-app-color-500);
4
+ --pvt-span-border: var(--rls-border-1) solid transparent;
5
5
  position: relative;
6
- float: left;
7
6
  width: 100%;
8
7
  max-width: 140rem;
9
8
  box-sizing: border-box;
@@ -11,56 +10,69 @@
11
10
  }
12
11
  .rls-day-picker__header {
13
12
  display: flex;
14
- margin-bottom: var(--sizing-x4);
15
- background: var(--background-theme-100);
16
- color: var(--color-theme-500);
17
- border-radius: var(--sizing-x2);
13
+ margin-bottom: var(--rls-sizing-x4);
14
+ background: var(--rls-app-background-100);
15
+ color: var(--rls-app-color-500);
16
+ border-radius: var(--rls-sizing-x2);
18
17
  }
19
18
  .rls-day-picker__label {
20
- padding: var(--sizing-x6) 0rem;
19
+ padding: var(--rls-sizing-x6) 0rem;
21
20
  text-align: center;
22
21
  width: 100%;
23
- font-size: var(--sizing-x6);
24
- font-weight: var(--font-weight-bold);
22
+ font-size: var(--rls-sizing-x6);
23
+ font-weight: var(--rls-font-weight-bold);
25
24
  }
26
25
  .rls-day-picker__week {
27
26
  display: flex;
28
27
  }
29
28
  .rls-day-picker__day {
30
29
  text-align: center;
31
- padding: var(--sizing-x1);
30
+ padding: var(--rls-sizing-x1);
32
31
  box-sizing: border-box;
33
32
  }
34
33
  .rls-day-picker__day__span {
35
34
  position: relative;
36
35
  display: block;
37
- color: var(--color-theme-500);
38
- border-radius: var(--sizing-x4);
39
- height: var(--sizing-x18);
40
- line-height: var(--sizing-x18);
41
- margin: var(--sizing-x1) 0rem;
42
36
  font-size: 7rem;
43
- font-weight: var(--font-weight-semibold);
44
- background: var(--pvt-span-background);
37
+ font-weight: var(--rls-font-weight-semibold);
38
+ margin: var(--rls-sizing-x1) 0rem;
39
+ border-radius: var(--rls-sizing-x4);
40
+ height: var(--rls-sizing-x18);
41
+ line-height: var(--rls-sizing-x18);
42
+ box-sizing: border-box;
45
43
  }
46
44
  .rls-day-picker__day__span:not(:hover) {
47
- background: var(--pvt-span-nothover-background);
48
- color: var(--pvt-span-nothover-font-color);
45
+ color: var(--pvt-span-font-color);
46
+ border: var(--pvt-span-border);
47
+ background: var(--pvt-span-background);
49
48
  }
50
49
  .rls-day-picker__day__span:hover {
51
- background: var(--color-rolster-900);
52
- color: var(--color-light-500);
50
+ background: var(--rls-theme-color-900);
51
+ color: var(--rls-theme-font-900);
52
+ border: var(--rls-theme-border-1-900);
53
+ }
54
+ .rls-day-picker__day--today {
55
+ --pvt-span-background: transparent;
56
+ --pvt-span-font-color: var(--rls-theme-color-500);
57
+ --pvt-span-border: var(--rls-theme-border-1-500);
53
58
  }
54
59
  .rls-day-picker__day--selected {
55
- --pvt-span-nothover-background: var(--color-rolster-500);
56
- --pvt-span-nothover-font-color: var(--color-light-500);
60
+ --pvt-span-border: var(--rls-app-border-1-300);
61
+ }
62
+ .rls-day-picker__day--focused {
63
+ --pvt-span-background: var(--rls-theme-color-500);
64
+ --pvt-span-font-color: var(--rls-theme-font-500);
65
+ --pvt-span-border: var(--rls-theme-border-1-500);
57
66
  }
58
67
  .rls-day-picker__day--forbidden {
59
- --pvt-span-background: var(--background-theme-100);
68
+ --pvt-span-background: var(--rls-app-background-300);
69
+ --pvt-span-font-color: var(--rls-app-color-100);
70
+ --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
60
71
  pointer-events: none;
61
- opacity: 0.5;
62
72
  }
63
73
  .rls-day-picker__day--disabled {
74
+ --pvt-span-background: transparent;
75
+ --pvt-span-font-color: var(--rls-app-color-100);
76
+ --pvt-span-border: var(--rls-border-1) solid transparent;
64
77
  pointer-events: none;
65
- opacity: 0.5;
66
78
  }
@@ -6,8 +6,10 @@ interface DayPickerProps extends RlsComponent {
6
6
  disabled?: boolean;
7
7
  formControl?: ReactControl<HTMLElement, number>;
8
8
  maxDate?: Date;
9
+ month?: Nulleable<number>;
9
10
  minDate?: Date;
10
11
  onValue?: (value: number) => void;
12
+ year?: Nulleable<number>;
11
13
  }
12
- export declare function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme, onValue }: DayPickerProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, month, minDate, onValue, rlsTheme, year }: DayPickerProps): import("react/jsx-runtime").JSX.Element;
13
15
  export {};