@lets-events/react 12.11.1 → 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.1 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 437.94 KB
-CJS ⚡️ Build success in 305ms
-ESM dist/index.mjs 421.87 KB
-ESM ⚡️ Build success in 305ms
-DTS Build start
-DTS ⚡️ Build success in 6455ms
-DTS dist/index.d.mts 411.09 KB
-DTS dist/index.d.ts  411.09 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,17 @@
 # @lets-events/react
 
+## 12.11.3
+
+### Patch Changes
+
+- mobile calendar
+
+## 12.11.2
+
+### Patch Changes
+
+- modal title typograph
+
 ## 12.11.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -929,13 +929,13 @@ declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type Typography = keyof typeof typographyValues;
+type Typography$1 = keyof typeof typographyValues;
 type FontWeight = "regular" | "medium" | "semibold" | "bold";
 type TextProps = {
     as?: ElementType;
     asChild?: boolean;
     color?: keyof Colors;
-    typography?: Typography;
+    typography?: Typography$1;
     fontWeight?: FontWeight;
     children?: ReactNode;
     id?: string;
@@ -4495,6 +4495,7 @@ type BadgeProps = {
 };
 declare function Badge({ asChild, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
+type Typography = keyof typeof typographyValues;
 type ModalProps = ComponentProps<typeof Dialog.Root> & {
     trigger?: React.ReactNode;
     title?: string;
@@ -4505,8 +4506,9 @@ type ModalProps = ComponentProps<typeof Dialog.Root> & {
     height?: string;
     preventAutoFocus?: boolean;
     fitContent?: boolean;
+    titleTypography?: Typography;
 };
-declare function Modal({ children, title, trigger, zIndex, maxWidth, maxHeight, height, preventAutoFocus, fitContent, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, title, trigger, zIndex, maxWidth, maxHeight, height, preventAutoFocus, fitContent, titleTypography, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
 
 type MenuDropdownProps = HTMLAttributes<HTMLDivElement> & {
     children: ReactNode;

package/dist/index.d.ts

@@ -929,13 +929,13 @@ declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type Typography = keyof typeof typographyValues;
+type Typography$1 = keyof typeof typographyValues;
 type FontWeight = "regular" | "medium" | "semibold" | "bold";
 type TextProps = {
     as?: ElementType;
     asChild?: boolean;
     color?: keyof Colors;
-    typography?: Typography;
+    typography?: Typography$1;
     fontWeight?: FontWeight;
     children?: ReactNode;
     id?: string;
@@ -4495,6 +4495,7 @@ type BadgeProps = {
 };
 declare function Badge({ asChild, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
+type Typography = keyof typeof typographyValues;
 type ModalProps = ComponentProps<typeof Dialog.Root> & {
     trigger?: React.ReactNode;
     title?: string;
@@ -4505,8 +4506,9 @@ type ModalProps = ComponentProps<typeof Dialog.Root> & {
     height?: string;
     preventAutoFocus?: boolean;
     fitContent?: boolean;
+    titleTypography?: Typography;
 };
-declare function Modal({ children, title, trigger, zIndex, maxWidth, maxHeight, height, preventAutoFocus, fitContent, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, title, trigger, zIndex, maxWidth, maxHeight, height, preventAutoFocus, fitContent, titleTypography, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
 
 type MenuDropdownProps = HTMLAttributes<HTMLDivElement> & {
     children: ReactNode;

package/dist/index.js

@@ -3890,7 +3890,8 @@ function Modal(_a) {
     maxHeight,
     height,
     preventAutoFocus = false,
-    fitContent = false
+    fitContent = false,
+    titleTypography = "headline6"
   } = _b, props = __objRest(_b, [
     "children",
     "title",
@@ -3900,7 +3901,8 @@ function Modal(_a) {
     "maxHeight",
     "height",
     "preventAutoFocus",
-    "fitContent"
+    "fitContent",
+    "titleTypography"
   ]);
   const { onOpenChange } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_radix_ui.Dialog.Root, __spreadProps(__spreadValues({}, props), { children: [
@@ -3924,7 +3926,7 @@ function Modal(_a) {
             }, maxHeight !== void 0 && { maxHeight }), height !== void 0 && { height }), fitContent && height === void 0 && { height: "fit-content" }),
             children: [
               title && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalHeaderStyled, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { typography: titleTypography, fontWeight: "medium", children: title }) }),
                 (onOpenChange || trigger) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalIconClose, { name: "close", size: "xl" }) })
               ] }),
               children
@@ -7934,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",
@@ -7967,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
       }
     }
   }
@@ -8461,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
@@ -8580,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" },
@@ -8677,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
@@ -10570,6 +10604,7 @@ var MultiSelect = import_react20.default.forwardRef(
           maxHeight: MOBILE_MODAL_MAX_HEIGHT,
           zIndex: modalZIndex,
           preventAutoFocus: true,
+          titleTypography: "headline8",
           fitContent: true,
           children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             StyledModalOptionsWrapper,