@lets-events/react 12.7.2 → 12.8.0

package/.eslintrc.json

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

package/.turbo/turbo-build.log

@@ -1,19 +1,21 @@
-
-> @lets-events/react@12.7.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: C:\Users\cazuz\Desktop\Web\design-system\packages\react\tsup.config.ts
-CLI Target: es6
-ESM Build start
-CJS Build start
-ESM dist\index.mjs 389.70 KB
-ESM ⚡️ Build success in 199ms
-CJS dist\index.js 404.79 KB
-CJS ⚡️ Build success in 204ms
-DTS Build start
-DTS ⚡️ Build success in 4599ms
-DTS dist\index.d.mts 403.02 KB
-DTS dist\index.d.ts  403.02 KB
+
+
+> @lets-events/react@12.8.0 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 409.09 KB
+CJS ⚡️ Build success in 613ms
+ESM dist/index.mjs 393.73 KB
+ESM ⚡️ Build success in 616ms
+DTS Build start
+DTS ⚡️ Build success in 11472ms
+DTS dist/index.d.mts 403.74 KB
+DTS dist/index.d.ts  403.74 KB
+⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.8.0
+
+### Minor Changes
+
+- DateAndTimeFormField
+
+## 12.7.3
+
+### Patch Changes
+
+- Double Layout Mobile
+
 ## 12.7.2
 
 ### Patch Changes

package/dist/index.d.mts

@@ -15351,6 +15351,18 @@ type TimePickerFormFieldProps = Omit<TimePickerProps, "selected" | "setSelected"
 };
 declare const TimePickerFormField: ({ name, label, required, validate, validationErrorMessage, rules, ...timePickerProps }: TimePickerFormFieldProps) => react_jsx_runtime.JSX.Element;
 
+type DateAndTimeFormFieldProps = Omit<CalendarProps, "selected" | "setSelected"> & Omit<TimePickerProps, "selected" | "setSelected"> & {
+    name: string;
+    label?: string;
+    required?: boolean;
+    validate?: (value: string | undefined) => boolean | string;
+    validationErrorMessage?: string;
+    rules?: Omit<RegisterOptions<FieldValues, string>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled">;
+    allowPastDates?: boolean;
+    maxYearsFromNow?: number;
+};
+declare const DateAndTimeFormField: ({ name, label, required, validate, validationErrorMessage, rules, allowPastDates, maxYearsFromNow, ...props }: DateAndTimeFormFieldProps) => react_jsx_runtime.JSX.Element;
+
 interface UploadConfig {
     apiUrl: string;
     s3Bucket: string;
@@ -15405,4 +15417,4 @@ declare const useImageUpload: (options: UseImageUploadOptions) => {
     reset: () => void;
 };
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, type DateRange, Divider, DoubleCalendar, DoubleCalendarFormField, type DoubleCalendarFormFieldProps, type DoubleCalendarProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, RichTextPresenter, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, DateAndTimeFormField, type DateAndTimeFormFieldProps, type DateRange, Divider, DoubleCalendar, DoubleCalendarFormField, type DoubleCalendarFormFieldProps, type DoubleCalendarProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, RichTextPresenter, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };

package/dist/index.d.ts

@@ -15351,6 +15351,18 @@ type TimePickerFormFieldProps = Omit<TimePickerProps, "selected" | "setSelected"
 };
 declare const TimePickerFormField: ({ name, label, required, validate, validationErrorMessage, rules, ...timePickerProps }: TimePickerFormFieldProps) => react_jsx_runtime.JSX.Element;
 
+type DateAndTimeFormFieldProps = Omit<CalendarProps, "selected" | "setSelected"> & Omit<TimePickerProps, "selected" | "setSelected"> & {
+    name: string;
+    label?: string;
+    required?: boolean;
+    validate?: (value: string | undefined) => boolean | string;
+    validationErrorMessage?: string;
+    rules?: Omit<RegisterOptions<FieldValues, string>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled">;
+    allowPastDates?: boolean;
+    maxYearsFromNow?: number;
+};
+declare const DateAndTimeFormField: ({ name, label, required, validate, validationErrorMessage, rules, allowPastDates, maxYearsFromNow, ...props }: DateAndTimeFormFieldProps) => react_jsx_runtime.JSX.Element;
+
 interface UploadConfig {
     apiUrl: string;
     s3Bucket: string;
@@ -15405,4 +15417,4 @@ declare const useImageUpload: (options: UseImageUploadOptions) => {
     reset: () => void;
 };
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, type DateRange, Divider, DoubleCalendar, DoubleCalendarFormField, type DoubleCalendarFormFieldProps, type DoubleCalendarProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, RichTextPresenter, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, DateAndTimeFormField, type DateAndTimeFormFieldProps, type DateRange, Divider, DoubleCalendar, DoubleCalendarFormField, type DoubleCalendarFormFieldProps, type DoubleCalendarProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, RichTextPresenter, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };

