@rolster/react-components 18.26.1 → 18.26.3

package/dist/cjs/assets/{index-Ds0DvsiS.css → index-D9onGyQ8.css}

@@ -224,7 +224,7 @@
   --pvt-outline-background: var(--rls-app-color-050);
   --pvt-outline-font-color: var(--rls-app-color-500);
   --pvt-outline-border: var(--rls-app-border-1-300);
-  --pvt-flat-background: var(--rls-theme-color-050);
+  --pvt-flat-background: var(--rls-theme-color-100);
   --pvt-flat-font-color: var(--rls-theme-color-500);
   --pvt-flat-border: none;
   --pvt-stroked-background: var(--rls-app-color-050);
@@ -310,7 +310,7 @@
   height: var(--rls-sizing-x20);
   padding: var(--rlc-button-content-padding, 0rem var(--rls-sizing-x4));
   box-sizing: border-box;
-  border-radius: var(--rlc-button-content-radius, var(--rls-sizing-x4));
+  border-radius: var(--rlc-button-content-radius, var(--rls-sizing-x2));
   box-shadow: var(--pvt-button-content-box-shadow);
   color: var(--pvt-button-content-font-color);
   border: var(--pvt-button-content-border);
@@ -525,7 +525,7 @@
 .rls-checkbox--checked {
   --rlc-icon-color: var(--rls-app-color-050);
   --pvt-component-background: var(--rls-theme-color-200);
-  background: var(--rls-theme-color-500);
+  background: var(--rls-theme-gradient-500);
   border: var(--rls-theme-border-1-500);
 }
 .rls-checkbox--disabled {
@@ -965,7 +965,7 @@
   cursor: var(--rlc-radiobutton-cursor, initial);
 }
 .rls-radiobutton--checked {
-  --pvt-component-background: var(--rls-app-color-050);
+  --pvt-component-background: var(--rls-app-gradient-050);
   background: var(--rls-theme-color-500);
   border: var(--rls-theme-border-1-500);
 }
@@ -1037,7 +1037,7 @@
   --pvt-element-radius: var(--rls-sizing-x4);
 }
 .rls-switch--checked {
-  --pvt-component-background: var(--rls-theme-color-500);
+  --pvt-component-background: var(--rls-theme-gradient-500);
   --pvt-element-left: calc(
     100% - var(--pvt-element-width) - var(--rls-sizing-x2)
   );
@@ -1074,7 +1074,7 @@
 .rls-alert {
   --pvt-icon-background: var(--rls-app-color-600);
   --pvt-icon-color: var(--rls-app-color-050);
-  --pvt-content-font-color: var(--rls-app-color-700);
+  --pvt-content-font-color: var(--rls-app-color-500);
   position: relative;
   display: flex;
   column-gap: var(--rls-sizing-x6);
@@ -1152,7 +1152,7 @@
   display: flex;
   overflow: hidden;
   flex-direction: column;
-  row-gap: var(--rlc-ballot-component-row-gap, var(--rls-sizing-x2));
+  row-gap: var(--rlc-ballot-component-row-gap, var(--rls-sizing-x1));
 }
 .rls-ballot .rls-avatar + .rls-ballot__component {
   width: calc(100% - var(--rlc-avatar-width) - var(--rls-sizing-x4));
@@ -1185,10 +1185,10 @@
   );
   position: relative;
   width: var(--rlc-ballot-subtitle-width, 100%);
-  color: var(--rls-app-color-600);
+  color: var(--rls-app-color-500);
   font-weight: var(
     --rlc-ballot-subtitle-font-weight,
-    var(--rls-font-weight-semibold)
+    var(--rls-font-weight-medium)
   );
   font-size: var(--rls-ballot-subtitle-font-size);
   letter-spacing: var(--pvt-subtitle-letter-spacing);
@@ -1353,7 +1353,8 @@
 } /*# sourceMappingURL=FieldText.css.map */
 
 .rls-label-checkbox {
-  --rlc-switch-cursor: pointer;
+  --rlc-checkbox-cursor: pointer;
+  --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
   --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
@@ -1384,7 +1385,7 @@
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
   line-height: var(--pvt-text-height);
-  color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-600));
+  color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -1396,7 +1397,8 @@
 } /*# sourceMappingURL=LabelCheckBox.css.map */
 
 .rls-label-radiobutton {
-  --rlc-switch-cursor: pointer;
+  --rlc-radiobutton-cursor: pointer;
+  --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
   --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
@@ -1427,7 +1429,7 @@
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
   line-height: var(--pvt-text-height);
-  color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-600));
+  color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -1440,6 +1442,7 @@
 
 .rls-label-switch {
   --rlc-switch-cursor: pointer;
+  --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
   --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
@@ -1470,7 +1473,7 @@
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
   line-height: var(--pvt-text-height);
-  color: var(--rlc-label-switch-font-color, var(--rls-app-color-600));
+  color: var(--rlc-label-switch-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -2001,6 +2004,46 @@
   transition: left 200ms 0ms var(--rls-standard-curve);
 } /*# sourceMappingURL=Slider.css.map */
 
+.rls-tabs {
+  --pvt-background: var(--rls-app-color-100);
+  --pvt-border: var(--rls-app-border-1-200);
+  --pvt-children-font-color: var(--rls-app-color-700);
+  display: flex;
+  background: var(--pvt-background);
+  padding: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x4);
+  border: var(--pvt-border);
+}
+.rls-tabs__children {
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  border-radius: var(--rls-sizing-x4);
+  color: var(--rls-app-color-500);
+  font-size: var(--rls-smalltext-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-smalltext-letter-spacing);
+  text-align: center;
+  cursor: pointer;
+  transition: all 240ms var(--rls-standard-curve);
+}
+.rls-tabs__children--active {
+  color: var(--pvt-children-font-color);
+  font-weight: var(--rls-font-weight-semibold);
+  background: var(--rls-app-color-050);
+}
+.rls-tabs__children--disabled {
+  color: var(--rls-app-color-400);
+  font-weight: var(--rls-font-weight-regular);
+  background: rgba(0, 0, 0, 0);
+  cursor: not-allowed;
+}
+.rls-tabs[rls-theme] {
+  --pvt-background: var(--rls-theme-color-050);
+  --pvt-border: var(--rls-theme-border-1-200);
+  --pvt-children-font-color: var(--rls-theme-color-600);
+} /*# sourceMappingURL=Tabs.css.map */
+
 .rls-toolbar {
   display: flex;
   justify-content: space-between;
@@ -2197,7 +2240,7 @@
   position: absolute;
   display: flex;
   width: calc(100% - var(--rls-sizing-x16));
-  max-width: 280rem;
+  max-width: 180rem;
   height: var(--pvt-component-height);
   flex-direction: column;
   row-gap: var(--rls-sizing-x8);
@@ -2263,13 +2306,14 @@
 .rls-confirmation__footer {
   position: relative;
   width: 100%;
-  padding: var(--rls-sizing-x4) var(--rls-sizing-x8) 0rem var(--rls-sizing-x8);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x12) 0rem var(--rls-sizing-x12);
   box-sizing: border-box;
 }
 .rls-confirmation__actions {
+  --rlc-button-width: 100%;
   position: relative;
-  width: 100%;
   display: flex;
+  width: 100%;
   flex-direction: row-reverse;
   justify-content: center;
   column-gap: var(--rls-sizing-x8);

package/dist/cjs/index.js

@@ -1648,7 +1648,7 @@ function RlsRadioButton({ checked, disabled, identifier, rlsTheme, onClick }) {
 }
 
 function RlsSkeletonText({ active, children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("label", { className: "rls-skeleton-text__value", children: children })) }));
