@rolster/react-components 19.1.5 → 19.1.7

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.
@@ -117,7 +117,7 @@
117
117
  height: var(--pvt-dimension);
118
118
  line-height: var(--pvt-dimension);
119
119
  padding: var(--rlc-badge-padding, 0rem var(--rls-sizing-x2));
120
- box-sizing: border-box;
120
+ box-sizing: var(--rlc-badge-border-sizing, border-box);
121
121
  font-size: var(--rlc-badge-font-size, var(--rls-smalltext-font-size));
122
122
  font-weight: var(--rlc-badge-font-weight, var(--rls-font-weight-regular));
123
123
  text-align: center;
@@ -989,11 +989,13 @@
989
989
  .rls-progress-bar {
990
990
  --pvt-component-display: block;
991
991
  --pvt-component-height: var(--rlc-progress-bar-height, var(--rls-sizing-x2));
992
+ --pvt-component-radius: var(--rlc-progress-bar-radius, 0rem);
992
993
  position: relative;
993
994
  width: 100%;
994
995
  height: var(--pvt-component-height);
995
996
  overflow: hidden;
996
- background: var(--rls-theme-color-200);
997
+ background: var(--rlc-progress-bar-background, var(--rls-theme-color-100));
998
+ border-radius: var(--pvt-component-radius);
997
999
  }
998
1000
  .rls-progress-bar--indeterminate {
999
1001
  --pvt-component-display: none;
@@ -1006,6 +1008,7 @@
1006
1008
  width: 0%;
1007
1009
  height: var(--pvt-component-height);
1008
1010
  background: var(--rls-theme-gradient-500);
1011
+ border-radius: var(--pvt-component-radius);
1009
1012
  }
1010
1013
  .rls-progress-bar--indeterminate::after {
1011
1014
  animation: progress-bar-indeterminate-after 2000ms infinite;
@@ -1015,12 +1018,13 @@
1015
1018
  }
1016
1019
  .rls-progress-bar__component {
1017
1020
  position: absolute;
1021
+ display: var(--pvt-component-display);
1018
1022
  top: 0rem;
1019
1023
  width: 0%;
1020
1024
  height: var(--pvt-component-height);
1021
- display: var(--pvt-component-display);
1022
1025
  background: var(--rls-theme-gradient-500);
1023
1026
  transition: width 320ms 0ms var(--rls-standard-curve);
1027
+ border-radius: var(--pvt-component-radius);
1024
1028
  }
1025
1029
  @keyframes progress-bar-indeterminate-before {
1026
1030
  0% {
@@ -1420,7 +1424,8 @@
1420
1424
  transform: var(--rlc-button-toggle-ul-transform);
1421
1425
  transform-origin: 0% 0%;
1422
1426
  box-shadow: var(--rls-theme-shadow-500);
1423
- transition: transform 240ms 0ms var(--rls-standard-curve),
1427
+ transition:
1428
+ transform 240ms 0ms var(--rls-standard-curve),
1424
1429
  opacity 240ms 0ms var(--rls-standard-curve);
1425
1430
  }
1426
1431
  .rls-button-toggle__list ul li {
@@ -2297,8 +2302,8 @@
2297
2302
  border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
2298
2303
  background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
2299
2304
  transform: var(--pvt-component-transform);
2300
- transition: opacity var(--pvt-component-transition) 0ms
2301
- var(--rls-deceleration-curve),
2305
+ transition:
2306
+ opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2302
2307
  transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2303
2308
  visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
2304
2309
  }
@@ -2322,7 +2327,8 @@
2322
2327
  z-index: 1;
2323
2328
  background: var(--rls-theme-backdrop-900);
2324
2329
  backdrop-filter: blur(2px);
2325
- transition: opacity 120ms 0ms var(--rls-deceleration-curve),
2330
+ transition:
2331
+ opacity 120ms 0ms var(--rls-deceleration-curve),
2326
2332
  bottom 120ms 0ms var(--rls-deceleration-curve);
2327
2333
  }
