@rolster/react-components 18.11.5 → 18.12.0

package/dist/cjs/assets/{index-Wm92C1Nd.css → index-c6NHIX56.css}

@@ -14,16 +14,17 @@
   width: var(--rls-tabulartext-pointer-width);
 }
 
-.rls-amount {
+rls-amount {
   display: flex;
   justify-content: var(--rls-amount-text-align);
   column-gap: var(--sizing-x2);
 }
+
 .rls-amount[rls-theme] {
   color: var(--color-rolster-500);
 }
 
-.rls-avatar {
+rls-avatar {
   position: relative;
   display: flex;
   justify-content: center;
@@ -35,15 +36,18 @@
   color: var(--color-light-500);
   border-radius: var(--rls-avatar-border-radius);
 }
+
 .rls-avatar--skeleton {
   background: var(--color-rolster-100);
 }
 .rls-avatar--skeleton > * {
   display: none;
 }
+
 .rls-avatar--rounded {
   border-radius: 50%;
 }
+
 .rls-avatar span {
   font-size: inherit;
   margin: auto;
@@ -1231,6 +1235,8 @@
   height: var(--sizing-x16);
   line-height: var(--sizing-x16);
   border-radius: var(--sizing-x2);
+  font-size: var(--body-font-size);
+  letter-spacing: var(--body-letter-spacing);
 }
 .rls-pagination__page:hover {
   background: var(--color-rolster-300);
@@ -1241,14 +1247,14 @@
   color: var(--color-light-500);
 }
 .rls-pagination__description {
-  color: var(--font-primary-900);
+  color: var(--color-theme-500);
   margin: 0rem var(--sizing-x4);
   width: auto;
   height: var(--sizing-x20);
   line-height: var(--sizing-x20);
-  font-size: var(--body-1-size);
+  font-size: var(--body-font-size);
   font-weight: var(--font-weight-bold);
-  letter-spacing: var(--body-1-letter-spacing);
+  letter-spacing: var(--body-letter-spacing);
 }
 .rls-pagination__actions {
   width: auto;

package/dist/cjs/index.js

@@ -20,7 +20,7 @@ function RlsTabularText({ value }) {
 }
 
 function RlsAmount({ value, decimals, rlsTheme, symbol }) {
-    return (jsxRuntime.jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsxRuntime.jsx("span", { children: symbol }), jsxRuntime.jsx(RlsTabularText, { value: helpersAdvanced.currencyFormat({ value, decimals }) })] }));
+    return (jsxRuntime.jsxs("rls-amount", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsxRuntime.jsx("span", { children: symbol }), jsxRuntime.jsx(RlsTabularText, { value: helpersAdvanced.currencyFormat({ value, decimals }) })] }));
 }
 
 function renderClassStatus(base, status = {}, aditionals) {
@@ -39,7 +39,7 @@ function renderClassStatus(base, status = {}, aditionals) {
 }
 
 function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
-    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-avatar', { rounded, skeleton }), "rls-theme": rlsTheme, children: children }));
+    return (jsxRuntime.jsx("rls-avatar", { className: renderClassStatus('rls-avatar', { rounded, skeleton }), "rls-theme": rlsTheme, children: children }));
 }
 
 function RlsBreadcrumb({ labels }) {
@@ -335,12 +335,12 @@ class DayPickerFactory {
     }
     minOverflowDay(day) {
         return this.minDate
-            ? helpersDate.weight(helpersDate.refactorDay(this.date, day)) < helpersDate.weight(this.minDate)
+            ? helpersDate.weight(helpersDate.assignDay(this.date, day)) < helpersDate.weight(this.minDate)
             : false;
     }
     maxOverflowDay(day) {
         return this.maxDate
-            ? helpersDate.weight(helpersDate.refactorDay(this.date, day)) > helpersDate.weight(this.maxDate)
+            ? helpersDate.weight(helpersDate.assignDay(this.date, day)) > helpersDate.weight(this.maxDate)
             : false;
     }
 }
@@ -385,45 +385,6 @@ function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, mi
 }
 
 const DATE_FORMAT = '{dd}/{mm}/{aa}';
