@rolster/react-components 18.24.4 → 18.24.6

package/dist/cjs/assets/{index-CHKvQAp7.css → index-CtqvRNNR.css}

@@ -276,7 +276,7 @@
   --pvt-classic-font-color: var(--rls-app-color-400);
   --pvt-classic-border: none;
   --pvt-raised-background: var(--rls-theme-color-200);
-  --pvt-raised-font-color: var(--rls-theme-color-400);
+  --pvt-raised-font-color: var(--rls-theme-color-050);
   --pvt-raised-border: none;
   --pvt-flat-background: var(--rls-theme-color-100);
   --pvt-flat-font-color: var(--rls-theme-color-300);
@@ -1930,6 +1930,61 @@
   align-items: center;
 } /*# sourceMappingURL=Toolbar.css.map */
 
+.rls-bottom-sheet {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  position: fixed;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+}
+.rls-bottom-sheet--visible {
+  --pvt-component-visibility: visible;
+  --pvt-component-height: auto;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: translateY(0) scale(1);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
+}
+.rls-bottom-sheet__component {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  max-width: 240rem;
+  max-height: 75%;
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  z-index: var(--rls-z-index-2);
+  border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
+  background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
+  transform: var(--pvt-component-transform);
+  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
+    transform 125ms 0ms var(--rls-deceleration-curve),
+    visibility 125ms 0ms var(--rls-deceleration-curve);
+}
+.rls-bottom-sheet__backdrop {
+  position: absolute;
+  display: block;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: 1;
+  background: var(--rls-theme-backdrop-900);
+  backdrop-filter: blur(2px);
+  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
+} /*# sourceMappingURL=BottomSheet.css.map */
+
 .rls-card {
   --rlc-divider-background: var(--rls-app-color-300);
   --pvt-background: var(--rls-app-color-100);
@@ -2189,9 +2244,6 @@
   align-items: center;
   justify-content: center;
 }
-.rls-modal--overflow {
-  --pvt-component-overflow: initial;
-}
 .rls-modal--visible {
   --pvt-component-visibility: visible;
   --pvt-component-height: auto;
@@ -2209,7 +2261,7 @@
   visibility: var(--pvt-component-visibility);
   z-index: var(--rls-z-index-2);
   border-radius: var(--rls-sizing-x4);
-  background: var(--rls-app-color-050);
+  background: var(--rlc-modal-background, var(--rls-app-color-050));
   transform: var(--pvt-component-transform);
   transition: opacity 125ms 0ms var(--rls-deceleration-curve),
     transform 125ms 0ms var(--rls-deceleration-curve),
@@ -2237,6 +2289,8 @@
   width: 150rem;
   overflow: hidden;
   row-gap: var(--rls-sizing-x4);
+  border-radius: var(--rlc-picker-date-radius, 0rem);
+  background: var(--rlc-picker-date-background, transparent);
 }
 .rls-picker-date__header {
   display: flex;
@@ -2245,7 +2299,6 @@
   padding: var(--rls-sizing-x4);
   box-sizing: border-box;
   background: var(--rls-theme-color-100);
-  border-radius: var(--rls-sizing-x4);
 }
 .rls-picker-date__header .rls-picker-selector-title {
   padding: 0rem var(--rls-sizing-x6);
@@ -2366,7 +2419,10 @@
   margin: 1rem;
 }
 .rls-field-date-modal {
+  --rlc-modal-background: transparent;
   --rlc-modal-max-width: 150rem;
+  --rlc-picker-date-radius: var(--rls-sizing-x4);
+  --rlc-picker-date-background: var(--rls-app-color-050);
 } /*# sourceMappingURL=FieldDate.css.map */
 
 .rls-picker-date-range {
@@ -2376,6 +2432,8 @@
   width: 150rem;
   row-gap: var(--rls-sizing-x4);
   overflow: hidden;
+  border-radius: var(--rlc-picker-date-range-radius, 0rem);
+  background: var(--rlc-picker-date-range-background, transparent);
 }
 .rls-picker-date-range__header {
   background: var(--rls-theme-color-100);
@@ -2502,7 +2560,10 @@
   margin: 1rem;
 }
 .rls-field-date-range-modal {
+  --rlc-modal-background: transparent;
   --rlc-modal-max-width: 150rem;
+  --rlc-picker-date-range-radius: var(--rls-sizing-x4);
+  --rlc-picker-date-range-background: var(--rls-app-color-050);
 } /*# sourceMappingURL=FieldDateRange.css.map */
 
 .rls-field-select {

package/dist/cjs/index.js

@@ -2089,6 +2089,7 @@ function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minD
 }
 
 const DATE_FORMAT = '{dd}/{mx}/{yy}';