2328
2334
  @media screen and (max-height: 960px) {
@@ -2422,7 +2428,8 @@
2422
2428
  background: var(--rls-app-color-050);
2423
2429
  box-shadow: var(--rls-app-shadow-4);
2424
2430
  transform: var(--pvt-component-transform);
2425
- transition: opacity 125ms 0ms var(--rls-deceleration-curve),
2431
+ transition:
2432
+ opacity 125ms 0ms var(--rls-deceleration-curve),
2426
2433
  transform 125ms 0ms var(--rls-deceleration-curve),
2427
2434
  visibility 125ms 0ms var(--rls-deceleration-curve);
2428
2435
  }
@@ -2498,7 +2505,8 @@
2498
2505
  z-index: var(--rls-z-index-2);
2499
2506
  background: var(--rls-theme-backdrop-900);
2500
2507
  backdrop-filter: blur(2px);
2501
- transition: opacity 120ms 0ms var(--rls-deceleration-curve),
2508
+ transition:
2509
+ opacity 120ms 0ms var(--rls-deceleration-curve),
2502
2510
  bottom 120ms 0ms var(--rls-deceleration-curve);
2503
2511
  }
2504
2512
  @media screen and (max-width: 480px) {
@@ -2624,8 +2632,8 @@
2624
2632
  border-radius: var(--rls-sizing-x4);
2625
2633
  background: var(--rlc-modal-background, var(--rls-app-color-050));
2626
2634
  transform: var(--pvt-component-transform);
2627
- transition: opacity var(--pvt-component-transition) 0ms
2628
- var(--rls-deceleration-curve),
2635
+ transition:
2636
+ opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2629
2637
  transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
2630
2638
  visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
2631
2639
  }
@@ -2640,7 +2648,8 @@
2640
2648
  z-index: 1;
2641
2649
  background: var(--rls-theme-backdrop-900);
2642
2650
  backdrop-filter: blur(2px);
2643
- transition: opacity 120ms 0ms var(--rls-deceleration-curve),
2651
+ transition:
2652
+ opacity 120ms 0ms var(--rls-deceleration-curve),
2644
2653
  bottom 120ms 0ms var(--rls-deceleration-curve);
2645
2654
  } /*# sourceMappingURL=Modal.css.map */
2646
2655
 
@@ -3133,8 +3142,8 @@
3133
3142
  justify-content: flex-end;
3134
3143
  visibility: hidden;
3135
3144
  transform: translateX(100%);
3136
- transition: opacity var(--pvt-component-transition) 0ms
3137
- var(--rls-deceleration-curve),
3145
+ transition:
3146
+ opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
3138
3147
  transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
3139
3148
  visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
3140
3149
  z-index: var(--rls-z-index-16);
@@ -3354,8 +3363,8 @@
3354
3363
  border-radius: var(--pvt-component-border-radius);
3355
3364
  background: var(--rlc-modal-sheet-background, var(--rls-app-color-050));
3356
3365
  transform: var(--pvt-component-transform);
3357
- transition: opacity var(--pvt-component-transition) 0ms
3358
- var(--rls-deceleration-curve),
3366
+ transition:
3367
+ opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
3359
3368
  transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
3360
3369
  visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
3361
3370
  }
@@ -3370,7 +3379,8 @@
3370
3379
  z-index: 1;
3371
3380
  background: var(--rls-theme-backdrop-900);
3372
3381
  backdrop-filter: blur(2px);
3373
- transition: opacity 120ms 0ms var(--rls-deceleration-curve),
3382
+ transition:
3383
+ opacity 120ms 0ms var(--rls-deceleration-curve),
3374
3384
  bottom 120ms 0ms var(--rls-deceleration-curve);
3375
3385
  }
3376
3386
  @media screen and (max-width: 640px) {
package/dist/cjs/index.js CHANGED
@@ -746,7 +746,7 @@ function RlsProgressBar({ indeterminate, percentage, rlsTheme }) {
746
746
  const className = require$$0.useMemo(() => {
747
747
  return renderClassStatus('rls-progress-bar', { indeterminate });
748
748
  }, [indeterminate]);
749
- return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage || 0}%` } }) }));
749
+ return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage ?? 0}%` } }) }));
750
750
  }
751
751
 
752
752
  function RlsProgressCircular({ rlsTheme }) {