@rolster/react-components 18.21.26 → 18.21.28

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/cjs/assets/{index-8XUn402Z.css → index-DRZWilOp.css} +35 -17
  2. package/dist/es/assets/{index-8XUn402Z.css → index-DRZWilOp.css} +35 -17
  3. package/dist/esm/components/atoms/InputSearch/InputSearch.css +1 -1
  4. package/dist/esm/components/atoms/MessageIcon/MessageIcon.css +1 -1
  5. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.css +1 -1
  6. package/dist/esm/components/organisms/FieldDate/FieldDate.css +17 -8
  7. package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.css +15 -6
  8. package/package.json +2 -2
package/dist/cjs/assets/{index-8XUn402Z.css → index-DRZWilOp.css} RENAMED
@@ -618,7 +618,7 @@
618
618
  align-items: center;
619
619
  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
620
620
  box-sizing: border-box;
621
- background: var(rlc-input-search-background, var(--rls-app-color-100));
621
+ background: var(--rlc-input-search-background, var(--rls-app-color-100));
622
622
  border-radius: var(--rls-sizing-x4);
623
623
  }
624
624
 
@@ -643,7 +643,7 @@
643
643
 
644
644
  .rls-message-icon {
645
645
  --rlc-icon-color: var(--rls-theme-color-500);
646
- --rlc-icon-dimesion: var(--rls-sizing-x8);
646
+ --rlc-icon-dimension: var(--rls-sizing-x8);
647
647
  display: flex;
648
648
  align-items: center;
649
649
  column-gap: var(--rls-sizing-x2);
@@ -1957,7 +1957,7 @@
1957
1957
  --pvt-control-opacity: 1;
1958
1958
  }
1959
1959
  .rls-field-autocomplete.rls-field-box--selected {
1960
- --pvt-control-width: calc(100% - var(--rlc-fieldbox-action-dimension));
1960
+ --pvt-control-width: calc(100% - var(--pvt-action-dimension));
1961
1961
  }
