@rolster/react-components 18.24.6 → 18.24.8

package/dist/cjs/assets/{index-CtqvRNNR.css → index-BYLoD6-3.css}

@@ -1320,6 +1320,9 @@
   --pvt-text-opacity: 0.5;
   pointer-events: none;
 }
+.rls-label-checkbox--reverse {
+  flex-direction: row-reverse;
+}
 .rls-label-checkbox--extended {
   --pvt-text-text-overflow: initial;
   --pvt-text-overflow: initial;
@@ -1330,12 +1333,11 @@
   width: auto;
 }
 .rls-label-checkbox__text {
-  max-width: calc(100% - var(--rls-sizing-x28));
-  color: var(--rls-app-color-600);
-  line-height: var(--pvt-text-height);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
+  line-height: var(--pvt-text-height);
+  color: var(--rls-app-color-600);
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -1360,6 +1362,9 @@
   --pvt-text-opacity: 0.5;
   pointer-events: none;
 }
+.rls-label-radiobutton--reverse {
+  flex-direction: row-reverse;
+}
 .rls-label-radiobutton--extended {
   --pvt-text-text-overflow: initial;
   --pvt-text-overflow: initial;
@@ -1367,16 +1372,14 @@
   --pvt-text-height: auto;
 }
 .rls-label-radiobutton__component {
-  margin-right: var(--rls-sizing-x4);
   width: auto;
 }
 .rls-label-radiobutton__text {
-  max-width: calc(100% - var(--rls-sizing-x28));
-  color: var(--rls-app-color-600);
-  line-height: var(--pvt-text-height);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
+  line-height: var(--pvt-text-height);
+  color: var(--rls-app-color-600);
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -1401,6 +1404,9 @@
   --pvt-text-opacity: 0.5;
   pointer-events: none;
 }
+.rls-label-switch--reverse {
+  flex-direction: row-reverse;
+}
 .rls-label-switch--extended {
   --pvt-text-text-overflow: initial;
   --pvt-text-overflow: initial;
@@ -1411,12 +1417,11 @@
   max-width: 20rem;
 }
 .rls-label-switch__text {
-  max-width: calc(100% - var(--rls-sizing-x28));
-  color: var(--rls-app-color-600);
-  line-height: var(--pvt-text-height);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
+  line-height: var(--pvt-text-height);
+  color: var(--rls-app-color-600);
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }

package/dist/cjs/index.js

@@ -1919,7 +1919,7 @@ function RlsFieldText(props) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputText, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsLabelCheckBox({ children, disabled, extended, identifier, formControl, rlsTheme }) {
+function RlsLabelCheckBox({ children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
     const [checked, setChecked] = require$$0.useState(!!formControl?.value);
     require$$0.useEffect(() => {
         setChecked(!!formControl?.value);
@@ -1930,12 +1930,16 @@ function RlsLabelCheckBox({ children, disabled, extended, identifier, formContro
             : setChecked((checked) => !checked);
     }, [formControl]);
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-label-checkbox', { disabled, extended });
-    }, [disabled, extended]);
+        return renderClassStatus('rls-label-checkbox', {
+            disabled,
+            extended,
+            reverse
+        });
+    }, [disabled, extended, reverse]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__text", children: children })] }));
 }
 
-function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, onValue, rlsTheme, value }) {
+function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, onValue, reverse, rlsTheme, value }) {
     const [checked, setChecked] = require$$0.useState(formControl?.value === value);
     require$$0.useEffect(() => {
         setChecked(formControl?.value === value);
@@ -1945,12 +1949,16 @@ function RlsLabelRadioButton({ children, disabled, extended, identifier, formCon
         onValue && onValue(value);
     }, [formControl, value, onValue]);
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-label-radiobutton', { disabled, extended });
-    }, [disabled, extended]);
+        return renderClassStatus('rls-label-radiobutton', {
+            disabled,
+            extended,
+            reverse
+        });
+    }, [disabled, extended, reverse]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntimeExports.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__text", children: children })] }));
 }
 
-function RlsLabelSwitch({ children, disabled, extended, identifier, formControl, rlsTheme }) {
+function RlsLabelSwitch({ children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
     const [checked, setChecked] = require$$0.useState(!!formControl?.value);
     require$$0.useEffect(() => {
         setChecked(!!formControl?.value);
@@ -1961,8 +1969,12 @@ function RlsLabelSwitch({ children, disabled, extended, identifier, formControl,
             : setChecked((checked) => !checked);
     }, [formControl]);
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-label-switch', { disabled, extended });
-    }, [disabled, extended]);
+        return renderClassStatus('rls-label-switch', {
+            disabled,
+            extended,
+            reverse
+        });
+    }, [disabled, extended, reverse]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-switch__text", children: children })] }));
 }