@rolster/react-components 18.24.10 → 18.25.0

package/dist/es/assets/{index-DifHthQZ.css → index-A_JkPXhq.css}

@@ -1433,30 +1433,43 @@
 } /*# sourceMappingURL=LabelSwitch.css.map */
 
 .rls-pagination {
+  --pvt-dimension: var(--rlc-pagination-dimension, var(--rls-sizing-x16));
+  --pvt-description-display: block;
+  --pvt-count-display: none;
   position: relative;
   display: flex;
-  justify-content: center;
   width: 100%;
+  column-gap: var(--rlc-pagination-column-gap, var(--rls-sizing-x4));
+  justify-content: center;
+  align-items: center;
   overflow: hidden;
-  height: var(--rls-sizing-x20);
-  padding: 0rem var(--rls-sizing-x6);
+  height: var(
+    --rlc-pagination-height,
+    calc(var(--pvt-dimension) + var(--rls-sizing-x4))
+  );
+  padding: var(--rlc-pagination-padding, 0rem var(--rls-sizing-x6));
   box-sizing: border-box;
 }
+.rls-pagination__body {
+  display: flex;
+  width: auto;
+  column-gap: var(--rls-sizing-x8);
+  align-items: center;
+}
 .rls-pagination__pages {
   display: flex;
-  gap: var(--rls-sizing-x4);
   width: auto;
-  margin: 0rem var(--rls-sizing-x4);
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
 }
 .rls-pagination__page {
   background: var(--rls-app-color-200);
   color: var(--rls-app-color-900);
   cursor: default;
-  margin: auto 0rem;
   text-align: center;
-  width: var(--rls-sizing-x16);
-  height: var(--rls-sizing-x16);
-  line-height: var(--rls-sizing-x16);
+  width: var(--pvt-dimension);
+  height: var(--pvt-dimension);
+  line-height: var(--pvt-dimension);
   border-radius: var(--rls-sizing-x2);
   font-size: var(--rls-body-font-size);
   letter-spacing: var(--rls-body-letter-spacing);
@@ -1470,26 +1483,31 @@
   color: var(--rls-app-color-050);
 }
 .rls-pagination__description {
-  color: var(--rls-app-color-900);
-  margin: 0rem var(--rls-sizing-x4);
+  display: var(--pvt-description-display);
   width: auto;
-  height: var(--rls-sizing-x20);
-  line-height: var(--rls-sizing-x20);
   font-size: var(--rls-body-font-size);
   font-weight: var(--rls-font-weight-bold);
   letter-spacing: var(--rls-body-letter-spacing);
+  color: var(--rls-app-color-900);
+}
+.rls-pagination__count {
+  display: var(--pvt-count-display);
+  font-size: var(--rls-body-font-size);
+  font-weight: var(--rls-font-weight-bold);
+  letter-spacing: var(--rls-body-letter-spacing);
+  color: var(--rls-app-color-900);
 }
 .rls-pagination__actions {
+  display: flex;
   width: auto;
+  column-gap: var(--rls-sizing-x2);
 }
 .rls-pagination__action {
+  --rlc-icon-dimension: calc(var(--pvt-dimension) - var(--rls-sizing-x4));
   background: none;
   outline: none;
   color: var(--rls-app-color-600);
-  height: var(--rls-sizing-x18);
-  width: var(--rls-sizing-x18);
-  padding: var(--rls-sizing-x3);
-  margin: var(--rls-sizing-x1) 0rem;
+  padding: var(--rls-sizing-x2);
 }
 .rls-pagination__action:hover {
   color: var(--rls-theme-color-300);
@@ -1498,6 +1516,13 @@
 .rls-pagination__action:disabled {
   pointer-events: none;
   opacity: 0.5;
+}
+@media screen and (max-width: 640px) {
+  .rls-pagination {
+    --pvt-description-display: none;
+    --pvt-count-display: block;
+    padding: 0rem;
+  }
 } /*# sourceMappingURL=Pagination.css.map */
 
 .rls-picker-day {
@@ -1938,6 +1963,7 @@
 .rls-bottom-sheet {
   --pvt-component-transform: translateY(100%);
   --pvt-component-height: 0rem;
+  --pvt-component-max-height: 75%;
   --pvt-component-opacity: 0;
   --pvt-component-visibility: hidden;
   --pvt-backdrop-opacity: 0;
@@ -1965,7 +1991,7 @@
   bottom: 0px;
   width: 100%;
   max-width: 240rem;
-  max-height: 75%;
+  max-height: var(--pvt-component-max-height);
   flex-direction: column;
   opacity: var(--pvt-component-opacity);
   visibility: var(--pvt-component-visibility);
@@ -1983,7 +2009,7 @@
   width: var(--rls-sizing-x24);
   height: var(--rls-sizing-x2);
   border-radius: var(--rls-sizing-x2);
-  background: var(--rls-app-color-600);
+  background: var(--rls-app-color-300);
   margin: var(--rls-sizing-x3) auto;
 }
 .rls-bottom-sheet__backdrop {
@@ -1999,6 +2025,16 @@
   backdrop-filter: blur(2px);
   transition: opacity 120ms 0ms var(--rls-deceleration-curve),
     bottom 120ms 0ms var(--rls-deceleration-curve);
+}
+@media screen and (max-height: 960px) {
+  .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 48rem);
+  }
+}
+@media screen and (max-height: 720px) {
+  .rls-bottom-sheet {
+    --pvt-component-max-height: calc(100% - 32rem);
+  }
 } /*# sourceMappingURL=BottomSheet.css.map */
 
 .rls-card {

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import require$$0, { useMemo, useCallback, useState, useRef, useEffect, createContext } from 'react';
-import { currencyFormat, itIsDefined, PartialSealed } from '@rolster/commons';
+import { currencyFormat, valueIsDefined, PartialSealed } from '@rolster/commons';
 import { i18n, i18nSubscribe } from '@rolster/i18n';
 import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, locationListCanTop, navigationListFromInput, navigationListFromElement, createAutocompleteStore, dateOutRange, verifyDateRange, PickerListenerEvent } from '@rolster/components';
 import { DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, dateFormatTemplate, MONTH_NAMES, Month, assignYearInDate, assignMonthInDate } from '@rolster/dates';