+    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
 }
 
 function RlsSwitch({ checked, capsule, disabled, identifier, onClick, rlsTheme }) {
@@ -2436,6 +2436,33 @@ function RlsSlider(props) {
     return (jsxRuntimeExports.jsxs("div", { className: className, children: [props.children && (jsxRuntimeExports.jsx("span", { className: "rls-slider__label", children: props.children })), jsxRuntimeExports.jsxs("div", { className: "rls-slider__body", children: [props.prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: props.prefixIcon }), jsxRuntimeExports.jsxs("div", { ref: refComponent, className: "rls-slider__component", children: [jsxRuntimeExports.jsx("div", { ref: refTrack, className: "rls-slider__track", onClick: onClickTrack, children: jsxRuntimeExports.jsx("div", { ref: refTrackOn, className: "rls-slider__track__on" }) }), jsxRuntimeExports.jsxs("div", { ref: refThumb, className: "rls-slider__thumb", children: [rate, "%"] })] })] })] }));
 }
 
+function RlsTab({ onSelect, tab, value }) {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-tabs__children', {
+            active: tab.value === value,
+            disabled: tab.disabled
+        });
+    }, [value, tab.disabled]);
+    const onClick = require$$0.useCallback(() => {
+        !tab.disabled && onSelect(tab.value);
+    }, [tab.disabled]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
+}
+function RlsTabs({ tabs, onValue, rlsTheme }) {
+    const [value, setValue] = require$$0.useState();
+    const onSelect = require$$0.useCallback((value) => {
+        setValue(value);
+        onValue && onValue(value);
+    }, [onValue]);
+    require$$0.useEffect(() => {
+        const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
+        initial && onSelect(initial.value);
+    }, []);
+    return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
+            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, value: value, onSelect: onSelect }, index));
+        }) }));
+}
+
 function RlsToolbar({ actions, children, subtitle }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-toolbar", children: [jsxRuntimeExports.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntimeExports.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntimeExports.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntimeExports.jsx("div", { children: action }, index))) }))] }));
 }
@@ -2987,7 +3014,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
                 value
             });
     }, [formControl, value, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "outline", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
 }
 
 function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
@@ -3112,7 +3139,7 @@ function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, m
         formControl?.setValue(value);
         onListener && onListener({ event: components.PickerListenerEvent.Select, value });
     }, [formControl, value, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "outline", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
 }
 
 function RlsFieldDateRange({ children, date: _date, disabled, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
@@ -3945,6 +3972,7 @@ exports.RlsSlider = RlsSlider;
 exports.RlsSnackbar = RlsSnackbar;
 exports.RlsSwitch = RlsSwitch;
 exports.RlsSwitchControl = RlsSwitchControl;
+exports.RlsTabs = RlsTabs;
 exports.RlsTabularText = RlsTabularText;
 exports.RlsToolbar = RlsToolbar;
 exports.calculateImgDimension = calculateImgDimension;