@rolster/react-components 18.21.29 → 18.21.31

package/dist/cjs/assets/{index-iBIATb-B.css → index-DsP20SgC.css}

@@ -451,8 +451,7 @@
     --rlc-checkbox-children-dimension,
     var(--rls-sizing-x6)
   );
-  --pvt-component-border-color: var(--rls-app-color-500);
-  --pvt-component-transform: scale(0);
+  --pvt-component-background: var(--rls-app-color-050);
   position: relative;
   display: flex;
   width: var(--pvt-dimension);
@@ -462,15 +461,15 @@
   box-sizing: border-box;
   outline: none;
   border-radius: var(--rls-sizing-x3);
-  background: var(--rls-theme-color-050);
-  border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
+  background: var(--rls-app-color-300);
+  transition: all 160ms 0ms var(--rls-standard-curve);
 }
 .rls-checkbox:hover {
   cursor: pointer;
 }
 .rls-checkbox--checked {
-  --pvt-component-border-color: var(--rls-theme-color-500);
-  --pvt-component-transform: scale(1);
+  --pvt-component-background: var(--rls-theme-color-200);
+  background: var(--rls-theme-color-400);
 }
 .rls-checkbox--disabled {
   opacity: 0.5;
@@ -480,9 +479,7 @@
   width: var(--pvt-component-dimension);
   height: var(--pvt-component-dimension);
   border-radius: var(--rls-sizing-x1);
-  background: var(--rls-theme-color-500);
-  transform: var(--pvt-component-transform);
-  transform-origin: 50% 50%;
+  background: var(--pvt-component-background);
   transition: all 160ms 0ms var(--rls-standard-curve);
 } /*# sourceMappingURL=CheckBox.css.map */
 
@@ -807,8 +804,7 @@
     --rlc-radiobutton-children-dimension,
     var(--rls-sizing-x6)
   );
-  --pvt-component-border-color: var(--rls-app-color-500);
-  --pvt-component-transform: scale(0);
+  --pvt-component-background: var(--rls-app-color-050);
   position: relative;
   display: flex;
   width: var(--pvt-dimension);
@@ -818,15 +814,15 @@
   outline: none;
   border-radius: 50%;
   box-sizing: border-box;
-  background: var(--rls-theme-color-050);
-  border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
+  background: var(--rls-app-color-300);
+  transition: all 160ms 0ms var(--rls-standard-curve);
 }
 .rls-radiobutton:hover {
   cursor: pointer;
 }
 .rls-radiobutton--checked {
-  --pvt-component-border-color: var(--rls-theme-color-500);
-  --pvt-component-transform: scale(1);
+  --pvt-component-background: var(--rls-theme-color-200);
+  background: var(--rls-theme-color-400);
 }
 .rls-radiobutton--disabled {
   opacity: 0.5;
@@ -836,9 +832,7 @@
   width: var(--pvt-component-dimension);
   height: var(--pvt-component-dimension);
   border-radius: 50%;
-  background: var(--rls-theme-color-500);
-  transform: var(--pvt-component-transform);
-  transform-origin: 50% 50%;
+  background: var(--pvt-component-background);
   transition: all 160ms 0ms var(--rls-standard-curve);
 } /*# sourceMappingURL=RadioButton.css.map */
 
