@rolster/react-components 19.1.8 → 19.1.10

package/dist/es/assets/{index-CPhU8ATK.css → index-BaDqtd9t.css}

@@ -39,7 +39,9 @@
   );
   display: flex;
   width: var(--rlc-amount-width, auto);
+  height: var(--rlc-amount-height, auto);
   justify-content: var(--rlc-amount-text-align, flex-start);
+  align-items: var(--rlc-amount-align-items, initial);
   column-gap: var(--rls-sizing-x2);
   font-size: var(--pvt-font-size);
   font-weight: var(--pvt-font-weight);
@@ -658,9 +660,9 @@
 } /*# sourceMappingURL=ButtonOption.css.map */
 
 .rls-checkbox {
-  --rlc-icon-dimension: var(--rls-sizing-x10);
   --rlc-icon-color: transparent;
   --pvt-dimension: var(--rlc-checkbox-dimension, var(--rls-sizing-x12));
+  --rlc-icon-dimension: calc(var(--pvt-dimension) - 2rem);
   --pvt-component-background: transparent;
   position: relative;
   display: flex;
@@ -768,7 +770,7 @@
   --pvt-value-opacity: 1;
   --pvt-component-font-color: transparent;
   position: relative;
-  width: 100%;
+  width: var(--rlc-input-width, 100%);
 }
 .rls-input--focused {
   --pvt-component-font-color: var(--pvt-font-color);
@@ -831,27 +833,23 @@
 } /*# sourceMappingURL=Input.css.map */
 
 .rls-input-decimal {
+  --rlc-amount-height: var(--rlc-input-height);
+  --rlc-amount-align-items: center;
   --rlc-tabular-text-font-size: var(--rls-input-font-size);
   --rlc-tabular-text-char-width: 5.25rem;
   position: relative;
   width: 100%;
   box-sizing: border-box;
-}
-.rls-input-decimal .rls-amount {
-  height: inherit;
-  align-items: center;
 } /*# sourceMappingURL=InputDecimal.css.map */
 
 .rls-input-money {
+  --rlc-amount-height: var(--rlc-input-height);
+  --rlc-amount-align-items: center;
   --rlc-tabular-text-font-size: var(--rls-input-font-size);
   --rlc-tabular-text-char-width: 5.25rem;
   position: relative;
   width: 100%;
   box-sizing: border-box;
-}
-.rls-input-money .rls-amount {
-  height: inherit;
-  align-items: center;
 } /*# sourceMappingURL=InputMoney.css.map */
 
 .rls-input-number {
@@ -862,7 +860,7 @@
 
 .rls-input-password {
   position: relative;
-  width: 100%;
+  width: var(--rlc-input-password-width, 100%);
   box-sizing: border-box;
 }
 .rls-input-password__component {
@@ -1513,11 +1511,18 @@
 
 .rls-label-checkbox {
   --pvt-dimension: var(--rlc-label-checkbox-dimension, var(--rls-sizing-x12));
+  --pvt-label-font-size: var(
+    --rlc-label-checkbox-font-size,
+    var(--rls-label-font-size)
+  );
+  --pvt-label-letter-spacing: var(
+    --rlc-label-checkbox-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
   --rlc-checkbox-dimension: var(--pvt-dimension);
   --rlc-checkbox-cursor: pointer;
   --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
@@ -1536,7 +1541,6 @@
   --pvt-text-text-overflow: initial;
   --pvt-text-overflow: initial;
   --pvt-text-white-space: initial;
-  --pvt-text-height: auto;
 }
 .rls-label-checkbox__component {
   width: var(--pvt-dimension);
@@ -1544,10 +1548,10 @@
 }
 .rls-label-checkbox__text {
   flex: 1 1 auto;
-  font-size: var(--rls-label-font-size);
+  font-size: var(--pvt-label-font-size);
   font-weight: var(--rls-font-weight-medium);
-  letter-spacing: var(--rls-label-letter-spacing);
-  line-height: var(--pvt-text-height);
+  letter-spacing: var(--pvt-label-letter-spacing);
+  line-height: var(--rlc-label-checkbox-line-height, var(--rls-sizing-x12));
   color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
@@ -1565,11 +1569,18 @@
     --rlc-label-radiobutton-dimension,
     var(--rls-sizing-x12)
   );
+  --pvt-label-font-size: var(
+    --rlc-label-radiobutton-font-size,
+    var(--rls-label-font-size)
+  );
+  --pvt-label-letter-spacing: var(
+    --rlc-label-radiobutton-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
   --rlc-radiobutton-dimension: var(--pvt-dimension);
   --rlc-radiobutton-cursor: pointer;
   --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
@@ -1588,7 +1599,6 @@
   --pvt-text-text-overflow: initial;
   --pvt-text-overflow: initial;
   --pvt-text-white-space: initial;
-  --pvt-text-height: auto;
 }
 .rls-label-radiobutton__component {
   width: var(--pvt-dimension);
@@ -1596,10 +1606,10 @@
 }
 .rls-label-radiobutton__text {
   flex: 1 1 auto;
-  font-size: var(--rls-label-font-size);
+  font-size: var(--pvt-label-font-size);
   font-weight: var(--rls-font-weight-medium);
-  letter-spacing: var(--rls-label-letter-spacing);
-  line-height: var(--pvt-text-height);
+  letter-spacing: var(--pvt-label-letter-spacing);
+  line-height: var(--rlc-label-radiobutton-line-height, var(--rls-sizing-x12));
   color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
@@ -1615,8 +1625,15 @@
 .rls-label-switch {
   --rlc-switch-cursor: pointer;
   --rlc-ballot-padding: 0rem;
+  --pvt-label-font-size: var(
+    --rlc-label-switch-font-size,
+    var(--rls-label-font-size)
+  );
+  --pvt-label-letter-spacing: var(
+    --rlc-label-switch-letter-spacing,
+    var(--rls-label-letter-spacing)
+  );
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
@@ -1638,15 +1655,15 @@
   --pvt-text-height: auto;
 }
 .rls-label-switch__component {
-  width: 20rem;
+  width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
   flex: 0 0 auto;
 }
 .rls-label-switch__text {
   flex: 1 1 auto;
-  font-size: var(--rls-label-font-size);
+  font-size: var(--pvt-label-font-size);
   font-weight: var(--rls-font-weight-medium);
-  letter-spacing: var(--rls-label-letter-spacing);
-  line-height: var(--pvt-text-height);
+  letter-spacing: var(--pvt-label-letter-spacing);
+  line-height: var(--rlc-label-switch-line-height, var(--rls-sizing-x12));
   color: var(--rlc-label-switch-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);

package/dist/es/index.js

@@ -959,87 +959,87 @@ function RlsMessageFormError({ className, formControl }) {
 }
 
 function RlsFieldDecimal(props) {
-    const { children, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const { children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            focused: formControl?.focused && !disabled,
-            error: formControl?.wrong,
             disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
             readonly: props.readOnly
         }, 'rls-field-decimal');
     }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputDecimal, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputDecimal, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldMoney(props) {
-    const { children, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const { children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            focused: formControl?.focused && !disabled,
-            error: formControl?.wrong,
             disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
             readonly: props.readOnly
         }, 'rls-field-money');
     }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputMoney, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputMoney, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldNumber(props) {
-    const { children, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const { children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            focused: formControl?.focused && !disabled,
-            error: formControl?.wrong,
             disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
             readonly: props.readOnly
         }, 'rls-field-number');
     }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputNumber, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputNumber, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldPassword(props) {
-    const { children, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
-    const [password, setPassword] = useState(true);
+    const { children, formControl, identifier, rlsTheme } = props;
+    const [passwordIsActive, setPasswordIsActive] = useState(true);
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            focused: formControl?.focused && !disabled,
-            error: formControl?.wrong,
             disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
             readonly: props.readOnly
         }, 'rls-field-password');
     }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
-    const onToggleInput = useCallback(() => {
-        setPassword((password) => !password);
+    const onTogglePassword = useCallback(() => {
+        setPasswordIsActive((password) => !password);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputPassword, { ...props, type: password ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputPassword, { ...props, type: passwordIsActive ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: passwordIsActive ? 'eye' : 'eye-off', onClick: onTogglePassword })] }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldPercentage(props) {
-    const { children, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const { children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            focused: formControl?.focused && !disabled,
-            error: formControl?.wrong,
             disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
             readonly: props.readOnly
         }, 'rls-field-percentage');
     }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputPercentage, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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(RlsInputPercentage, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function RlsFieldReadonly({ children, identifier, rlsTheme, value }) {
@@ -1047,19 +1047,19 @@ function RlsFieldReadonly({ children, identifier, rlsTheme, value }) {
 }
 
 function RlsFieldText(props) {
-    const { children, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const { children, formControl, identifier, rlsTheme } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            focused: formControl?.focused && !disabled,
-            error: formControl?.wrong,
             disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
             readonly: props.readOnly
         }, 'rls-field-text');
     }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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 }))] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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 }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
 function useFormToggleController({ disabled, formControl }) {