@rolster/react-components 19.1.1 → 19.1.3

package/dist/es/assets/{index-C2Gi7f6R.css → index-Dw8644Iw.css}

@@ -73,14 +73,15 @@
   --rlc-image-height: var(--rlc-avatar-height);
   position: relative;
   display: flex;
-  justify-content: center;
-  overflow: hidden;
-  font-size: var(--rlc-avatar-font-size, var(--rls-title-font-size));
   width: var(--rlc-avatar-width, var(--rls-sizing-x24));
   height: var(--rlc-avatar-height, var(--rls-sizing-x24));
-  background: var(--rls-theme-gradient-500);
-  color: var(--rls-theme-color-050);
+  justify-content: center;
+  align-items: center;
   border-radius: var(--rlc-avatar-radius, var(--rls-sizing-x4));
+  font-size: var(--rlc-avatar-font-size, var(--rls-title-font-size));
+  color: var(--rls-theme-color-050);
+  background: var(--rls-theme-gradient-500);
+  overflow: hidden;
 }
 .rls-avatar--skeleton {
   background: var(--rls-theme-color-200);
@@ -91,8 +92,11 @@
 .rls-avatar--rounded {
   border-radius: 50%;
 }
+.rls-avatar--contrast {
+  color: var(--rls-theme-color-600);
+  background: var(--rls-theme-color-200);
+}
 .rls-avatar span {
-  align-self: center;
   font-size: inherit;
 } /*# sourceMappingURL=Avatar.css.map */
 
@@ -108,7 +112,7 @@
   min-width: var(--pvt-dimension);
   height: var(--pvt-dimension);
   line-height: var(--pvt-dimension);
-  padding: var(--rlc-badge-padding, 0rem var(--rls-sizing-x4));
+  padding: var(--rlc-badge-padding, 0rem);
   box-sizing: border-box;
   font-size: var(--rlc-badge-font-size, var(--rls-smalltext-font-size));
   font-weight: var(--rlc-badge-font-weight, var(--rls-font-weight-regular));
@@ -117,8 +121,8 @@
     --rlc-badge-letter-spacing,
     var(--rls-smalltext-letter-spacing)
   );
-  color: var(--rls-app-color-050);
-  background: var(--rls-app-color-700);
+  color: var(--pvt-font-color);
+  background: var(--pvt-background);
   border-radius: var(--rlc-badge-border-radius, calc(var(--pvt-dimension) / 2));
 }
 .rls-badge--contrast {
@@ -1091,10 +1095,7 @@
 
 .rls-radiobutton {
   --pvt-dimension: var(--rlc-radiobutton-dimension, var(--rls-sizing-x12));
-  --pvt-component-dimension: var(
-    --rlc-radiobutton-children-dimension,
-    var(--rls-sizing-x6)
-  );
+  --pvt-component-dimension: calc(var(--pvt-dimension) / 2);
   --pvt-component-background: transparent;
   position: relative;
   display: flex;
@@ -1225,6 +1226,7 @@
   --pvt-content-font-color: var(--rls-app-color-500);
   position: relative;
   display: flex;
+  align-items: var(--rlc-alert-align-items, flex-start);
   column-gap: var(--rls-sizing-x6);
   padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
   box-sizing: border-box;
@@ -1500,6 +1502,8 @@
 } /*# sourceMappingURL=FieldText.css.map */
 
 .rls-label-checkbox {
+  --pvt-dimension: var(--rlc-label-checkbox-dimension, var(--rls-sizing-x12));
+  --rlc-checkbox-dimension: var(--pvt-dimension);
   --rlc-checkbox-cursor: pointer;
   --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
@@ -1525,9 +1529,11 @@
   --pvt-text-height: auto;
 }
 .rls-label-checkbox__component {
-  width: auto;
+  width: var(--pvt-dimension);
+  flex: 0 0 auto;
 }
 .rls-label-checkbox__text {
+  flex: 1 1 auto;
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
@@ -1535,6 +1541,7 @@
   color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
+  overflow: hidden;
 }
 .rls-label-checkbox__text > p {
   height: initial;
@@ -1544,6 +1551,11 @@
 } /*# sourceMappingURL=LabelCheckBox.css.map */
 
 .rls-label-radiobutton {
+  --pvt-dimension: var(
+    --rlc-label-radiobutton-dimension,
+    var(--rls-sizing-x12)
+  );
+  --rlc-radiobutton-dimension: var(--pvt-dimension);
   --rlc-radiobutton-cursor: pointer;
   --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
@@ -1569,9 +1581,11 @@
   --pvt-text-height: auto;
 }
 .rls-label-radiobutton__component {
-  width: auto;
+  width: var(--pvt-dimension);
+  flex: 0 0 auto;
 }
 .rls-label-radiobutton__text {
+  flex: 1 1 auto;
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
@@ -1579,6 +1593,7 @@
   color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
+  overflow: hidden;
 }
 .rls-label-radiobutton__text > p {
   height: initial;
@@ -1613,9 +1628,11 @@
   --pvt-text-height: auto;
 }
 .rls-label-switch__component {
-  max-width: 20rem;
+  width: 20rem;
+  flex: 0 0 auto;
 }
 .rls-label-switch__text {
+  flex: 1 1 auto;
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
@@ -1623,6 +1640,7 @@
   color: var(--rlc-label-switch-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
+  overflow: hidden;
 }
 .rls-label-switch__text > p {
   height: initial;

package/dist/es/index.js

@@ -464,10 +464,10 @@ function RlsAmount({ value, decimals, rlsTheme, symbol }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { className: "rls-amount__symbol", children: symbol }), jsxRuntimeExports.jsxs("div", { className: "rls-amount__content", children: [jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__integer", value: integer }), decimal && (jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__decimal", value: decimal }))] })] }));
 }
 
-function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
+function RlsAvatar({ children, contrast, rounded, skeleton, rlsTheme }) {
     const className = useMemo(() => {
-        return renderClassStatus('rls-avatar', { rounded, skeleton });
-    }, [rounded, skeleton]);
+        return renderClassStatus('rls-avatar', { contrast, rounded, skeleton });
+    }, [contrast, rounded, skeleton]);
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
@@ -564,21 +564,21 @@ function RlsSkeleton({ rlsTheme }) {
 }
 
 function RlsImage({ src, rlsTheme }) {
-    const [isComplet, setIsComplet] = useState(false);
+    const [srcIsComplet, setSrcIsComplet] = useState(false);
     const refSrc = useRef(src);
     const className = useMemo(() => {
-        return renderClassStatus('rls-image', { complet: isComplet });
-    }, [isComplet]);
+        return renderClassStatus('rls-image', { complet: srcIsComplet });
+    }, [srcIsComplet]);
     useEffect(() => {
         if (refSrc.current !== src) {
-            setIsComplet(false);
+            setSrcIsComplet(false);
             refSrc.current = src;
         }
     }, [src]);
     const onLoad = useCallback(() => {
-        setIsComplet(true);
+        setSrcIsComplet(true);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!isComplet && jsxRuntimeExports.jsx(RlsSkeleton, { rlsTheme: rlsTheme }), jsxRuntimeExports.jsx("img", { src: src, onLoad: onLoad })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!srcIsComplet && jsxRuntimeExports.jsx(RlsSkeleton, { rlsTheme: rlsTheme }), jsxRuntimeExports.jsx("img", { src: src, onLoad: onLoad })] }));
 }
 
 function RlsInput({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {