@rolster/react-components 19.1.7 → 19.1.9

package/dist/es/assets/{index-BUZg9poi.css → index-CoA-HvvU.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);
@@ -117,7 +119,7 @@
   height: var(--pvt-dimension);
   line-height: var(--pvt-dimension);
   padding: var(--rlc-badge-padding, 0rem var(--rls-sizing-x2));
-  box-sizing: var(--rlc-badge-border-sizing, border-box);
+  box-sizing: var(--rlc-badge-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));
   text-align: center;
@@ -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: inherit;
+  --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: inherit;
+  --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,6 +1511,10 @@
 
 .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)
+  );
   --rlc-checkbox-dimension: var(--pvt-dimension);
   --rlc-checkbox-cursor: pointer;
   --rlc-ballot-padding: 0rem;
@@ -1544,7 +1546,7 @@
 }
 .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);
@@ -1565,6 +1567,10 @@
     --rlc-label-radiobutton-dimension,
     var(--rls-sizing-x12)
   );
+  --pvt-label-font-size: var(
+    --rlc-label-radiobutton-font-size,
+    var(--rls-label-font-size)
+  );
   --rlc-radiobutton-dimension: var(--pvt-dimension);
   --rlc-radiobutton-cursor: pointer;
   --rlc-ballot-padding: 0rem;
@@ -1596,7 +1602,7 @@
 }
 .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);
@@ -1615,6 +1621,10 @@
 .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-text-opacity: 1;
   --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
@@ -1638,12 +1648,12 @@
   --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);
@@ -1894,16 +1904,16 @@
   padding: var(--rls-sizing-x1);
   box-sizing: border-box;
 }
-.rls-picker-day-range__element--end {
-  --pvt-span-nothover-background: var(--rls-app-color-900);
-  --pvt-span-nothover-font-color: var(--rls-app-color-050);
+.rls-picker-day-range__element--ranged {
+  --pvt-span-nothover-background: var(--rls-theme-color-100);
 }
 .rls-picker-day-range__element--source {
   --pvt-span-nothover-background: var(--rls-theme-color-500);
   --pvt-span-nothover-font-color: var(--rls-app-color-050);
 }
-.rls-picker-day-range__element--ranged {
-  --pvt-span-nothover-background: var(--rls-theme-color-100);
+.rls-picker-day-range__element--end {
+  --pvt-span-nothover-background: var(--rls-app-color-900);
+  --pvt-span-nothover-font-color: var(--rls-app-color-050);
 }
 .rls-picker-day-range__element--forbidden {
   --pvt-span-background: var(--rls-app-color-200);

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 }) {