package/dist/index.js

@@ -895,6 +895,7 @@ __export(index_exports, {
   Container: () => Container,
   ContainerStyled: () => ContainerStyled,
   CountryFormField: () => CountryFormField,
+  DateAndTimeFormField: () => DateAndTimeFormField,
   Divider: () => Divider,
   DoubleCalendar: () => DoubleCalendar,
   DoubleCalendarFormField: () => DoubleCalendarFormField,
@@ -7893,7 +7894,14 @@ var CalendarFooterStyled = styled("div", {
   gap: "1rem",
   justifyContent: "flex-end",
   alignItems: "center",
-  height: "3rem"
+  height: "3rem",
+  "@media (max-width: 748px)": {
+    gap: "0",
+    padding: "$4 $12",
+    "> div": {
+      padding: "0!important"
+    }
+  }
 });
 var DayPickerWrapperStyled = styled("div", {
   ".rt-TextFieldInput": {
@@ -7932,7 +7940,8 @@ var DayPickerWrapperStyled = styled("div", {
   },
   ".rdp-nav": {
     position: "absolute",
-    width: "98%",
+    width: "100%",
+    left: "0",
     display: "flex",
     justifyContent: "space-between"
   },
@@ -8062,6 +8071,13 @@ var DayPickerWrapperStyled = styled("div", {
     marginTop: "$16",
     paddingTop: "$16",
     borderTop: "2px solid $neutral100"
+  },
+  "@media (max-width: 748px)": {
+    ".rdp-months": {
+      flexDirection: "column",
+      alignItems: "center",
+      padding: "16px"
+    }
   }
 });
 
@@ -13236,12 +13252,133 @@ var TimePickerFormField = (_a) => {
   ] });
 };
 
-// src/hooks/useImageUpload.ts
+// src/components/FormFields/DateAndTimeFormField.tsx
+var import_react_hook_form16 = require("react-hook-form");
 var import_react28 = require("react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var DateAndTimeFormField = (_a) => {
+  var _b = _a, {
+    name,
+    label,
+    required,
+    validate,
+    validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
+    rules,
+    allowPastDates,
+    maxYearsFromNow = 20
+  } = _b, props = __objRest(_b, [
+    "name",
+    "label",
+    "required",
+    "validate",
+    "validationErrorMessage",
+    "rules",
+    "allowPastDates",
+    "maxYearsFromNow"
+  ]);
+  const handleValidate = (0, import_react28.useCallback)(
+    (value) => {
+      var _a2;
+      if (value === void 0 || value === null || value === "") {
+        if (required) return validationErrorMessage;
+        return true;
+      }
+      return (_a2 = validate == null ? void 0 : validate(value)) != null ? _a2 : true;
+    },
+    [validate, required, validationErrorMessage]
+  );
+  const { field, fieldState } = (0, import_react_hook_form16.useController)({
+    name,
+    rules: __spreadValues({
+      required: required ? validationErrorMessage : false,
+      validate: handleValidate
+    }, rules),
+    defaultValue: ""
+  });
+  const fieldError = fieldState.error;
+  const haveError = !!fieldError;
+  const errorMsg = fieldError == null ? void 0 : fieldError.message;
+  const { value: isoValue, onChange: setIsoValue } = field;
+  const { selectedDate, selectedTime } = (0, import_react28.useMemo)(() => {
+    if (!isoValue) return { selectedDate: void 0, selectedTime: void 0 };
+    try {
+      const date = new Date(isoValue);
+      if (isNaN(date.getTime())) {
+        return { selectedDate: void 0, selectedTime: void 0 };
+      }
+      const hours = String(date.getHours()).padStart(2, "0");
+      const minutes = String(date.getMinutes()).padStart(2, "0");
+      const time = `${hours}:${minutes}`;
+      return { selectedDate: date, selectedTime: time };
+    } catch (e) {
+      return { selectedDate: void 0, selectedTime: void 0 };
+    }
+  }, [isoValue]);
+  const combineDateTime = (0, import_react28.useCallback)(
+    (date, time) => {
+      if (!date || !time) {
+        setIsoValue("");
+        return;
+      }
+      const [hours, minutes] = time.split(":").map(Number);
+      const combined = new Date(date);
+      combined.setHours(hours || 0, minutes || 0, 0, 0);
+      setIsoValue(combined.toISOString());
+    },
+    [setIsoValue]
+  );
+  const handleDateChange = (date) => {
+    combineDateTime(date, selectedTime);
+  };
+  const handleTimeChange = (time) => {
+    combineDateTime(selectedDate, time);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Flex, { direction: "column", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      FormLabel,
+      {
+        name,
+        label,
+        required,
+        haveError
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Flex, { gap: 12, align: "start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        Calendar,
+        __spreadValues({
+          selected: selectedDate,
+          setSelected: (date) => {
+            const d = typeof date === "function" ? date(selectedDate) : date;
+            handleDateChange(d);
+          },
+          hasError: haveError,
+          allowPastDates,
+          maxYearsFromNow
+        }, props)
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        TimePicker,
+        __spreadValues({
+          selected: selectedTime,
+          setSelected: (value) => {
+            const time = typeof value === "function" ? value(selectedTime) : value;
+            handleTimeChange(time);
+          },
+          hasError: haveError
+        }, props)
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ErrorFormMessage, { message: errorMsg })
+  ] });
+};
+
+// src/hooks/useImageUpload.ts
+var import_react29 = require("react");
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = (0, import_react28.useState)(false);
-  const [progress, setProgress] = (0, import_react28.useState)(null);
-  const [error, setError] = (0, import_react28.useState)(null);
+  const [isUploading, setIsUploading] = (0, import_react29.useState)(false);
+  const [progress, setProgress] = (0, import_react29.useState)(null);
+  const [error, setError] = (0, import_react29.useState)(null);
   const {
     onSuccess,
     onError,
@@ -13251,7 +13388,7 @@ var useImageUpload = (options) => {
     allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"],
     uploadConfig
   } = options;
-  const validateFile = (0, import_react28.useCallback)(
+  const validateFile = (0, import_react29.useCallback)(
     (file) => {
       if (!allowedTypes.includes(file.type)) {
         const errorMsg = "Tipo de arquivo n\xE3o suportado";
@@ -13269,7 +13406,7 @@ var useImageUpload = (options) => {
     },
     [allowedTypes, maxFileSize, onError]
   );
-  const uploadFile = (0, import_react28.useCallback)(
+  const uploadFile = (0, import_react29.useCallback)(
     (file) => __async(null, null, function* () {
       if (!validateFile(file)) {
         return null;
@@ -13322,7 +13459,7 @@ var useImageUpload = (options) => {
     }),
     [validateFile, onSuccess, onError, onProgress]
   );
-  const reset = (0, import_react28.useCallback)(() => {
+  const reset = (0, import_react29.useCallback)(() => {
     setIsUploading(false);
     setProgress(null);
     setError(null);
@@ -13370,6 +13507,7 @@ var useImageUpload = (options) => {
   Container,
   ContainerStyled,
   CountryFormField,
+  DateAndTimeFormField,
   Divider,
   DoubleCalendar,
   DoubleCalendarFormField,

package/dist/index.mjs

@@ -7778,7 +7778,14 @@ var CalendarFooterStyled = styled("div", {
   gap: "1rem",
   justifyContent: "flex-end",
   alignItems: "center",
-  height: "3rem"
+  height: "3rem",
+  "@media (max-width: 748px)": {
+    gap: "0",
+    padding: "$4 $12",
+    "> div": {
+      padding: "0!important"
+    }
+  }
 });
 var DayPickerWrapperStyled = styled("div", {
   ".rt-TextFieldInput": {
@@ -7817,7 +7824,8 @@ var DayPickerWrapperStyled = styled("div", {
   },
   ".rdp-nav": {
     position: "absolute",
-    width: "98%",
+    width: "100%",
+    left: "0",
     display: "flex",
     justifyContent: "space-between"
   },
@@ -7947,6 +7955,13 @@ var DayPickerWrapperStyled = styled("div", {
     marginTop: "$16",
     paddingTop: "$16",
     borderTop: "2px solid $neutral100"
+  },
+  "@media (max-width: 748px)": {
+    ".rdp-months": {
+      flexDirection: "column",
+      alignItems: "center",
+      padding: "16px"
+    }
   }
 });
 
@@ -13130,8 +13145,129 @@ var TimePickerFormField = (_a) => {
   ] });
 };
 
+// src/components/FormFields/DateAndTimeFormField.tsx
+import { useController as useController7 } from "react-hook-form";
+import { useCallback as useCallback8, useMemo as useMemo4 } from "react";
+import { jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+var DateAndTimeFormField = (_a) => {
+  var _b = _a, {
+    name,
+    label,
+    required,
+    validate,
+    validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
+    rules,
+    allowPastDates,
+    maxYearsFromNow = 20
+  } = _b, props = __objRest(_b, [
+    "name",
+    "label",
+    "required",
+    "validate",
+    "validationErrorMessage",
+    "rules",
+    "allowPastDates",
+    "maxYearsFromNow"
+  ]);
+  const handleValidate = useCallback8(
+    (value) => {
+      var _a2;
+      if (value === void 0 || value === null || value === "") {
+        if (required) return validationErrorMessage;
+        return true;
+      }
+      return (_a2 = validate == null ? void 0 : validate(value)) != null ? _a2 : true;
+    },
+    [validate, required, validationErrorMessage]
+  );
+  const { field, fieldState } = useController7({
+    name,
+    rules: __spreadValues({
+      required: required ? validationErrorMessage : false,
+      validate: handleValidate
+    }, rules),
+    defaultValue: ""
+  });
+  const fieldError = fieldState.error;
+  const haveError = !!fieldError;
+  const errorMsg = fieldError == null ? void 0 : fieldError.message;
+  const { value: isoValue, onChange: setIsoValue } = field;
+  const { selectedDate, selectedTime } = useMemo4(() => {
+    if (!isoValue) return { selectedDate: void 0, selectedTime: void 0 };
+    try {
+      const date = new Date(isoValue);
+      if (isNaN(date.getTime())) {
+        return { selectedDate: void 0, selectedTime: void 0 };
+      }
+      const hours = String(date.getHours()).padStart(2, "0");
+      const minutes = String(date.getMinutes()).padStart(2, "0");
+      const time = `${hours}:${minutes}`;
+      return { selectedDate: date, selectedTime: time };
+    } catch (e) {
+      return { selectedDate: void 0, selectedTime: void 0 };
+    }
+  }, [isoValue]);
+  const combineDateTime = useCallback8(
+    (date, time) => {
+      if (!date || !time) {
+        setIsoValue("");
+        return;
+      }
+      const [hours, minutes] = time.split(":").map(Number);
+      const combined = new Date(date);
+      combined.setHours(hours || 0, minutes || 0, 0, 0);
+      setIsoValue(combined.toISOString());
+    },
+    [setIsoValue]
+  );
+  const handleDateChange = (date) => {
+    combineDateTime(date, selectedTime);
+  };
+  const handleTimeChange = (time) => {
+    combineDateTime(selectedDate, time);
+  };
+  return /* @__PURE__ */ jsxs33(Flex, { direction: "column", children: [
+    label && /* @__PURE__ */ jsx59(
+      FormLabel,
+      {
+        name,
+        label,
+        required,
+        haveError
+      }
+    ),
+    /* @__PURE__ */ jsxs33(Flex, { gap: 12, align: "start", children: [
+      /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
+        Calendar,
+        __spreadValues({
+          selected: selectedDate,
+          setSelected: (date) => {
+            const d = typeof date === "function" ? date(selectedDate) : date;
+            handleDateChange(d);
+          },
+          hasError: haveError,
+          allowPastDates,
+          maxYearsFromNow
+        }, props)
+      ) }),
+      /* @__PURE__ */ jsx59(Flex, { direction: "column", children: /* @__PURE__ */ jsx59(
+        TimePicker,
+        __spreadValues({
+          selected: selectedTime,
+          setSelected: (value) => {
+            const time = typeof value === "function" ? value(selectedTime) : value;
+            handleTimeChange(time);
+          },
+          hasError: haveError
+        }, props)
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx59(ErrorFormMessage, { message: errorMsg })
+  ] });
+};
+
 // src/hooks/useImageUpload.ts
-import { useState as useState13, useCallback as useCallback8 } from "react";
+import { useState as useState13, useCallback as useCallback9 } from "react";
 var useImageUpload = (options) => {
   const [isUploading, setIsUploading] = useState13(false);
   const [progress, setProgress] = useState13(null);
@@ -13145,7 +13281,7 @@ var useImageUpload = (options) => {
     allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"],
     uploadConfig
   } = options;
-  const validateFile = useCallback8(
+  const validateFile = useCallback9(
     (file) => {
       if (!allowedTypes.includes(file.type)) {
         const errorMsg = "Tipo de arquivo n\xE3o suportado";
@@ -13163,7 +13299,7 @@ var useImageUpload = (options) => {
     },
     [allowedTypes, maxFileSize, onError]
   );
-  const uploadFile = useCallback8(
+  const uploadFile = useCallback9(
     (file) => __async(null, null, function* () {
       if (!validateFile(file)) {
         return null;
@@ -13216,7 +13352,7 @@ var useImageUpload = (options) => {
     }),
     [validateFile, onSuccess, onError, onProgress]
   );
-  const reset = useCallback8(() => {
+  const reset = useCallback9(() => {
     setIsUploading(false);
     setProgress(null);
     setError(null);
@@ -13263,6 +13399,7 @@ export {
   Container,
   ContainerStyled,
   CountryFormField,
+  DateAndTimeFormField,
   Divider,
   DoubleCalendar,
   DoubleCalendarFormField,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.7.2",
+  "version": "12.8.0",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",