@lets-events/react 12.7.3 → 12.8.0

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.7.3 build
+> @lets-events/react@12.8.0 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 405.05 KB
-CJS ⚡️ Build success in 411ms
-ESM dist/index.mjs 389.96 KB
-ESM ⚡️ Build success in 412ms
+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 7518ms
-DTS dist/index.d.mts 403.02 KB
-DTS dist/index.d.ts  403.02 KB
+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,11 @@
 # @lets-events/react
 
+## 12.8.0
+
+### Minor Changes
+
+- DateAndTimeFormField
+
 ## 12.7.3
 
 ### 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,
@@ -7939,7 +7940,8 @@ var DayPickerWrapperStyled = styled("div", {
   },
   ".rdp-nav": {
     position: "absolute",
-    width: "98%",
+    width: "100%",
+    left: "0",
     display: "flex",
     justifyContent: "space-between"
   },
@@ -13250,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,
@@ -13265,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";
@@ -13283,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;
@@ -13336,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);
@@ -13384,6 +13507,7 @@ var useImageUpload = (options) => {
   Container,
   ContainerStyled,
   CountryFormField,
+  DateAndTimeFormField,
   Divider,
   DoubleCalendar,
   DoubleCalendarFormField,

package/dist/index.mjs

@@ -7824,7 +7824,8 @@ var DayPickerWrapperStyled = styled("div", {
   },
   ".rdp-nav": {
     position: "absolute",
-    width: "98%",
+    width: "100%",
+    left: "0",
     display: "flex",
     justifyContent: "space-between"
   },
@@ -13144,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);
@@ -13159,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";
@@ -13177,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;
@@ -13230,7 +13352,7 @@ var useImageUpload = (options) => {
     }),
     [validateFile, onSuccess, onError, onProgress]
   );
-  const reset = useCallback8(() => {
+  const reset = useCallback9(() => {
     setIsUploading(false);
     setProgress(null);
     setError(null);
@@ -13277,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.3",
+  "version": "12.8.0",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Calendar/styledComponents.ts

@@ -126,7 +126,8 @@ export const DayPickerWrapperStyled = styled("div", {
   },
   ".rdp-nav": {
     position: "absolute",
-    width: "98%",
+    width: "100%",
+    left: "0",
     display: "flex",
     justifyContent: "space-between",
   },

package/src/components/FormFields/DateAndTimeFormField.tsx

@@ -0,0 +1,154 @@
+import { FieldValues, useController, RegisterOptions } from "react-hook-form";
+import { Flex } from "../Flex";
+import { FormLabel } from "./subComponents/FormLabel";
+import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
+import { Calendar, CalendarProps } from "../Calendar";
+import { TimePicker, TimePickerProps } from "../TimePicker";
+import { useCallback, useMemo } from "react";
+
+export 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;
+};
+
+export const DateAndTimeFormField = ({
+    name,
+    label,
+    required,
+    validate,
+    validationErrorMessage = "Este campo é obrigatório.",
+    rules,
+    allowPastDates,
+    maxYearsFromNow = 20,
+    ...props
+}: DateAndTimeFormFieldProps) => {
+    const handleValidate = useCallback(
+        (value?: string) => {
+            if (value === undefined || value === null || value === "") {
+                if (required) return validationErrorMessage;
+                return true;
+            }
+            return validate?.(value) ?? true;
+        },
+        [validate, required, validationErrorMessage]
+    );
+
+    const { field, fieldState } = useController({
+        name,
+        rules: {
+            required: required ? validationErrorMessage : false,
+            validate: handleValidate,
+            ...rules,
+        },
+        defaultValue: "",
+    });
+
+    const fieldError = fieldState.error;
+    const haveError = !!fieldError;
+    const errorMsg = fieldError?.message;
+
+    const { value: isoValue, onChange: setIsoValue } = field;
+
+    const { selectedDate, selectedTime } = useMemo(() => {
+        if (!isoValue) return { selectedDate: undefined, selectedTime: undefined };
+
+        try {
+            const date = new Date(isoValue);
+            if (isNaN(date.getTime())) {
+                return { selectedDate: undefined, selectedTime: undefined };
+            }
+
+            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 {
+            return { selectedDate: undefined, selectedTime: undefined };
+        }
+    }, [isoValue]);
+
+    const combineDateTime = useCallback(
+        (date?: Date, time?: string) => {
+            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: Date | undefined) => {
+        combineDateTime(date, selectedTime);
+    };
+
+    const handleTimeChange = (time: string | undefined) => {
+        combineDateTime(selectedDate, time);
+    };
+
+    return (
+        <Flex direction="column">
+            {label && (
+                <FormLabel
+                    name={name}
+                    label={label}
+                    required={required}
+                    haveError={haveError}
+                />
+            )}
+
+            <Flex gap={12} align="start">
+                <Flex direction="column">
+                    <Calendar
+                        selected={selectedDate}
+                        setSelected={(date) => {
+                            const d = typeof date === "function" ? date(selectedDate) : date;
+                            handleDateChange(d);
+                        }}
+                        hasError={haveError}
+                        allowPastDates={allowPastDates}
+                        maxYearsFromNow={maxYearsFromNow}
+                        {...(props as Omit<CalendarProps, "selected" | "setSelected">)}
+                    />
+                </Flex>
+
+                <Flex direction="column">
+                    <TimePicker
+                        selected={selectedTime}
+                        setSelected={(value) => {
+                            const time = typeof value === "function" ? value(selectedTime) : value;
+                            handleTimeChange(time);
+                        }}
+                        hasError={haveError}
+                        {...(props as Omit<TimePickerProps, "selected" | "setSelected">)}
+                    />
+                </Flex>
+            </Flex>
+
+            <ErrorFormMessage message={errorMsg} />
+        </Flex>
+    );
+};
+
+export default DateAndTimeFormField

package/src/index.tsx

@@ -60,6 +60,7 @@ export * from "./components/FormFields/RichEditorFormField";
 export * from "./components/FormFields/CalendarFormField";
 export * from "./components/FormFields/DoubleCalendarFormField";
 export * from "./components/FormFields/TimePickerFormField";
+export * from "./components/FormFields/DateAndTimeFormField";
 
 // Rich Editor
 export * from "./components/RichEditor";