@rolster/react-components 18.24.9 → 18.24.11

package/dist/es/assets/{index-Jhih2qiU.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;
@@ -1961,10 +1987,12 @@
 }
 .rls-bottom-sheet__component {
   position: absolute;
+  display: flex;
   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);
   z-index: var(--rls-z-index-2);
@@ -1975,6 +2003,15 @@
     transform 240ms 0ms var(--rls-deceleration-curve),
     visibility 240ms 0ms var(--rls-deceleration-curve);
 }
+.rls-bottom-sheet__component::before {
+  display: block;
+  content: '';
+  width: var(--rls-sizing-x24);
+  height: var(--rls-sizing-x2);
+  border-radius: var(--rls-sizing-x2);
+  background: var(--rls-app-color-300);
+  margin: var(--rls-sizing-x3) auto;
+}
 .rls-bottom-sheet__backdrop {
   position: absolute;
   display: block;
@@ -1988,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

@@ -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() {