@rolster/react-components 18.23.9 → 18.23.11

package/dist/cjs/assets/{index-SyKruNt7.css → index-9GIW7Ggg.css}

@@ -94,13 +94,20 @@
   width: auto;
   padding: var(--rlc-badge-padding, var(--rls-sizing-x2));
   box-sizing: border-box;
-  font-size: var(--rls-caption-font-size);
-  letter-spacing: var(--rls-caption-letter-spacing);
-  line-height: var(--rls-caption-line-height);
+  font-size: var(--rlc-badge-font-size, var(--rls-caption-font-size));
+  letter-spacing: var(
+    --rlc-badge-letter-spacing,
+    var(--rls-caption-letter-spacing)
+  );
+  line-height: var(--rlc-badge-line-height, var(--rls-caption-line-height));
   color: var(--rls-theme-color-100);
   background: var(--rls-theme-color-500);
   border-radius: var(--rls-sizing-x2);
 }
+.rls-badge--contrast {
+  background: var(--rls-theme-color-100);
+  color: var(--rls-theme-color-700);
+}
 .rls-badge > span {
   font-size: inherit;
   letter-spacing: inherit;
@@ -705,6 +712,12 @@
   opacity: 0.5;
 } /*# sourceMappingURL=InputPassword.css.map */
 
+.rls-input-percentage {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+} /*# sourceMappingURL=InputPercentage.css.map */
+
 .rls-input-search {
   --rlc-input-height: var(--rls-sizing-x14);
   position: relative;
@@ -1251,6 +1264,13 @@
   z-index: 2;
 } /*# sourceMappingURL=FieldPassword.css.map */
 
+.rls-field-percentage {
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+} /*# sourceMappingURL=FieldPercentage.css.map */
+
 .rls-field-readonly {
   --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
   --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));

package/dist/cjs/index.js

@@ -1395,8 +1395,11 @@ function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
-function RlsBadge({ children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-badge", "rls-theme": rlsTheme, children: children }));
+function RlsBadge({ children, contrast, rlsTheme }) {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-badge', { contrast });
+    }, [contrast]);
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
 function RlsBreadcrumbLabel({ label }) {
@@ -1565,6 +1568,16 @@ function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDow
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, children: jsxRuntimeExports.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type ?? 'password', placeholder: placeholder, disabled: disabled, readOnly: readOnly, onFocus: _onFocus, onBlur: _onBlur, onChange: _onChange, onKeyDown: _onKeyDown, onKeyUp: _onKeyUp }) }));
 }
 
+function RlsInputPercentage(props) {
+    const { formControl, identifier, onValue, value } = props;
+    const [valueInput, setValueInput] = require$$0.useState(formControl?.value ?? value ?? 0);
+    const onValueInput = require$$0.useCallback((value) => {
+        !formControl && setValueInput(value);
+        onValue && onValue(value);
+    }, [formControl, onValue]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-percentage", children: jsxRuntimeExports.jsxs(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: [formControl?.value ?? valueInput, "%"] }) }));
+}
+
 function RlsInputSearch({ formControl, identifier, onEnter, onSearch, placeholder }) {
     const [value, setValue] = require$$0.useState('');
     const onValue = require$$0.useCallback((value) => {
@@ -1862,6 +1875,24 @@ function RlsFieldPassword(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.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 }))] }));
 }
 
+function RlsFieldPercentage(props) {
+    const { children, disabled, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const className = require$$0.useMemo(() => {
+        const _disabled = formControl?.disabled || disabled;
+        return renderClassStatus('rls-field-box', {
+            focused: formControl?.focused && !_disabled,
+            error: formControl?.wrong,
+            disabled: _disabled
+        }, 'rls-field-percentage');
+    }, [
+        formControl?.focused,
+        formControl?.wrong,
+        formControl?.disabled,
+        disabled
+    ]);
+    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(RlsInputPercentage, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+}
+
 function RlsFieldReadonly({ children, identifier, rlsTheme, value }) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-readonly rls-field-box", "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("input", { className: "rls-input__component", autoComplete: "off", type: 'text', readOnly: true, value: value }) }) })] }));
 }
@@ -2694,7 +2725,7 @@ function useFieldAutocomplete(props) {
         else {
             controller.setFormValue(element);
         }
-        if (props.selectionContinuos) {
+        if (props.keepOpen) {
             setPattern('');
             controller.refInput?.current?.focus();
         }
@@ -2706,7 +2737,7 @@ function useFieldAutocomplete(props) {
         controller.setState,
         controller.setFormValue,
         setPattern,
-        props.selectionContinuos,
+        props.keepOpen,
         props.onSelect,
         props.onValue
     ]);
@@ -3759,6 +3790,7 @@ exports.RlsFieldDateRange = RlsFieldDateRange;
 exports.RlsFieldMoney = RlsFieldMoney;
 exports.RlsFieldNumber = RlsFieldNumber;
 exports.RlsFieldPassword = RlsFieldPassword;
+exports.RlsFieldPercentage = RlsFieldPercentage;
 exports.RlsFieldReadonly = RlsFieldReadonly;
 exports.RlsFieldSelect = RlsFieldSelect;
 exports.RlsFieldSelectTemplate = RlsFieldSelectTemplate;
@@ -3772,6 +3804,7 @@ exports.RlsInput = RlsInput;
 exports.RlsInputMoney = RlsInputMoney;
 exports.RlsInputNumber = RlsInputNumber;
 exports.RlsInputPassword = RlsInputPassword;
+exports.RlsInputPercentage = RlsInputPercentage;
 exports.RlsInputSearch = RlsInputSearch;
 exports.RlsInputText = RlsInputText;
 exports.RlsLabel = RlsLabel;