@@ -911,25 +905,23 @@
 } /*# sourceMappingURL=SkeletonText.css.map */
 
 .rls-switch {
-  --pvt-element-size: var(--rlc-switch-element-size, var(--rls-sizing-x10));
-  --pvt-element-left: var(--rls-sizing-x1);
-  --pvt-element-border-color: var(--rls-app-color-400);
-  --pvt-element-background: var(--rls-app-color-050);
-  --pvt-element-item-background: transparent;
-  --pvt-bar-background: var(--rls-app-color-300);
-  max-width: var(--rlc-switch-max-width, var(--rls-sizing-x18));
+  --pvt-component-padding: var(
+    --rlc-switch-component-padding,
+    var(--rls-sizing-x4) var(--rls-sizing-x1)
+  );
+  --pvt-element-size: var(--rlc-switch-element-size, var(--rls-sizing-x12));
+  --pvt-element-left: 0rem;
+  --pvt-element-background: var(--rls-app-color-300);
+  --pvt-bar-background: var(--rls-app-color-500);
+  max-width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
 }
 .rls-switch:hover {
   cursor: pointer;
 }
 .rls-switch--checked {
-  --pvt-element-left: calc(
-    100% - var(--pvt-element-size) - var(--rls-sizing-x1)
-  );
-  --pvt-element-border-color: var(--rls-theme-color-500);
-  --pvt-element-background: var(--rls-theme-color-050);
-  --pvt-element-item-background: var(--rls-theme-color-500);
-  --pvt-bar-background: var(--rls-theme-color-300);
+  --pvt-element-left: calc(100% - var(--pvt-element-size));
+  --pvt-element-background: var(--rls-theme-color-200);
+  --pvt-bar-background: var(--rls-theme-color-400);
 }
 .rls-switch--disabled {
   opacity: 0.5;
@@ -938,7 +930,7 @@
 .rls-switch__component {
   position: relative;
   width: 100%;
-  padding: var(--rls-sizing-x3) var(--rls-sizing-x1);
+  padding: var(--pvt-component-padding);
   box-sizing: border-box;
 }
 .rls-switch__component__element {
@@ -947,27 +939,19 @@
   left: var(--pvt-element-left);
   width: var(--pvt-element-size);
   height: var(--pvt-element-size);
-  z-index: var(--rls-z-index-2);
+  border-radius: 50%;
   padding: var(--rls-sizing-x2);
   box-sizing: border-box;
-  border-radius: 50%;
+  z-index: var(--rls-z-index-2);
   background: var(--pvt-element-background);
-  border: var(--rls-sizing-x1) solid var(--pvt-element-border-color);
-  transition: left 240ms var(--rls-standard-curve);
-}
-.rls-switch__component__element::before {
-  display: block;
-  content: '';
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background: var(--pvt-element-item-background);
+  transition: all 160ms var(--rls-standard-curve);
 }
 .rls-switch__component__bar {
   background: var(--pvt-bar-background);
   width: 100%;
   height: var(--rlc-switch-bar-height, var(--rls-sizing-x4));
   border-radius: var(--rlc-switch-bar-radius, var(--rls-sizing-x2));
+  transition: all 160ms 0ms var(--rls-standard-curve);
 } /*# sourceMappingURL=Switch.css.map */
 
 .rls-alert {
@@ -1034,7 +1018,7 @@
 }
 .rls-ballot--bordered {
   border-radius: var(--rls-sizing-x4);
-  border: var(--rls-app-border-1-100);
+  border: var(--rls-app-border-2-100);
 }
 .rls-ballot--skeleton {
   --rls-subtitle-width: 60%;
@@ -1237,6 +1221,7 @@
   --pvt-text-text-overflow: ellipsis;
   display: flex;
   column-gap: var(--rls-sizing-x4);
+  align-items: center;
 }
 .rls-label-checkbox--disabled {
   --pvt-text-opacity: 0.5;
@@ -1272,9 +1257,9 @@
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
-  position: relative;
-  width: 100%;
   display: flex;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
 }
 .rls-label-radiobutton--disabled {
   --pvt-text-opacity: 0.5;
@@ -1313,6 +1298,7 @@
   --pvt-text-text-overflow: ellipsis;
   display: flex;
   column-gap: var(--rls-sizing-x4);
+  align-items: center;
 }
 .rls-label-switch--disabled {
   --pvt-text-opacity: 0.5;
@@ -1785,13 +1771,17 @@
 } /*# sourceMappingURL=Toolbar.css.map */
 
 .rls-card {
-  background: var(--rls-app-color-050);
+  --pvt-background: var(--rls-app-color-100);
+  --pvt-border: var(--rls-app-border-2-300);
+  background: var(--pvt-background);
   border-radius: var(--rls-sizing-x4);
-  box-shadow: var(--rls-light-shadow-center-8);
+}
+.rls-card[rls-theme] {
+  --pvt-background: var(--rls-theme-color-100);
 }
 .rls-card--outline {
-  border: var(--rls-app-border-1-100);
-  box-shadow: none;
+  border: var(--pvt-border);
+  box-sizing: border-box;
 }
 .rls-card__content {
   display: flex;
@@ -1855,6 +1845,9 @@
   background: var(--rls-app-color-050);
   box-shadow: var(--rls-app-shadow-4);
   transform: var(--pvt-component-transform);
+  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
+    transform 125ms 0ms var(--rls-deceleration-curve),
+    visibility 125ms 0ms var(--rls-deceleration-curve);
 }
 .rls-confirmation__header {
   position: relative;
@@ -1924,6 +1917,8 @@
   z-index: var(--rls-z-index-2);
   background: var(--rls-theme-backdrop-900);
   backdrop-filter: blur(2px);
+  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
 }
 @media screen and (max-width: 480px) {
   .rls-confirmation {
@@ -2004,6 +1999,7 @@
 }
 .rls-field-autocomplete .rls-field-list__ul__control:disabled {
   opacity: 0.5;
+  pointer-events: none;
 }
 .rls-field-autocomplete .rls-field-list__ul .rls-progress-bar {
   margin-bottom: var(--rls-sizing-x8);
@@ -2188,6 +2184,7 @@
 }
 .rls-field-date__control:disabled {
   opacity: 0.5;
+  pointer-events: none;
 }
 .rls-field-date__action {
   --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
@@ -2320,6 +2317,7 @@
 }
 .rls-field-date-range__control:disabled {
   opacity: 0.5;
+  pointer-events: none;
 }
 .rls-field-date-range__action {
   --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
@@ -2338,8 +2336,14 @@
   margin: 1rem;
 } /*# sourceMappingURL=FieldDateRange.css.map */
 
+.rls-field-select {
+  --pvt-control-cursor: pointer;
+}
+.rls-field-select.rls-field-box--disabled {
+  --pvt-control-cursor: none;
+}
 .rls-field-select .rls-field-list__control {
-  cursor: pointer;
+  cursor: var(--pvt-control-cursor);
 }
 .rls-field-select .rls-field-list__action {
   transition: transform 160ms 0ms var(--rls-sharp-curve);

package/dist/cjs/index.js

@@ -1711,7 +1711,7 @@ function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsT
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-ballot', { bordered, skeleton });
     }, [bordered, skeleton]);
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("label", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: jsxRuntimeExports.jsx("span", { children: subtitle }) }) }))] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
 }
 
 function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {