@lets-events/react 12.11.2 → 12.11.3

package/.eslintrc.json

@@ -1,3 +1,3 @@
-{
-  "extends": "@lets-events/eslint-config"
+{
+  "extends": "@lets-events/eslint-config"
 }

package/.turbo/turbo-build.log

@@ -1,21 +1,24 @@
-
-
-> @lets-events/react@12.11.2 build
-> tsup src/index.tsx  --format esm,cjs --dts --external react
-
-CLI Building entry: src/index.tsx
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.5.0
-CLI Using tsup config: /home/bia3003/Lets/design-system/packages/react/tsup.config.ts
-CLI Target: es6
-ESM Build start
-CJS Build start
-CJS dist/index.js 438.04 KB
-CJS ⚡️ Build success in 304ms
-ESM dist/index.mjs 421.97 KB
-ESM ⚡️ Build success in 306ms
-DTS Build start
-DTS ⚡️ Build success in 6512ms
-DTS dist/index.d.mts 411.19 KB
-DTS dist/index.d.ts  411.19 KB
-⠙
+
+> @lets-events/react@12.11.3 build
+> tsup src/index.tsx  --format esm,cjs --dts --external react
+
+CLI Building entry: src/index.tsx
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: C:\Users\Cazuza\Desktop\Web\design-system\packages\react\tsup.config.ts
+CLI Target: es6
+ESM Build start
+CJS Build start
+ESM dist\index.mjs 423.24 KB
+ESM ⚡️ Build success in 1314ms
+CJS dist\index.js 439.36 KB
+CJS ⚡️ Build success in 1314ms
+DTS Build start
+DTS ⚡️ Build success in 7050ms
+DTS dist\index.d.mts 411.19 KB
+DTS dist\index.d.ts  411.19 KB
+npm notice
+npm notice New minor version of npm available! 11.5.1 -> 11.19.1
+npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.19.1
+npm notice To update run: npm install -g npm@11.19.1
+npm notice

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 12.11.3
+
+### Patch Changes
+
+- mobile calendar
+
 ## 12.11.2
 
 ### Patch Changes

package/dist/index.js

@@ -7936,6 +7936,27 @@ var CalendarStyled = styled("div", {
     }
   }
 });
+var calendarMobileCentered = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  right: "auto",
+  bottom: "auto",
+  transform: "translate(-50%, -50%)",
+  maxWidth: "calc(100vw - 32px)",
+  maxHeight: "90vh",
+  overflowY: "auto"
+};
+var CalendarOverlayStyled = styled("div", {
+  display: "none",
+  "@media (max-width: 748px)": {
+    display: "block",
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 999998
+  }
+});
 var CalendarButtonStyled = styled("button", {
   backgroundColor: "transparent",
   border: "none",
@@ -7969,23 +7990,28 @@ var CalendarContentStyled = styled("div", {
   position: "absolute",
   backgroundColor: "$neutral50",
   zIndex: "999999",
+  "@media (max-width: 748px)": calendarMobileCentered,
   variants: {
     position: {
       top: {
         bottom: "110%",
-        left: "0"
+        left: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       },
       bottom: {
         top: "110%",
-        left: "0"
+        left: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       },
       "top-right": {
         bottom: "110%",
-        right: "0"
+        right: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       },
       "bottom-right": {
         top: "110%",
-        right: "0"
+        right: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       }
     }
   }
@@ -8463,60 +8489,63 @@ function Calendar(_a) {
       console.warn("Data inv\xE1lida inserida no input:", masked);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      CalendarButtonStyled,
-      {
-        expand,
-        type: "button",
-        onClick: () => setShowCalendar((prev) => !prev),
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          TextField,
-          {
-            placeholder: "00/00/0000",
-            type: "text",
-            value: inputValue,
-            onChange: handleInputChange,
-            inputMode: "numeric",
-            textAlign: "right",
-            color: hasError ? "error" : "default",
-            disabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
-          }
-        )
-      }
-    ),
-    showContainer && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CalendarContentStyled, { position, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DayPickerWrapperStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_day_picker.DayPicker,
-        {
-          mode: "single",
-          captionLayout: calendarLayout,
-          selected,
-          onSelect: setSelected,
-          required: true,
-          locale: ptBR,
-          disabled: disabledDays.length > 0 ? disabledDays : void 0,
-          startMonth: allowPastDates ? void 0 : today,
-          endMonth: resolvedMaxDate
-        }
-      ) }) }),
-      action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CalendarFooterStyled, { actionAlign, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+    showContainer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CalendarOverlayStyled, { onClick: () => setShowCalendar(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        CalendarButtonStyled,
         {
-          variant: "text",
-          color: "brand",
+          expand,
           type: "button",
-          onClick: () => {
-            setShowCalendar(false);
-          },
-          size: "medium",
-          fontWeight: "medium",
-          children: actionText != null ? actionText : "Aplicar"
+          onClick: () => setShowCalendar((prev) => !prev),
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            TextField,
+            {
+              placeholder: "00/00/0000",
+              type: "text",
+              value: inputValue,
+              onChange: handleInputChange,
+              inputMode: "numeric",
+              textAlign: "right",
+              color: hasError ? "error" : "default",
+              disabled,
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
+            }
+          )
         }
-      ) })
-    ] })
-  ] })) });
+      ),
+      showContainer && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CalendarContentStyled, { position, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DayPickerWrapperStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_react_day_picker.DayPicker,
+          {
+            mode: "single",
+            captionLayout: calendarLayout,
+            selected,
+            onSelect: setSelected,
+            required: true,
+            locale: ptBR,
+            disabled: disabledDays.length > 0 ? disabledDays : void 0,
+            startMonth: allowPastDates ? void 0 : today,
+            endMonth: resolvedMaxDate
+          }
+        ) }) }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CalendarFooterStyled, { actionAlign, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          Button,
+          {
+            variant: "text",
+            color: "brand",
+            type: "button",
+            onClick: () => {
+              setShowCalendar(false);
+            },
+            size: "medium",
+            fontWeight: "medium",
+            children: actionText != null ? actionText : "Aplicar"
+          }
+        ) })
+      ] })
+    ] }))
+  ] });
 }
 
 // src/components/DoubleCalendar/index.tsx
