@rolster/react-components 18.15.41 → 18.16.1

package/dist/cjs/assets/{index-DymY06ih.css → index-DVCffPUL.css}

@@ -589,6 +589,8 @@
 }
 
 .rls-poster {
+  --pvt-border-content: none;
+  --pvt-border-color: transparent;
   position: relative;
   display: block;
   width: auto;
@@ -602,15 +604,21 @@
   border-radius: var(--rls-sizing-x2);
   color: var(--rls-app-color-300);
   background: var(--rls-app-background-100);
+  border: var(--pvt-border-content);
 }
 .rls-poster[rls-theme] {
+  --pvt-border-color: var(--rls-theme-color-100);
   color: var(--rls-theme-color-100);
   background: var(--rls-theme-color-500);
 }
 .rls-poster--contrast[rls-theme] {
+  --pvt-border-color: var(--rls-theme-color-500);
   color: var(--rls-theme-color-700);
   background: var(--rls-theme-color-100);
 }
+.rls-poster--outline {
+  --pvt-border-content: 1px solid var(--pvt-border-color);
+}
 
 .rls-progress-bar {
   --pvt-component-display: block;

package/dist/cjs/index.js

@@ -1510,8 +1510,8 @@ function rangeFormatTemplate({ maxDate, minDate }) {
     return `${minFormat} - ${maxFormat}`;
 }
 
-function RlsPoster({ children, contrast, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-poster', { contrast }), "rls-theme": rlsTheme, children: children }));
+function RlsPoster({ children, contrast, outline, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-poster', { contrast, outline }), "rls-theme": rlsTheme, children: children }));
 }
 
 function RlsProgressBar({ indeterminate, percentage, rlsTheme }) {
@@ -1734,17 +1734,17 @@ function RlsPickerDay({ date, disabled: disabledPicker, formControl, maxDate, mo
     const [weeks, setWeeks] = require$$0.useState([]);
     const [value, setValue] = require$$0.useState(formControl?.value || currentDate.getDate());
     require$$0.useEffect(() => {
-        const props = createPickerProps();
-        const day = components.checkDayPicker(props);
-        day ? setDayValue(day) : setWeeks(components.createDayPicker(props));
+        const options = createPickerOptions();
+        const day = components.verifyDayPicker(options);
+        day ? setDayValue(day) : setWeeks(components.createDayPicker(options));
     }, [date, month, year, value, minDate, maxDate]);
     require$$0.useEffect(() => {
-        const day = components.checkDayPicker(createPickerProps());
+        const day = components.verifyDayPicker(createPickerOptions());
         day
             ? formControl?.setValue(day)
             : setValue(formControl?.value || currentDate.getDate());
     }, [formControl?.value]);
-    function createPickerProps() {
+    function createPickerOptions() {
         return {
             date: currentDate,
             day: formControl?.value || value,
@@ -1813,17 +1813,17 @@ function RlsPickerMonth({ date, disabled: disabledPicker, formControl, maxDate,
     const [months, setMonths] = require$$0.useState([]);
     const [value, setValue] = require$$0.useState(formControl?.value || currentDate.getMonth());
     require$$0.useEffect(() => {
-        const props = createPickerProps(); // MonthPickerProps
-        const month = components.checkMonthPicker(props);
-        month ? setMonthValue(month) : setMonths(components.createMonthPicker(props));
+        const options = createPickerOptions(); // MonthPickerProps
+        const month = components.verifyMonthPicker(options);
+        month ? setMonthValue(month) : setMonths(components.createMonthPicker(options));
     }, [date, year, value, minDate, maxDate]);
     require$$0.useEffect(() => {
-        const month = components.checkMonthPicker(createPickerProps());
+        const month = components.verifyMonthPicker(createPickerOptions());
         commons.itIsDefined(month)
             ? formControl?.setValue(month)
             : setValue(formControl?.value || currentDate.getMonth());
     }, [formControl?.value]);
-    function createPickerProps() {
+    function createPickerOptions() {
         return {
             date: currentDate,
             month: commons.itIsDefined(formControl?.value) ? formControl?.value : value,
@@ -1903,21 +1903,21 @@ function RlsPickerYear({ date, disabled: disabledPicker, formControl, maxDate, m
     const currentDate = date || new Date();
     const [value, setValue] = require$$0.useState(formControl?.value || currentDate.getFullYear());
     const [year, setYear] = require$$0.useState(formControl?.value || currentDate.getFullYear());
-    const [template, setTemplate] = require$$0.useState(components.createYearPicker(createPickerProps()));
+    const [template, setTemplate] = require$$0.useState(components.createYearPicker(createPickerOptions()));
     require$$0.useEffect(() => {
-        const props = createPickerProps(); // YearPickerProps
-        const year = components.checkYearPicker(props);
+        const options = createPickerOptions(); // YearPickerProps
+        const year = components.verifyYearPicker(options);
         year
             ? setYearValue(year)
-            : setTemplate(components.createYearPicker(createPickerProps()));
+            : setTemplate(components.createYearPicker(createPickerOptions()));
     }, [date, year, value, minDate, maxDate]);
     require$$0.useEffect(() => {
-        const year = components.checkYearPicker(createPickerProps());
+        const year = components.verifyYearPicker(createPickerOptions());
         commons.itIsDefined(year)
             ? formControl?.setValue(year)
             : setValue(formControl?.value || currentDate.getFullYear());
     }, [formControl?.value]);
-    function createPickerProps() {
+    function createPickerOptions() {
         return {
             date: currentDate,
             year,
@@ -2320,13 +2320,13 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
     const [value, setValue] = require$$0.useState(dateInitial);
     const [visibility, setVisibility] = require$$0.useState('DAY');
     require$$0.useEffect(() => {
-        const dateCheck = components.checkDateRange({
+        const dateRange = components.verifyDateRange({
             date: formControl?.value || date || today,
             minDate,
             maxDate
         });
-        setValue(dateCheck);
-        formControl?.setValue(dateCheck);
+        setValue(dateRange);
+        formControl?.setValue(dateRange);
     }, []);
     require$$0.useEffect(() => {
         commons.itIsDefined(yearControl.value) &&
@@ -2350,18 +2350,18 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         setVisibility('YEAR');
     }
     function onCancel() {
-        onListener && onListener({ type: components.PickerListenerType.Cancel });
+        onListener && onListener({ event: components.PickerListenerEvent.Cancel });
     }
     function onToday() {
         yearControl.setValue(today.getFullYear());
         dayControl.setValue(today.getDate());
         monthControl.setValue(today.getMonth());
         formControl?.setValue(today);
-        onListener && onListener({ type: components.PickerListenerType.Now, value: today });
+        onListener && onListener({ event: components.PickerListenerEvent.Now, value: today });
     }
     function onSelect() {
         formControl?.setValue(value);
-        onListener && onListener({ type: components.PickerListenerType.Select, value });
+        onListener && onListener({ event: components.PickerListenerEvent.Select, value });
     }
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: dates.dateFormatTemplate(dateInitial, FORMAT_TITLE) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-picker-date__component', {
                     day: visibility === 'DAY',
@@ -2376,13 +2376,13 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
     const [value, setValue] = require$$0.useState(formControl?.value || defaultValue);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
     require$$0.useEffect(() => {
-        const dateCheck = components.checkDateRange({
+        const dateRange = components.verifyDateRange({
             date: formControl?.value || date || today,
             minDate,
             maxDate
         });
-        setValue(dateCheck);
-        formControl?.setValue(dateCheck);
+        setValue(dateRange);
+        formControl?.setValue(dateRange);
     }, []);
     function onChange(value) {
         setValue(value);
@@ -2404,8 +2404,8 @@ function RlsFieldDate({ children, date, disabled, formControl, format, maxDate,
     const valueInput = value
         ? dates.dateFormatTemplate(value, format || FORMAT_DATE)
         : '';
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), 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("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
-                        type !== components.PickerListenerType.Cancel && onChange(value);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), 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("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
+                        event !== components.PickerListenerEvent.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
                     } }) })] }));
@@ -2448,11 +2448,11 @@ function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl
         setVisibility('YEAR');
     }
     function onCancel() {
-        onListener && onListener({ type: components.PickerListenerType.Cancel });
+        onListener && onListener({ event: components.PickerListenerEvent.Cancel });
     }
     function onSelect() {
         formControl?.setValue(value);
-        onListener && onListener({ type: components.PickerListenerType.Select, value });
+        onListener && onListener({ event: components.PickerListenerEvent.Select, value });
     }
     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("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-picker-date-range__component', {
                     day: visibility === 'DAY',
@@ -2484,8 +2484,8 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
         setValue(value);
         onValue && onValue(value);
     }
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), 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("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ type, value }) => {
-                        type !== components.PickerListenerType.Cancel && onChange(value);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), 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("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ event, value }) => {
+                        event !== components.PickerListenerEvent.Cancel && onChange(value);
                         formControl?.touch();
                         setModalIsVisible(false);
                     } }) })] }));