@rolster/react-components 18.24.3 → 18.24.5

package/dist/es/assets/{index-CHKvQAp7.css → index-Bu13z0o-.css}

@@ -2209,7 +2209,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 +2237,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 +2247,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 +2367,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 +2380,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 +2508,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/es/index.js

@@ -2086,7 +2086,10 @@ function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minD
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [headers, component] }));
 }
 
-const formatRange = '{dd}/{mx}/{aa}';
+const DATE_FORMAT = '{dd}/{mx}/{yy}';
+const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
+const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
+
 function RlsPickerDayRangeHeaders() {
     return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }));
 }
@@ -2144,7 +2147,7 @@ function RlsPickerDayRange({ date: _date, disabled, formControl, maxDate, minDat
         }));
     }, [date, range, minDate, maxDate]);
     const title = useMemo(() => {
-        return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__title", children: dateFormatTemplate(sourceDate.current, formatRange) }));
+        return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__title", children: dateFormatTemplate(sourceDate.current, DATE_FORMAT) }));
     }, [sourceDate.current]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [title, headers, component] }));
 }
@@ -2828,9 +2831,6 @@ function RlsFieldAutocomplete(props) {
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
-const DATE_FORMAT = '{dd}/{mx}/{yy}';
-const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
-
 function RlsModal({ children, className, overflow, visible, rlsTheme }) {
     const classNameModal = useMemo(() => {
         return renderClassStatus('rls-modal', { overflow, visible }, className);
@@ -2838,7 +2838,6 @@ function RlsModal({ children, className, overflow, visible, rlsTheme }) {
     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 = useRef(new Date()); // Initial current date in component
     const _date = useMemo(() => {
@@ -2862,7 +2861,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         });
     }, [visibility]);
     const title = useMemo(() => {
-        return dateFormatTemplate(_date, formatTitle);
+        return dateFormatTemplate(_date, DATE_FORMAT_TITLE);
     }, [_date]);
     const itIsDisabledToday = useMemo(() => dateOutRange({
         date: today.current,
@@ -3723,23 +3722,27 @@ const RlsContext = createContext({
         return Promise.resolve(ConfirmationResult.approved());
     },
     snackbar: () => { },
+    setIsMobile: () => { },
     setNavbarInApp: () => { },
     setNavbarIsCondense: () => { }
 });
 function RlsApplication({ children }) {
     const { RlsConfirmation, confirmation } = useConfirmation();
     const { RlsSnackbar, snackbar } = useSnackbar();
-    const [hasNavbar, setNavbarInApp] = useState(false);
+    const [navbarInApp, setNavbarInApp] = useState(false);
     const [navbarIsCondense, setNavbarIsCondense] = useState(false);
+    const [mobileApp, setIsMobile] = useState(false);
     const className = 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] }));