+const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
 const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
 
 function RlsPickerDayRangeHeaders() {
@@ -2392,6 +2393,13 @@ 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))) }))] }));
 }
 
+function RlsBottonSheet({ children, className, visible, rlsTheme }) {
+    const classNameSheet = require$$0.useMemo(() => {
+        return renderClassStatus('rls-bottom-sheet', { visible }, className);
+    }, [className, visible]);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameSheet, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__backdrop" })] }), document.body);
+}
+
 function RlsCard({ children, outline, rlsTheme }) {
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-card', { outline });
@@ -2832,14 +2840,13 @@ function RlsFieldAutocomplete(props) {
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
-function RlsModal({ children, className, overflow, visible, rlsTheme }) {
+function RlsModal({ children, className, visible, rlsTheme }) {
     const classNameModal = require$$0.useMemo(() => {
-        return renderClassStatus('rls-modal', { overflow, visible }, className);
-    }, [className, overflow, visible]);
+        return renderClassStatus('rls-modal', { visible }, className);
+    }, [className, visible]);
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
 }
 
-const formatTitle = '{dw}, {mx} {dd} de {aa}';
 function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
     const today = require$$0.useRef(new Date()); // Initial current date in component
     const _date = require$$0.useMemo(() => {
@@ -2863,7 +2870,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         });
     }, [visibility]);
     const title = require$$0.useMemo(() => {
-        return dates.dateFormatTemplate(_date, formatTitle);
+        return dates.dateFormatTemplate(_date, DATE_FORMAT_TITLE);
     }, [_date]);
     const itIsDisabledToday = require$$0.useMemo(() => components.dateOutRange({
         date: today.current,
@@ -3724,23 +3731,27 @@ const RlsContext = require$$0.createContext({
         return Promise.resolve(ConfirmationResult.approved());
     },
     snackbar: () => { },
+    setIsMobile: () => { },
     setNavbarInApp: () => { },
     setNavbarIsCondense: () => { }
 });
 function RlsApplication({ children }) {
     const { RlsConfirmation, confirmation } = useConfirmation();
     const { RlsSnackbar, snackbar } = useSnackbar();
-    const [hasNavbar, setNavbarInApp] = require$$0.useState(false);
+    const [navbarInApp, setNavbarInApp] = require$$0.useState(false);
     const [navbarIsCondense, setNavbarIsCondense] = require$$0.useState(false);
+    const [mobileApp, setIsMobile] = require$$0.useState(false);
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-app__body', {
-            snackbar: hasNavbar,
+            mobile: mobileApp,
+            'navbar-snackbar': navbarInApp,
             'navbar-condense': navbarIsCondense
         });
-    }, [hasNavbar, navbarIsCondense]);
+    }, [mobileApp, navbarInApp, navbarIsCondense]);
     return (jsxRuntimeExports.jsxs(RlsContext.Provider, { value: {
             confirmation,
             snackbar,
+            setIsMobile,
             setNavbarInApp,
             setNavbarIsCondense
         }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
@@ -3776,6 +3787,7 @@ exports.RlsApplication = RlsApplication;
 exports.RlsAvatar = RlsAvatar;
 exports.RlsBadge = RlsBadge;
 exports.RlsBallot = RlsBallot;
+exports.RlsBottonSheet = RlsBottonSheet;
 exports.RlsBreadcrumb = RlsBreadcrumb;
 exports.RlsButton = RlsButton;
 exports.RlsButtonAction = RlsButtonAction;