@lets-events/react 12.7.3 → 12.8.1

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.7.3 build
+> @lets-events/react@12.8.1 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
+ESM dist/index.mjs 394.44 KB
+ESM ⚡️ Build success in 296ms
+CJS dist/index.js 409.79 KB
+CJS ⚡️ Build success in 296ms
 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 6147ms
+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.1
+
+### Patch Changes
+
+- TimePicker Initial Value
+
+## 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"
   },
@@ -8614,6 +8616,21 @@ var TimePickerIconButton = styled(Button, {
   padding: "0 !important"
 });
 var pad = (num) => String(num).padStart(2, "0");
+var parseTime = (value) => {
+  if (!value) {
+    return {
+      parsedHours: "00",
+      parsedMinutes: "00"
+    };
+  }
+  const [hours, minutes] = value.split(":");
+  const nextHours = Math.min(Math.max(parseInt(hours || "0", 10), 0), 23);
+  const nextMinutes = Math.min(Math.max(parseInt(minutes || "0", 10), 0), 59);
+  return {
+    parsedHours: Number.isNaN(nextHours) ? "00" : pad(nextHours),
+    parsedMinutes: Number.isNaN(nextMinutes) ? "00" : pad(nextMinutes)
+  };
+};
 function TimePicker({
   selected,
   setSelected,
@@ -8628,6 +8645,13 @@ function TimePicker({
   const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
   const dropdownRef = (0, import_react11.useRef)(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
+  (0, import_react11.useEffect)(() => {
+    const { parsedHours, parsedMinutes } = parseTime(selected);
+    setHours(parsedHours);
+    setMinutes(parsedMinutes);
+    setRawHours(parsedHours);
+    setRawMinutes(parsedMinutes);
+  }, [selected]);
   const handleIncrement = (0, import_react11.useCallback)(
     (type) => {
       if (type === "hours") {
@@ -13250,12 +13274,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 +13410,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 +13428,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 +13481,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 +13529,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"
   },
@@ -8383,7 +8384,7 @@ function Drawer({
 }
 
 // src/components/TimePicker.tsx
-import { useCallback, useRef as useRef6, useState as useState4 } from "react";
+import { useCallback, useEffect as useEffect6, useRef as useRef6, useState as useState4 } from "react";
 import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var TimePickerStyled = styled("div", {
   position: "relative",
@@ -8499,6 +8500,21 @@ var TimePickerIconButton = styled(Button, {
   padding: "0 !important"
 });
 var pad = (num) => String(num).padStart(2, "0");
+var parseTime = (value) => {
+  if (!value) {
+    return {
+      parsedHours: "00",
+      parsedMinutes: "00"
+    };
+  }
+  const [hours, minutes] = value.split(":");
+  const nextHours = Math.min(Math.max(parseInt(hours || "0", 10), 0), 23);
+  const nextMinutes = Math.min(Math.max(parseInt(minutes || "0", 10), 0), 59);
+  return {
+    parsedHours: Number.isNaN(nextHours) ? "00" : pad(nextHours),
+    parsedMinutes: Number.isNaN(nextMinutes) ? "00" : pad(nextMinutes)
+  };
+};
 function TimePicker({
   selected,
   setSelected,
@@ -8513,6 +8529,13 @@ function TimePicker({
   const [isOpen, setIsOpen] = useState4(false);
   const dropdownRef = useRef6(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
+  useEffect6(() => {
+    const { parsedHours, parsedMinutes } = parseTime(selected);
+    setHours(parsedHours);
+    setMinutes(parsedMinutes);
+    setRawHours(parsedHours);
+    setRawMinutes(parsedMinutes);
+  }, [selected]);
   const handleIncrement = useCallback(
     (type) => {
       if (type === "hours") {
@@ -9246,7 +9269,7 @@ function Card(_a) {
 
 // src/components/TextareaField.tsx
 import { TextArea as TextAreaRadix } from "@radix-ui/themes";
-import React9, { useRef as useRef7, useState as useState5, useEffect as useEffect6 } from "react";
+import React9, { useRef as useRef7, useState as useState5, useEffect as useEffect7 } from "react";
 import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var TextareaFieldStyle = styled(TextAreaRadix, {
   display: "flex",
@@ -9301,7 +9324,7 @@ var TextareaField = React9.forwardRef((_a, forwardedRef) => {
   var _b = _a, { maxLength, color, top = "-1.75rem" } = _b, props = __objRest(_b, ["maxLength", "color", "top"]);
   const inputRef = useRef7(null);
   const [remaining, setRemaining] = useState5(maxLength);
-  useEffect6(() => {
+  useEffect7(() => {
     var _a2;
     if (maxLength && inputRef.current) {
       setRemaining(maxLength - ((_a2 = inputRef.current.value.length) != null ? _a2 : 0));
@@ -10937,7 +10960,7 @@ function StateFormField({
 }
 
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
-import { useEffect as useEffect7, useState as useState9 } from "react";
+import { useEffect as useEffect8, useState as useState9 } from "react";
 import { useFormContext as useFormContext5, Controller as Controller2 } from "react-hook-form";
 import { Fragment as Fragment4, jsx as jsx46 } from "react/jsx-runtime";
 function CityFormField({
@@ -10952,7 +10975,7 @@ function CityFormField({
   const selectedState = watch(stateName);
   const [cities, setCities] = useState9([]);
   const [loading, setLoading] = useState9(false);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isBrazil) {
       setCities([]);
       return;
@@ -11337,10 +11360,10 @@ var EmailFormField = ({
 import { useController as useController3 } from "react-hook-form";
 
 // src/components/RichEditor/RichEditor.tsx
-import { useEffect as useEffect9, useState as useState11 } from "react";
+import { useEffect as useEffect10, useState as useState11 } from "react";
 
 // src/components/RichEditor/QuillComponent.tsx
-import { useState as useState10, useRef as useRef9, useEffect as useEffect8, useCallback as useCallback4 } from "react";
+import { useState as useState10, useRef as useRef9, useEffect as useEffect9, useCallback as useCallback4 } from "react";
 import { useQuill } from "react-quilljs";
 
 // src/utils/uploadService.ts
@@ -12520,7 +12543,7 @@ var QuillComponent = ({
     }),
     [disabled, quill, addToast, removeToast, uploadConfig, onChange]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (quill && value) {
       const currentContent = quill.root.innerHTML;
       if (currentContent !== value) {
@@ -12534,7 +12557,7 @@ var QuillComponent = ({
       }
     }
   }, [quill, value]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (quill) {
       quill.on("text-change", (delta, oldDelta, source) => {
         if (source === "user") {
@@ -12589,7 +12612,7 @@ var QuillComponent = ({
       }, 2e3);
     }
   }, [quill, onChange, handleImageUpload, onCharacterCountChange]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (quill) {
       quill.enable(!disabled);
       if (!disabled) {
@@ -12656,7 +12679,7 @@ var QuillComponent = ({
     setVideoUrl("");
     setShowVideoModal(false);
   }, [videoUrl, quill]);
-  useEffect8(() => {
+  useEffect9(() => {
     const handleClickOutside = (event) => {
       if (showVideoModal && videoModalRef.current && !videoModalRef.current.contains(event.target)) {
         handleVideoCancel();
@@ -12819,7 +12842,7 @@ var QuillComponent_default = QuillComponent;
 import { jsx as jsx53 } from "react/jsx-runtime";
 var RichEditor = (props) => {
   const [isClient, setIsClient] = useState11(false);
-  useEffect9(() => {
+  useEffect10(() => {
     setIsClient(typeof window !== "undefined");
   }, []);
   if (!isClient) return null;
@@ -13144,8 +13167,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 +13303,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 +13321,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 +13374,7 @@ var useImageUpload = (options) => {
     }),
     [validateFile, onSuccess, onError, onProgress]
   );
-  const reset = useCallback8(() => {
+  const reset = useCallback9(() => {
     setIsUploading(false);
     setProgress(null);
     setError(null);
@@ -13277,6 +13421,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.1",
   "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/components/TimePicker.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Box } from "./Box";
 import { Button } from "./Button";
 import { TextField, TextFieldSlot } from "./TextField";
@@ -134,6 +134,24 @@ export type TimePickerProps = {
 };
 const pad = (num: number) => String(num).padStart(2, "0");
 
+const parseTime = (value?: string) => {
+  if (!value) {
+    return {
+      parsedHours: "00",
+      parsedMinutes: "00",
+    };
+  }
+
+  const [hours, minutes] = value.split(":");
+  const nextHours = Math.min(Math.max(parseInt(hours || "0", 10), 0), 23);
+  const nextMinutes = Math.min(Math.max(parseInt(minutes || "0", 10), 0), 59);
+
+  return {
+    parsedHours: Number.isNaN(nextHours) ? "00" : pad(nextHours),
+    parsedMinutes: Number.isNaN(nextMinutes) ? "00" : pad(nextMinutes),
+  };
+};
+
 export function TimePicker({
   selected,
   setSelected,
@@ -150,6 +168,14 @@ export function TimePicker({
 
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
 
+  useEffect(() => {
+    const { parsedHours, parsedMinutes } = parseTime(selected);
+    setHours(parsedHours);
+    setMinutes(parsedMinutes);
+    setRawHours(parsedHours);
+    setRawMinutes(parsedMinutes);
+  }, [selected]);
+
   const handleIncrement = useCallback(
     (type: "hours" | "minutes") => {
       if (type === "hours") {

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";