@@ -2019,13 +2019,13 @@ function RlsPagination({ suggestions, count, filter, onPagination }) {
     const goLastPagination = useCallback(() => {
         refreshPagination(controller.current?.goLastPage());
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-pagination", children: [jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-left" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__pages", children: template?.pages.map((page, index) => {
-                    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-pagination__page', {
-                            active: page.active
-                        }), onClick: () => {
-                            goToPagination(page);
-                        }, children: page.label }, index));
-                }) }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__description", children: template?.description }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-pagination", children: [jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-left" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: template?.firstPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__body", children: [jsxRuntimeExports.jsx("div", { className: "rls-pagination__pages", children: template?.pages.map((page, index) => {
+                            return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-pagination__page', {
+                                    active: page.active
+                                }), onClick: () => {
+                                    goToPagination(page);
+                                }, children: page.label }, index));
+                        }) }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__description", children: template?.description }), jsxRuntimeExports.jsx("span", { className: "rls-pagination__count", children: suggestions.length })] }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
 }
 
 function RlsPickerDayHeaders() {
@@ -2179,7 +2179,7 @@ function RlsPickerMonthElement({ month, onSelect, disabled }) {
         });
     }, [month.disabled, month.focused, month.selected, disabled]);
     const onClick = useCallback(() => {
-        itIsDefined(month.value) &&
+        valueIsDefined(month.value) &&
             !month.disabled &&
             !disabled &&
             onSelect(month.value);
@@ -2210,7 +2210,7 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
             maxDate
         };
         const month = verifyMonthPicker(options);
-        itIsDefined(month)
+        valueIsDefined(month)
             ? setMonthValue(month)
             : setMonths(createMonthPicker(options));
     }, [date, year, value, minDate, maxDate]);
@@ -2222,7 +2222,7 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
             minDate,
             maxDate
         });
-        itIsDefined(month)
+        valueIsDefined(month)
             ? formControl?.setValue(month)
             : setValue(formControl?.value ?? date.getMonth());
     }, [formControl?.value]);
@@ -2248,7 +2248,8 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
         setLabel(MONTH_NAMES(monthControl.value ?? Month.January));
     }, [monthControl.value]);
     const onPreviousMonth = useCallback(() => {
-        if (itIsDefined(monthControl.value) && itIsDefined(yearControl.value)) {
+        if (valueIsDefined(monthControl.value) &&
+            valueIsDefined(yearControl.value)) {
             if (monthControl.value > Month.January) {
                 monthControl.setValue(monthControl.value - 1);
             }
@@ -2259,14 +2260,15 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
         }
     }, [monthControl.value, yearControl.value]);
     const onPreviousYear = useCallback(() => {
-        itIsDefined(yearControl.value) &&
+        valueIsDefined(yearControl.value) &&
             yearControl.setValue(yearControl.value - 1);
     }, [yearControl.value]);
     const onPrevious = useCallback(() => {
         type === 'month' ? onPreviousMonth() : onPreviousYear();
     }, [type, onPreviousMonth, onPreviousYear]);
     const onNextMonth = useCallback(() => {
-        if (itIsDefined(monthControl.value) && itIsDefined(yearControl.value)) {
+        if (valueIsDefined(monthControl.value) &&
+            valueIsDefined(yearControl.value)) {
             if (monthControl.value < Month.December) {
                 monthControl.setValue(monthControl.value + 1);
             }
@@ -2277,7 +2279,7 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
         }
     }, [monthControl.value, yearControl.value]);
     const onNextYear = useCallback(() => {
-        itIsDefined(yearControl.value) &&
+        valueIsDefined(yearControl.value) &&
             yearControl.setValue(yearControl.value + 1);
     }, [yearControl.value]);
     const onNext = useCallback(() => {
@@ -2331,7 +2333,7 @@ function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, o
     }, [template.years, onSelect, disabled]);
     useEffect(() => {
         const year = verifyYearPicker(createPickerOptions());
-        itIsDefined(year)
+        valueIsDefined(year)
             ? formControl?.setValue(year)
             : setValue(formControl?.value ?? date.getFullYear());
     }, [formControl?.value]);
@@ -3038,14 +3040,14 @@ function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, m
     }, []);
     useEffect(() => {
         setDate((date) => {
-            return itIsDefined(yearControl.value)
+            return valueIsDefined(yearControl.value)
                 ? assignYearInDate(date, yearControl.value)
                 : date;
         });
     }, [yearControl.value]);
     useEffect(() => {
         setDate((date) => {
-            return itIsDefined(monthControl.value)
+            return valueIsDefined(monthControl.value)
                 ? assignMonthInDate(date, monthControl.value)
                 : date;
         });