1962
1962
  .rls-field-autocomplete.rls-field-box--disabled {
1963
1963
  --pvt-control-opacity: 0.5;
@@ -2159,6 +2159,15 @@
2159
2159
 
2160
2160
  .rls-field-date {
2161
2161
  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
2162
+ --pvt-font-size: var(--rlc-datefield-font-size, var(--rls-input-font-size));
2163
+ --pvt-letter-spacing: var(
2164
+ --rlc-datefield-letter-spacing,
2165
+ var(--rls-input-letter-spacing)
2166
+ );
2167
+ --pvt-action-dimension: var(
2168
+ --rlc-fieldbox-action-dimension,
2169
+ var(--rls-sizing-x12)
2170
+ );
2162
2171
  position: relative;
2163
2172
  width: 100%;
2164
2173
  box-sizing: border-box;
@@ -2168,7 +2177,7 @@
2168
2177
  }
2169
2178
  .rls-field-date__control {
2170
2179
  position: relative;
2171
- width: calc(100% - var(--rls-sizing-x14));
2180
+ width: calc(100% - var(--pvt-action-dimension));
2172
2181
  height: var(--rls-sizing-x12);
2173
2182
  line-height: var(--rls-sizing-x12);
2174
2183
  padding: 0rem;
@@ -2178,8 +2187,8 @@
2178
2187
  background: transparent;
2179
2188
  color: var(--rls-app-color-900);
2180
2189
  font-weight: var(--rls-font-weight-medium);
2181
- font-size: var(--rlc-input-font-size);
2182
- letter-spacing: var(--rlc-input-letter-spacing);
2190
+ font-size: var(--pvt-font-size);
2191
+ letter-spacing: var(--pvt-letter-spacing);
2183
2192
  }
2184
2193
  .rls-field-date__control::placeholder {
2185
2194
  color: var(--rls-app-color-400);
@@ -2188,14 +2197,14 @@
2188
2197
  opacity: 0.5;
2189
2198
  }
2190
2199
  .rls-field-date__action {
2191
- --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
2192
- width: var(--rlc-fieldbox-action-dimension);
2193
- height: var(--rlc-fieldbox-action-dimension);
2200
+ --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
2201
+ width: var(--pvt-action-dimension);
2202
+ height: var(--pvt-action-dimension);
2194
2203
  color: var(--rls-app-color-600);
2195
2204
  padding: 0rem;
2196
2205
  outline: none;
2197
- border-radius: var(--rlc-fieldbox-action-radius);
2198
- background: var(--rlc-fieldbox-action-background);
2206
+ border-radius: var(--rlc-fieldbox-action-radius, var(--rls-sizing-x2));
2207
+ background: var(--rlc-fieldbox-action-background, var(--rls-app-color-050));
2199
2208
  }
2200
2209
  .rls-field-date__action:disabled {
2201
2210
  opacity: 0.5;
@@ -2285,13 +2294,22 @@
2285
2294
 
2286
2295
  .rls-field-date-range {
2287
2296
  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
2297
+ --pvt-font-size: var(--rlc-datefield-font-size, var(--rls-input-font-size));
2298
+ --pvt-letter-spacing: var(
2299
+ --rlc-datefield-letter-spacing,
2300
+ var(--rls-input-letter-spacing)
2301
+ );
2302
+ --pvt-action-dimension: var(
2303
+ --rlc-fieldbox-action-dimension,
2304
+ var(--rls-sizing-x12)
2305
+ );
2288
2306
  position: relative;
2289
2307
  width: 100%;
2290
2308
  box-sizing: border-box;
2291
2309
  }
2292
2310
  .rls-field-date-range__control {
2293
2311
  position: relative;
2294
- width: calc(100% - var(--rls-sizing-x14));
2312
+ width: calc(100% - var(--pvt-action-dimension));
2295
2313
  height: var(--rls-sizing-x12);
2296
2314
  line-height: var(--rls-sizing-x12);
2297
2315
  padding: 0rem;
@@ -2311,14 +2329,14 @@
2311
2329
  opacity: 0.5;
2312
2330
  }
2313
2331
  .rls-field-date-range__action {
2314
- --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
2315
- width: var(--rlc-fieldbox-action-dimension);
2316
- height: var(--rlc-fieldbox-action-dimension);
2332
+ --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
2333
+ width: var(--pvt-action-dimension);
2334
+ height: var(--pvt-action-dimension);
2317
2335
  color: var(--rls-app-color-600);
2318
2336
  padding: 0rem;
2319
2337
  outline: none;
2320
- border-radius: var(--rlc-fieldbox-action-radius);
2321
- background: var(--rlc-fieldbox-action-background);
2338
+ border-radius: var(--rlc-fieldbox-action-radius, var(--rls-sizing-x2));
2339
+ background: var(--rlc-fieldbox-action-background, var(--rls-app-color-050));
2322
2340
  }
2323
2341
  .rls-field-date-range__action:disabled {
2324
2342
  opacity: 0.5;
package/dist/es/assets/{index-8XUn402Z.css → index-DRZWilOp.css} RENAMED
@@ -618,7 +618,7 @@
618
618
  align-items: center;
619
619
  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
620
620
  box-sizing: border-box;
621
- background: var(rlc-input-search-background, var(--rls-app-color-100));
621
+ background: var(--rlc-input-search-background, var(--rls-app-color-100));
622
622
  border-radius: var(--rls-sizing-x4);
623
623
  }
624
624
 
@@ -643,7 +643,7 @@
643
643
 
644
644
  .rls-message-icon {
645
645
  --rlc-icon-color: var(--rls-theme-color-500);
646
- --rlc-icon-dimesion: var(--rls-sizing-x8);
646
+ --rlc-icon-dimension: var(--rls-sizing-x8);
647
647
  display: flex;
648
648
  align-items: center;
649
649
  column-gap: var(--rls-sizing-x2);
@@ -1957,7 +1957,7 @@
1957
1957
  --pvt-control-opacity: 1;
1958
1958
  }
1959
1959
  .rls-field-autocomplete.rls-field-box--selected {
1960
- --pvt-control-width: calc(100% - var(--rlc-fieldbox-action-dimension));
1960
+ --pvt-control-width: calc(100% - var(--pvt-action-dimension));
1961
1961
  }
1962
1962
  .rls-field-autocomplete.rls-field-box--disabled {
1963
1963
  --pvt-control-opacity: 0.5;
@@ -2159,6 +2159,15 @@
2159
2159
 
2160
2160
  .rls-field-date {
2161
2161
  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
2162
+ --pvt-font-size: var(--rlc-datefield-font-size, var(--rls-input-font-size));
2163
+ --pvt-letter-spacing: var(
2164
+ --rlc-datefield-letter-spacing,
2165
+ var(--rls-input-letter-spacing)
2166
+ );
2167
+ --pvt-action-dimension: var(
2168
+ --rlc-fieldbox-action-dimension,
2169
+ var(--rls-sizing-x12)
2170
+ );
2162
2171
  position: relative;
2163
2172
  width: 100%;
2164
2173
  box-sizing: border-box;
@@ -2168,7 +2177,7 @@
2168
2177
  }
2169
2178
  .rls-field-date__control {
2170
2179
  position: relative;
2171
- width: calc(100% - var(--rls-sizing-x14));
2180
+ width: calc(100% - var(--pvt-action-dimension));
2172
2181
  height: var(--rls-sizing-x12);
2173
2182
  line-height: var(--rls-sizing-x12);
2174
2183
  padding: 0rem;
@@ -2178,8 +2187,8 @@
2178
2187
  background: transparent;
2179
2188
  color: var(--rls-app-color-900);
2180
2189
  font-weight: var(--rls-font-weight-medium);
2181
- font-size: var(--rlc-input-font-size);
2182
- letter-spacing: var(--rlc-input-letter-spacing);
2190
+ font-size: var(--pvt-font-size);
2191
+ letter-spacing: var(--pvt-letter-spacing);
2183
2192
  }
2184
2193
  .rls-field-date__control::placeholder {
2185
2194
  color: var(--rls-app-color-400);
@@ -2188,14 +2197,14 @@
2188
2197
  opacity: 0.5;
2189
2198
  }
2190
2199
  .rls-field-date__action {
2191
- --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
2192
- width: var(--rlc-fieldbox-action-dimension);
2193
- height: var(--rlc-fieldbox-action-dimension);
2200
+ --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
2201
+ width: var(--pvt-action-dimension);
2202
+ height: var(--pvt-action-dimension);
2194
2203
  color: var(--rls-app-color-600);
2195
2204
  padding: 0rem;
2196
2205
  outline: none;
2197
- border-radius: var(--rlc-fieldbox-action-radius);
2198
- background: var(--rlc-fieldbox-action-background);
2206
+ border-radius: var(--rlc-fieldbox-action-radius, var(--rls-sizing-x2));
2207
+ background: var(--rlc-fieldbox-action-background, var(--rls-app-color-050));
2199
2208
  }
2200
2209
  .rls-field-date__action:disabled {
2201
2210
  opacity: 0.5;
@@ -2285,13 +2294,22 @@
2285
2294
 
2286
2295
  .rls-field-date-range {
2287
2296
  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
2297
+ --pvt-font-size: var(--rlc-datefield-font-size, var(--rls-input-font-size));
2298
+ --pvt-letter-spacing: var(
2299
+ --rlc-datefield-letter-spacing,
2300
+ var(--rls-input-letter-spacing)
2301
+ );
2302
+ --pvt-action-dimension: var(
2303
+ --rlc-fieldbox-action-dimension,
2304
+ var(--rls-sizing-x12)
2305
+ );
2288
2306
  position: relative;
2289
2307
  width: 100%;
2290
2308
  box-sizing: border-box;
2291
2309
  }
2292
2310
  .rls-field-date-range__control {
2293
2311
  position: relative;
2294
- width: calc(100% - var(--rls-sizing-x14));
2312
+ width: calc(100% - var(--pvt-action-dimension));
2295
2313
  height: var(--rls-sizing-x12);
2296
2314
  line-height: var(--rls-sizing-x12);
2297
2315
  padding: 0rem;
@@ -2311,14 +2329,14 @@
2311
2329
  opacity: 0.5;
2312
2330
  }
2313
2331
  .rls-field-date-range__action {
2314
- --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
2315
- width: var(--rlc-fieldbox-action-dimension);
2316
- height: var(--rlc-fieldbox-action-dimension);
2332
+ --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
2333
+ width: var(--pvt-action-dimension);
2334
+ height: var(--pvt-action-dimension);
2317
2335
  color: var(--rls-app-color-600);
2318
2336
  padding: 0rem;
2319
2337
  outline: none;
2320
- border-radius: var(--rlc-fieldbox-action-radius);
2321
- background: var(--rlc-fieldbox-action-background);
2338
+ border-radius: var(--rlc-fieldbox-action-radius, var(--rls-sizing-x2));
2339
+ background: var(--rlc-fieldbox-action-background, var(--rls-app-color-050));
2322
2340
  }
2323
2341
  .rls-field-date-range__action:disabled {
2324
2342
  opacity: 0.5;
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
- background: var(rlc-input-search-background, var(--rls-app-color-100));
8
+ background: var(--rlc-input-search-background, var(--rls-app-color-100));
9
9
  border-radius: var(--rls-sizing-x4);
10
10
  }
package/dist/esm/components/atoms/MessageIcon/MessageIcon.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .rls-message-icon {
2
2
  --rlc-icon-color: var(--rls-theme-color-500);
3
- --rlc-icon-dimesion: var(--rls-sizing-x8);
3
+ --rlc-icon-dimension: var(--rls-sizing-x8);
4
4
  display: flex;
5
5
  align-items: center;
6
6
  column-gap: var(--rls-sizing-x2);
package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --pvt-control-opacity: 1;
4
4
  }
5
5
  .rls-field-autocomplete.rls-field-box--selected {
6
- --pvt-control-width: calc(100% - var(--rlc-fieldbox-action-dimension));
6
+ --pvt-control-width: calc(100% - var(--pvt-action-dimension));
7
7
  }
8
8
  .rls-field-autocomplete.rls-field-box--disabled {
9
9
  --pvt-control-opacity: 0.5;
package/dist/esm/components/organisms/FieldDate/FieldDate.css CHANGED
@@ -1,5 +1,14 @@
1
1
  .rls-field-date {
2
2
  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
3
+ --pvt-font-size: var(--rlc-datefield-font-size, var(--rls-input-font-size));
4
+ --pvt-letter-spacing: var(
5
+ --rlc-datefield-letter-spacing,
6
+ var(--rls-input-letter-spacing)
7
+ );
8
+ --pvt-action-dimension: var(
9
+ --rlc-fieldbox-action-dimension,
10
+ var(--rls-sizing-x12)
11
+ );
3
12
  position: relative;
4
13
  width: 100%;
5
14
  box-sizing: border-box;
@@ -9,7 +18,7 @@
9
18
  }
10
19
  .rls-field-date__control {
11
20
  position: relative;
12
- width: calc(100% - var(--rls-sizing-x14));
21
+ width: calc(100% - var(--pvt-action-dimension));
13
22
  height: var(--rls-sizing-x12);
14
23
  line-height: var(--rls-sizing-x12);
15
24
  padding: 0rem;
@@ -19,8 +28,8 @@
19
28
  background: transparent;
20
29
  color: var(--rls-app-color-900);
21
30
  font-weight: var(--rls-font-weight-medium);
22
- font-size: var(--rlc-input-font-size);
23
- letter-spacing: var(--rlc-input-letter-spacing);
31
+ font-size: var(--pvt-font-size);
32
+ letter-spacing: var(--pvt-letter-spacing);
24
33
  }
25
34
  .rls-field-date__control::placeholder {
26
35
  color: var(--rls-app-color-400);
@@ -29,14 +38,14 @@
29
38
  opacity: 0.5;
30
39
  }
31
40
  .rls-field-date__action {
32
- --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
33
- width: var(--rlc-fieldbox-action-dimension);
34
- height: var(--rlc-fieldbox-action-dimension);
41
+ --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
42
+ width: var(--pvt-action-dimension);
43
+ height: var(--pvt-action-dimension);
35
44
  color: var(--rls-app-color-600);
36
45
  padding: 0rem;
37
46
  outline: none;
38
- border-radius: var(--rlc-fieldbox-action-radius);
39
- background: var(--rlc-fieldbox-action-background);
47
+ border-radius: var(--rlc-fieldbox-action-radius, var(--rls-sizing-x2));
48
+ background: var(--rlc-fieldbox-action-background, var(--rls-app-color-050));
40
49
  }
41
50
  .rls-field-date__action:disabled {
42
51
  opacity: 0.5;
package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.css CHANGED
@@ -1,12 +1,21 @@
1
1
  .rls-field-date-range {
2
2
  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
3
+ --pvt-font-size: var(--rlc-datefield-font-size, var(--rls-input-font-size));
4
+ --pvt-letter-spacing: var(
5
+ --rlc-datefield-letter-spacing,
6
+ var(--rls-input-letter-spacing)
7
+ );
8
+ --pvt-action-dimension: var(
9
+ --rlc-fieldbox-action-dimension,
10
+ var(--rls-sizing-x12)
11
+ );
3
12
  position: relative;
4
13
  width: 100%;
5
14
  box-sizing: border-box;
6
15
  }
7
16
  .rls-field-date-range__control {
8
17
  position: relative;
9
- width: calc(100% - var(--rls-sizing-x14));
18
+ width: calc(100% - var(--pvt-action-dimension));
10
19
  height: var(--rls-sizing-x12);
11
20
  line-height: var(--rls-sizing-x12);
12
21
  padding: 0rem;
@@ -26,14 +35,14 @@
26
35
  opacity: 0.5;
27
36
  }
28
37
  .rls-field-date-range__action {
29
- --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
30
- width: var(--rlc-fieldbox-action-dimension);
31
- height: var(--rlc-fieldbox-action-dimension);
38
+ --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
39
+ width: var(--pvt-action-dimension);
40
+ height: var(--pvt-action-dimension);
32
41
  color: var(--rls-app-color-600);
33
42
  padding: 0rem;
34
43
  outline: none;
35
- border-radius: var(--rlc-fieldbox-action-radius);
36
- background: var(--rlc-fieldbox-action-background);
44
+ border-radius: var(--rlc-fieldbox-action-radius, var(--rls-sizing-x2));
45
+ background: var(--rlc-fieldbox-action-background, var(--rls-app-color-050));
37
46
  }
38
47
  .rls-field-date-range__action:disabled {
39
48
  opacity: 0.5;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/react-components",
3
- "version": "18.21.26",
3
+ "version": "18.21.28",
4
4
  "type": "module",
5
5
  "description": "Package containing UI components for React Project.",
6
6
  "module": "dist/esm/index.js",
@@ -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.5.21",
52
+ "@rolster/styles-foundations": "^2.5.23",
53
53
  "@rolster/types": "^1.1.0",
54
54
  "@types/node-sass": "^4.11.4",
55
55
  "@types/react": "^18.0.28",