@@ -8582,89 +8611,71 @@ function DoubleCalendar(_a) {
       setEndValue("");
     }
   }, [selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      CalendarButtonStyled,
-      {
-        expand,
-        type: "button",
-        onClick: () => setShowCalendar((prev) => {
-          const next = !prev;
-          if (!prev) initialSelectedRef.current = selected;
-          return next;
-        }),
-        disabled,
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", gap: "8px", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          TextField,
-          {
-            placeholder: "00/00/0000 - 00/00/0000",
-            type: "text",
-            value: `${startValue || "00/00/0000"} - ${endValue || "00/00/0000"}`,
-            readOnly: true,
-            inputMode: "numeric",
-            textAlign: "right",
-            color: hasError ? "error" : "default",
-            disabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
-          }
-        ) })
-      }
-    ),
-    showContainer && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarContentStyled, { position, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DayPickerWrapperStyledToDoubleCalendar, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_react_day_picker2.DayPicker,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+    showContainer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CalendarOverlayStyled, { onClick: () => setShowCalendar(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        CalendarButtonStyled,
         {
-          mode: "range",
-          numberOfMonths: 2,
-          captionLayout: calendarLayout,
-          selected,
-          onSelect: setSelected,
-          required: true,
-          locale: ptBR,
-          disabled: disabledDays.length > 0 ? disabledDays : void 0,
-          fromMonth: allowPastDates ? void 0 : today,
-          toMonth: resolvedMaxDate
-        }
-      ) }) }),
-      action && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarFooterStyled, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { textAlign: "center", padding: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: `${(selected == null ? void 0 : selected.from) ? format2(selected.from, "dd/MM/yyyy") : "00/00/0000"} \u2014 ${(selected == null ? void 0 : selected.to) ? format2(selected.to, "dd/MM/yyyy") : "00/00/0000"}` }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          Button,
+          expand,
+          type: "button",
+          onClick: () => setShowCalendar((prev) => {
+            const next = !prev;
+            if (!prev) initialSelectedRef.current = selected;
+            return next;
+          }),
+          disabled,
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", gap: "8px", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            TextField,
+            {
+              placeholder: "00/00/0000 - 00/00/0000",
+              type: "text",
+              value: `${startValue || "00/00/0000"} - ${endValue || "00/00/0000"}`,
+              readOnly: true,
+              inputMode: "numeric",
+              textAlign: "right",
+              color: hasError ? "error" : "default",
+              disabled,
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
+            }
+          ) })
+        }
+      ),
+      showContainer && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarContentStyled, { position, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DayPickerWrapperStyledToDoubleCalendar, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_react_day_picker2.DayPicker,
           {
-            style: { margin: "0 0.5rem" },
-            variant: "text",
-            color: "neutral",
-            type: "button",
-            onClick: () => {
-              setSelected(initialSelectedRef.current);
-              setShowCalendar(false);
-            },
-            size: "medium",
-            fontWeight: "regular",
-            children: "Cancelar"
+            mode: "range",
+            numberOfMonths: 2,
+            captionLayout: calendarLayout,
+            selected,
+            onSelect: setSelected,
+            required: true,
+            locale: ptBR,
+            disabled: disabledDays.length > 0 ? disabledDays : void 0,
+            fromMonth: allowPastDates ? void 0 : today,
+            toMonth: resolvedMaxDate
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          Button,
-          {
-            style: { margin: "0 0.5rem" },
-            variant: "text",
-            color: "brand",
-            type: "button",
-            onClick: () => {
-              setShowCalendar(false);
-            },
-            size: "medium",
-            fontWeight: "medium",
-            children: actionText != null ? actionText : "Aplicar"
-          }
-        )
-      ] }),
-      simpleAction && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CalendarFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        "div",
-        {
-          style: { display: "flex", justifyContent: "center", padding: "1rem", width: "100%" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        ) }) }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarFooterStyled, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { textAlign: "center", padding: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: `${(selected == null ? void 0 : selected.from) ? format2(selected.from, "dd/MM/yyyy") : "00/00/0000"} \u2014 ${(selected == null ? void 0 : selected.to) ? format2(selected.to, "dd/MM/yyyy") : "00/00/0000"}` }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Button,
+            {
+              style: { margin: "0 0.5rem" },
+              variant: "text",
+              color: "neutral",
+              type: "button",
+              onClick: () => {
+                setSelected(initialSelectedRef.current);
+                setShowCalendar(false);
+              },
+              size: "medium",
+              fontWeight: "regular",
+              children: "Cancelar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             Button,
             {
               style: { margin: "0 0.5rem" },
@@ -8679,10 +8690,31 @@ function DoubleCalendar(_a) {
               children: actionText != null ? actionText : "Aplicar"
             }
           )
-        }
-      ) })
-    ] })
-  ] })) });
+        ] }),
+        simpleAction && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CalendarFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            style: { display: "flex", justifyContent: "center", padding: "1rem", width: "100%" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              Button,
+              {
+                style: { margin: "0 0.5rem" },
+                variant: "text",
+                color: "brand",
+                type: "button",
+                onClick: () => {
+                  setShowCalendar(false);
+                },
+                size: "medium",
+                fontWeight: "medium",
+                children: actionText != null ? actionText : "Aplicar"
+              }
+            )
+          }
+        ) })
+      ] })
+    ] }))
+  ] });
 }
 
 // src/components/Drawer/index.tsx