-class ListCollection {
-    constructor(value) {
-        this.value = value;
-    }
-    find(element) {
-        return this.value.find((current) => current.compareTo(element));
-    }
-}
-class DateRange {
-    constructor(minDate, maxDate) {
-        this.minDate = helpersDate.normalizeMinTime(minDate);
-        if (maxDate && helpersDate.isBefore(maxDate, minDate)) {
-            this.maxDate = helpersDate.normalizeMinTime(maxDate);
-        }
-        else {
-            this.maxDate = helpersDate.normalizeMinTime(minDate);
-        }
-        const minFormat = helpersDate.formatDate(this.minDate, DATE_FORMAT);
-        const maxFormat = helpersDate.formatDate(this.maxDate, DATE_FORMAT);
-        this.description = `${minFormat} - ${maxFormat}`;
-    }
-    recalculate(date) {
-        if (helpersDate.isBefore(this.minDate, date)) {
-            return new DateRange(date, this.maxDate);
-        }
-        if (helpersDate.isAfter(this.maxDate, date)) {
-            return new DateRange(this.minDate, date);
-        }
-        const minDifference = helpersDate.timeDifference(date, this.minDate);
-        const maxDifference = helpersDate.timeDifference(this.maxDate, date);
-        return minDifference > maxDifference
-            ? new DateRange(this.minDate, date)
-            : new DateRange(date, this.maxDate);
-    }
-    static now() {
-        return new DateRange(new Date());
-    }
-}
-
 class DateRangePickerFactory {
     constructor(props) {
         const { date, range, maxDate, minDate } = props;
@@ -500,28 +461,33 @@ class DateRangePickerFactory {
             day === date.getDate());
     }
     isRangedFromDate(day) {
-        return helpersDate.isBetween(this.range.minDate, this.range.maxDate, helpersDate.refactorDay(this.date, day));
+        return helpersDate.between(this.range.minDate, this.range.maxDate, helpersDate.assignDay(this.date, day));
     }
     overflowDay(day) {
         return this.minOverflowDay(day) || this.maxOverflowDay(day);
     }
     minOverflowDay(day) {
         return this.minDate
-            ? helpersDate.weight(helpersDate.refactorDay(this.date, day)) < helpersDate.weight(this.minDate)
+            ? helpersDate.weight(helpersDate.assignDay(this.date, day)) < helpersDate.weight(this.minDate)
             : false;
     }
     maxOverflowDay(day) {
         return this.maxDate
-            ? helpersDate.weight(helpersDate.refactorDay(this.date, day)) > helpersDate.weight(this.maxDate)
+            ? helpersDate.weight(helpersDate.assignDay(this.date, day)) > helpersDate.weight(this.maxDate)
             : false;
     }
 }
+function formatRange(range) {
+    const minFormat = helpersDate.formatDate(range.minDate, DATE_FORMAT);
+    const maxFormat = helpersDate.formatDate(range.maxDate, DATE_FORMAT);
+    return `${minFormat} - ${maxFormat}`;
+}
 function createRangePicker(props) {
     return DateRangePickerFactory.execute(props);
 }
 
 function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme }) {
-    const initialRange = formControl?.state || DateRange.now();
+    const initialRange = formControl?.state || helpersDate.DateRange.now();
     const initialDate = helpersDate.normalizeMinTime(date || initialRange.minDate);
     const [weeks, setWeeks] = react.useState([]);
     const [range, setRange] = react.useState(initialRange);
@@ -534,7 +500,7 @@ function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDat
         }));
     }, [range, date, minDate, maxDate]);
     function onChange(value) {
-        const newRange = range.recalculate(helpersDate.refactorDay(initialDate, value));
+        const newRange = range.recalculate(helpersDate.assignDay(initialDate, value));
         setRange(newRange);
         formControl?.setState(newRange);
     }
@@ -1134,6 +1100,15 @@ const reactI18n = i18n.i18n({
     }
 });
 
+class ListCollection {
+    constructor(value) {
+        this.value = value;
+    }
+    find(element) {
+        return this.value.find((current) => current.compareTo(element));
+    }
+}
+
 const classElement = '.rls-list-field__element';
 const MAX_POSITION_VISIBLE = 4;
 const LIST_SIZE_REM = 16;
@@ -1654,11 +1629,7 @@ var PickerListenerType;
 })(PickerListenerType || (PickerListenerType = {}));
 
 function verifyDateRange(date, min, max) {
-    return min && helpersDate.isBefore(min, date)
-        ? min
-        : max && helpersDate.isAfter(max, date)
-            ? max
-            : date;
+    return min && helpersDate.before(min, date) ? min : max && helpersDate.after(max, date) ? max : date;
 }
 
 const FORMAT_DESCRIPTION = '{dw}, {mx} {dd} de {aa}';
@@ -1692,21 +1663,21 @@ function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDat
     react.useEffect(() => {
         setValue((prevValue) => {
             return typeof yearControl.state === 'number'
-                ? verifyDateRange(helpersDate.refactorYear(prevValue, yearControl.state), minDate, maxDate)
+                ? verifyDateRange(helpersDate.assignYear(prevValue, yearControl.state), minDate, maxDate)
                 : prevValue;
         });
     }, [yearControl.state]);
     react.useEffect(() => {
         setValue((prevValue) => {
             return typeof monthControl.state === 'number'
-                ? verifyDateRange(helpersDate.refactorMonth(prevValue, monthControl.state), minDate, maxDate)
+                ? verifyDateRange(helpersDate.assignMonth(prevValue, monthControl.state), minDate, maxDate)
                 : prevValue;
         });
     }, [monthControl.state]);
     react.useEffect(() => {
         setValue((prevValue) => {
             return typeof dayControl.state === 'number'
-                ? verifyDateRange(helpersDate.refactorDay(prevValue, dayControl.state), minDate, maxDate)
+                ? verifyDateRange(helpersDate.assignDay(prevValue, dayControl.state), minDate, maxDate)
                 : prevValue;
         });
     }, [dayControl.state]);
@@ -1815,7 +1786,7 @@ const VISIBILITY = {
 };
 function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, rlsTheme, onListener }) {
     const dateInitial = helpersDate.normalizeMinTime(datePicker || new Date());
-    const rangeInitial = formControl?.state || DateRange.now();
+    const rangeInitial = formControl?.state || helpersDate.DateRange.now();
     const yearControl = useReactControl({ state: dateInitial.getFullYear() });
     const monthControl = useReactControl({ state: dateInitial.getMonth() });
     const dayControl = useReactControl({ state: rangeInitial });
@@ -1825,14 +1796,14 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
     react.useEffect(() => {
         setDate((prevValue) => {
             return typeof yearControl.state === 'number'
-                ? helpersDate.refactorYear(prevValue, yearControl.state)
+                ? helpersDate.assignYear(prevValue, yearControl.state)
                 : prevValue;
         });
     }, [yearControl.state]);
     react.useEffect(() => {
         setDate((prevValue) => {
             return typeof monthControl.state === 'number'
-                ? helpersDate.refactorMonth(prevValue, monthControl.state)
+                ? helpersDate.assignMonth(prevValue, monthControl.state)
                 : prevValue;
         });
     }, [monthControl.state]);
@@ -1862,7 +1833,7 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-date-range-picker__header", children: [jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: value.description }) }), jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsxRuntime.jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: year, type: month ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
+    return (jsxRuntime.jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-date-range-picker__header", children: [jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: formatRange(value) }) }), jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsxRuntime.jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: year, type: month ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
                     year,
                     day,
                     month
@@ -1872,14 +1843,14 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
 }
 
 function RlsDateRangeField({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
-    const rangeInitial = formControl?.state || DateRange.now();
+    const rangeInitial = formControl?.state || helpersDate.DateRange.now();
     const dateInitial = datePicker || new Date();
     const [value, setValue] = react.useState(rangeInitial);
     const [date] = react.useState(dateInitial);
     const [show, setShow] = react.useState(false);
     const [description, setDescription] = react.useState('');
     react.useEffect(() => {
-        setDescription(value?.description || '');
+        setDescription(value ? formatRange(value) : '');
     }, [value]);
     function onClickInput() {
         setShow(true);
@@ -2100,7 +2071,6 @@ function RlsApplication({ children }) {
 }
 
 exports.ConfirmationResult = ConfirmationResult;
-exports.DateRange = DateRange;
 exports.ListCollection = ListCollection;
 exports.RlsAmount = RlsAmount;
 exports.RlsApplication = RlsApplication;