@ikatec/nebula-react 1.3.3-beta.1 → 1.4.0-beta.1

package/dist/index.d.mts

@@ -580,10 +580,15 @@ interface Messages {
     cropper: CropperMessages;
 }
 
+declare enum NebulaLanguage {
+    EN_US = "en-US",
+    ES = "es",
+    PT_BR = "pt-BR"
+}
 /**
  * Type to store the language in the localStorage.
  */
-type Language = 'en-US' | 'es' | 'pt-BR';
+type Language = NebulaLanguage.EN_US | NebulaLanguage.ES | NebulaLanguage.PT_BR;
 /**
  * Get the language from the localStorage.
  */
@@ -625,6 +630,21 @@ interface InputDateTimePickerSingleProps extends Omit<InputTextProps, 'onChange'
 }
 declare const InputDateTimePickerSingle: ({ placeholder, className, value, onChange, numberOfMonths, onClean, disabledDates, ...rest }: InputDateTimePickerSingleProps) => react_jsx_runtime.JSX.Element;
 
+interface InputDateRangePickerProps extends Omit<InputTextProps, 'onChange' | 'value'> {
+    value?: string;
+    onChange?: (value?: string, calendarDate?: [Date | undefined, Date | undefined]) => void;
+    numberOfMonths?: CalendarProps['numberOfMonths'];
+    placeholder?: string;
+    className?: string;
+    disabledDates?: CalendarProps['disabled'];
+    onClean?: VoidFunction;
+    popoverContainer?: HTMLElement | null;
+}
+declare const InputDateRangePicker: {
+    ({ placeholder, className, value, onChange, numberOfMonths, onClean, disabledDates, ...rest }: InputDateRangePickerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 type InputTimeProps = Omit<React.ComponentProps<typeof InputText>, 'onChange'> & {
     onChange?: (value: string) => void;
 };
@@ -885,4 +905,4 @@ declare function useClickOutside<T extends HTMLElement>(refs: PossibleRefs<T>, o
 
 declare function useKeyPress(key: string, callback: VoidFunction): void;
 
-export { Accordion, AccordionContent, AccordionDescription, AccordionItem, type AccordionProps, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Caption, type CaptionProps, Checkbox, type CheckboxProps, StyledCreatable as Creatable, Cropper, CropperCropArea, CropperDescription, CropperImage, type CropperProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FileMetadata, FileUpload, type FileUploadActions, FileUploadError, type FileUploadOptions, type FileUploadProps, type FileUploadState, type FileWithPreview, Heading, type HeadingProps, InputDatePickerSingle, type InputDatePickerSingleProps, InputDateTimePickerSingle, type InputDateTimePickerSingleProps, InputPhone, InputText, type InputTextProps, InputTime, type InputTimeProps, Label, Link, type LinkProps, NebulaI18nProvider, type NebulaI18nProviderProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Popover, PopoverContent, type PopoverContentProps, PopoverTrigger, ProfileImage, type ProfileImageProps, RadioGroup, RadioGroupItem, StyledSelect as Select, type CreateStyledSelectProps as SelectProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Slider, Space, SpaceDirectionEnum, type SpaceProps, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TextArea, type TextAreaProps, Toaster, Tooltip, type TooltipProps, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, type AccordionProps, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Caption, type CaptionProps, Checkbox, type CheckboxProps, StyledCreatable as Creatable, Cropper, CropperCropArea, CropperDescription, CropperImage, type CropperProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FileMetadata, FileUpload, type FileUploadActions, FileUploadError, type FileUploadOptions, type FileUploadProps, type FileUploadState, type FileWithPreview, Heading, type HeadingProps, InputDatePickerSingle, type InputDatePickerSingleProps, InputDateRangePicker, type InputDateRangePickerProps, InputDateTimePickerSingle, type InputDateTimePickerSingleProps, InputPhone, InputText, type InputTextProps, InputTime, type InputTimeProps, Label, Link, type LinkProps, NebulaI18nProvider, type NebulaI18nProviderProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Popover, PopoverContent, type PopoverContentProps, PopoverTrigger, ProfileImage, type ProfileImageProps, RadioGroup, RadioGroupItem, StyledSelect as Select, type CreateStyledSelectProps as SelectProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Slider, Space, SpaceDirectionEnum, type SpaceProps, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TextArea, type TextAreaProps, Toaster, Tooltip, type TooltipProps, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };

package/dist/index.d.ts

@@ -580,10 +580,15 @@ interface Messages {
     cropper: CropperMessages;
 }
 
+declare enum NebulaLanguage {
+    EN_US = "en-US",
+    ES = "es",
+    PT_BR = "pt-BR"
+}
 /**
  * Type to store the language in the localStorage.
  */
-type Language = 'en-US' | 'es' | 'pt-BR';
+type Language = NebulaLanguage.EN_US | NebulaLanguage.ES | NebulaLanguage.PT_BR;
 /**
  * Get the language from the localStorage.
  */
@@ -625,6 +630,21 @@ interface InputDateTimePickerSingleProps extends Omit<InputTextProps, 'onChange'
 }
 declare const InputDateTimePickerSingle: ({ placeholder, className, value, onChange, numberOfMonths, onClean, disabledDates, ...rest }: InputDateTimePickerSingleProps) => react_jsx_runtime.JSX.Element;
 
+interface InputDateRangePickerProps extends Omit<InputTextProps, 'onChange' | 'value'> {
+    value?: string;
+    onChange?: (value?: string, calendarDate?: [Date | undefined, Date | undefined]) => void;
+    numberOfMonths?: CalendarProps['numberOfMonths'];
+    placeholder?: string;
+    className?: string;
+    disabledDates?: CalendarProps['disabled'];
+    onClean?: VoidFunction;
+    popoverContainer?: HTMLElement | null;
+}
+declare const InputDateRangePicker: {
+    ({ placeholder, className, value, onChange, numberOfMonths, onClean, disabledDates, ...rest }: InputDateRangePickerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 type InputTimeProps = Omit<React.ComponentProps<typeof InputText>, 'onChange'> & {
     onChange?: (value: string) => void;
 };
@@ -885,4 +905,4 @@ declare function useClickOutside<T extends HTMLElement>(refs: PossibleRefs<T>, o
 
 declare function useKeyPress(key: string, callback: VoidFunction): void;
 
-export { Accordion, AccordionContent, AccordionDescription, AccordionItem, type AccordionProps, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Caption, type CaptionProps, Checkbox, type CheckboxProps, StyledCreatable as Creatable, Cropper, CropperCropArea, CropperDescription, CropperImage, type CropperProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FileMetadata, FileUpload, type FileUploadActions, FileUploadError, type FileUploadOptions, type FileUploadProps, type FileUploadState, type FileWithPreview, Heading, type HeadingProps, InputDatePickerSingle, type InputDatePickerSingleProps, InputDateTimePickerSingle, type InputDateTimePickerSingleProps, InputPhone, InputText, type InputTextProps, InputTime, type InputTimeProps, Label, Link, type LinkProps, NebulaI18nProvider, type NebulaI18nProviderProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Popover, PopoverContent, type PopoverContentProps, PopoverTrigger, ProfileImage, type ProfileImageProps, RadioGroup, RadioGroupItem, StyledSelect as Select, type CreateStyledSelectProps as SelectProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Slider, Space, SpaceDirectionEnum, type SpaceProps, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TextArea, type TextAreaProps, Toaster, Tooltip, type TooltipProps, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, type AccordionProps, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Caption, type CaptionProps, Checkbox, type CheckboxProps, StyledCreatable as Creatable, Cropper, CropperCropArea, CropperDescription, CropperImage, type CropperProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FileMetadata, FileUpload, type FileUploadActions, FileUploadError, type FileUploadOptions, type FileUploadProps, type FileUploadState, type FileWithPreview, Heading, type HeadingProps, InputDatePickerSingle, type InputDatePickerSingleProps, InputDateRangePicker, type InputDateRangePickerProps, InputDateTimePickerSingle, type InputDateTimePickerSingleProps, InputPhone, InputText, type InputTextProps, InputTime, type InputTimeProps, Label, Link, type LinkProps, NebulaI18nProvider, type NebulaI18nProviderProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Popover, PopoverContent, type PopoverContentProps, PopoverTrigger, ProfileImage, type ProfileImageProps, RadioGroup, RadioGroupItem, StyledSelect as Select, type CreateStyledSelectProps as SelectProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Slider, Space, SpaceDirectionEnum, type SpaceProps, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TextArea, type TextAreaProps, Toaster, Tooltip, type TooltipProps, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };

package/dist/index.js

@@ -1807,9 +1807,9 @@ var setNebulaLanguage = (language) => {
 var messages19 = /* @__PURE__ */ new Map([
   [null, enMessages],
   [void 0, enMessages],
-  ["en-US", enMessages],
-  ["es", esMessages],
-  ["pt-BR", ptBrMessages]
+  ["en-US" /* EN_US */, enMessages],
+  ["es" /* ES */, esMessages],
+  ["pt-BR" /* PT_BR */, ptBrMessages]
 ]);
 var NebulaI18nContext = React8.createContext(
   null
@@ -1823,13 +1823,13 @@ var NebulaI18nProvider = ({
     [customI18nStorageKey]
   );
   const [messages20, setMessages] = React8.useState(
-    messages19.get(getNebulaLanguage()) ?? messages19.get("en-US")
+    messages19.get(getNebulaLanguage()) ?? messages19.get("en-US" /* EN_US */)
   );
   const handleStorageChange = React8.useCallback(
     ({ detail }) => {
       if (detail.key === storageKey) {
         setMessages(
-          messages19.get(detail.value) ?? messages19.get("en-US")
+          messages19.get(detail.value) ?? messages19.get("en-US" /* EN_US */)
         );
       }
     },
@@ -4010,6 +4010,24 @@ var formatDateToSubmit = (dateStr, timeFallback = "23:59") => {
 };
 
 // src/utils/valid-date-format.ts
+function dateParts(dateSlice, locale, time) {
+  const [day, month, year] = [
+    locale !== "en-US" /* EN_US */ ? dateSlice.substring(0, 2) : dateSlice.substring(3, 5),
+    locale === "en-US" /* EN_US */ ? dateSlice.substring(0, 2) : dateSlice.substring(3, 5),
+    dateSlice.substring(6)
+  ];
+  const [hour = 0, minute = 0] = time?.split(":") ?? [];
+  return {
+    date: new Date(
+      Number(year),
+      Number(month) - 1,
+      Number(day),
+      Number(Math.min(Math.max(Number(hour), 0), 23)),
+      Number(Math.min(Math.max(Number(minute), 0), 59))
+    ),
+    dateParts: [Number(day), Number(month), Number(year)]
+  };
+}
 function dateFormatIsValid(dateStr, locale) {
   const regexBR = /^(?:(?:31\/(0[13578]|1[02]))\/(?:\d{4})|(?:29|30)\/(0[13-9]|1[0-2])\/(?:\d{4})|29\/02\/(?:\d\d(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)|(?:0[1-9]|1\d|2[0-8])\/(0[1-9]|1[0-2])\/(?:\d{4}))$/;
   const regexUS = /^(?:(?:(0[13578]|1[02])\/31)\/(?:\d{4})|(?:(0[13-9]|1[0-2])\/(29|30))\/(?:\d{4})|(?:02\/29)\/(?:\d\d(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)|(?:(0[1-9]|1[0-2])\/(0[1-9]|1\d|2[0-8]))\/(?:\d{4}))$/;
@@ -4090,13 +4108,8 @@ var InputDatePickerSingle = ({
       handleClearValue();
       return;
     }
-    const [day, month2, year] = [
-      locale !== "en-US" ? dateSlice.substring(0, 2) : dateSlice.substring(3, 5),
-      locale === "en-US" ? dateSlice.substring(0, 2) : dateSlice.substring(3, 5),
-      dateSlice.substring(6)
-    ];
-    const date = new Date(Number(year), Number(month2) - 1, Number(day));
-    if ([day, month2, year].some((value2) => !value2) || !dateFormatIsValid(dateSlice, locale) || !dateFns.isValid(new Date(date)) || !dateIsAvailable(date, disabledDates)) {
+    const { date } = dateParts(dateSlice, locale);
+    if (!dateFns.isValid(date) || !dateFormatIsValid(dateSlice, locale) || !dateIsAvailable(date, disabledDates)) {
       onChange?.(text);
       handleClearValue();
       return;
@@ -4314,13 +4327,8 @@ var InputDateTimePickerSingle = ({
       handleClearValue();
       return;
     }
-    const [day, month2, year] = [
-      locale !== "en-US" ? dateSlice.substring(0, 2) : dateSlice.substring(3, 5),
-      locale === "en-US" ? dateSlice.substring(0, 2) : dateSlice.substring(3, 5),
-      dateSlice.substring(6)
-    ];
-    const date = new Date(Number(year), Number(month2) - 1, Number(day));
-    if ([day, month2, year].some((value2) => !value2) || !dateFormatIsValid(dateSlice, locale) || !dateFns.isValid(new Date(date)) || !dateIsAvailable(date, disabledDates)) {
+    const date = dateParts(dateSlice, locale, hourSlice).date;
+    if (!dateFns.isValid(date) || !dateFormatIsValid(dateSlice, locale) || !dateIsAvailable(date, disabledDates)) {
       onChange?.(text);
       handleClearValue();
       return;
@@ -4491,6 +4499,143 @@ var InputDateTimePickerSingle = ({
     ) })
   ] });
 };
+var InputDateRangePicker = ({
+  placeholder,
+  className,
+  value,
+  onChange,
+  numberOfMonths = 1,
+  onClean,
+  disabledDates,
+  ...rest
+}) => {
+  const [month, setMonth] = React8.useState(/* @__PURE__ */ new Date());
+  const [innerValue, setInnerValue] = React8.useState();
+  const [popoverIsOpen, setPopoverIsOpen] = React8.useState(false);
+  const maskOptions = {
+    mask: "__/__/____ - __/__/____",
+    replacement: { _: /\d/ }
+  };
+  const inputRef = mask.useMask(maskOptions);
+  const { locale } = useNebulaI18n();
+  const conteinerRef = React8.useRef(null);
+  const calendarRef = React8.useRef(null);
+  useClickOutside([conteinerRef, calendarRef], () => {
+    setPopoverIsOpen(false);
+  });
+  useKeyPress("Escape", () => {
+    setPopoverIsOpen(false);
+  });
+  const handleInnerInputChange = (value2) => {
+    const [startDate, endDate] = value2.split(" - ");
+    const dateStart = startDate && dateFormatIsValid(startDate, locale) ? dateParts(startDate, locale).date : void 0;
+    const dateEnd = endDate && dateFormatIsValid(endDate, locale) ? dateParts(endDate, locale).date : void 0;
+    onChange?.(value2, [dateStart, dateEnd]);
+  };
+  const handleChangeCalendarDate = React8.useCallback(
+    (date) => {
+      setInnerValue(date);
+      const [from, to] = date;
+      const fromStr = from ? Intl.DateTimeFormat(locale ?? "en-US", {
+        month: "2-digit",
+        year: "numeric",
+        day: "2-digit"
+      }).format(from) : "";
+      const toStr = to ? Intl.DateTimeFormat(locale ?? "en-US", {
+        month: "2-digit",
+        year: "numeric",
+        day: "2-digit"
+      }).format(to) : "";
+      onChange?.(
+        [fromStr, toStr !== fromStr ? toStr : void 0].filter(Boolean).join(" - "),
+        date
+      );
+      setMonth(to ?? /* @__PURE__ */ new Date());
+    },
+    [locale, onChange]
+  );
+  React8.useEffect(() => {
+    if (value) {
+      const [startDate, endDate] = value.split(" - ");
+      const dateStart = startDate && dateFormatIsValid(startDate, locale) ? dateParts(startDate, locale).date : void 0;
+      const dateEnd = endDate && dateFormatIsValid(endDate, locale) ? dateParts(endDate, locale).date : void 0;
+      setInnerValue(
+        [dateStart, dateEnd].filter(Boolean)
+      );
+      if (dateEnd instanceof Date) {
+        setMonth(dateEnd);
+      } else {
+        setMonth(/* @__PURE__ */ new Date());
+      }
+    } else {
+      setInnerValue([void 0, void 0]);
+      setMonth(/* @__PURE__ */ new Date());
+    }
+  }, [value, locale]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds w-full", ref: conteinerRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputText,
+      {
+        ref: inputRef,
+        placeholder,
+        value,
+        className,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.CalendarIcon,
+          {
+            tabIndex: 0,
+            role: "button",
+            onClick: () => setPopoverIsOpen((s) => !s),
+            onKeyUp: (e) => {
+              if (e.key === "Enter") {
+                setPopoverIsOpen((s) => !s);
+              }
+            },
+            className: "nebula-ds cursor-pointer"
+          }
+        ),
+        iconPlacement: "end",
+        onKeyUp: (e) => {
+          if (e.key === "ArrowDown") {
+            setPopoverIsOpen(true);
+          }
+        },
+        onClean: onClean ? () => {
+          onClean();
+        } : void 0,
+        ...rest,
+        onChange: (e) => handleInnerInputChange(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds  relative", children: popoverIsOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "nebula-ds absolute top-full left-0-0 z-40 pb-2 pt-1",
+        ref: calendarRef,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Calendar,
+          {
+            required: false,
+            mode: "range",
+            numberOfMonths,
+            disabled: disabledDates,
+            month,
+            onPrevClick: setMonth,
+            onNextClick: setMonth,
+            selected: {
+              from: innerValue?.[0],
+              to: innerValue?.[1]
+            },
+            onSelect: (date) => {
+              handleChangeCalendarDate([date?.from, date?.to]);
+            }
+          }
+        )
+      }
+    ) })
+  ] });
+};
+InputDateRangePicker.displayName = "InputDateRangePicker";
 var FileUploadError = /* @__PURE__ */ ((FileUploadError4) => {
   FileUploadError4["MAX_FILES_EXCEEDED"] = "MAX_FILES_EXCEEDED";
   FileUploadError4["MAXIMUM_FILE_SIZE_EXCEEDED"] = "MAXIMUM_FILE_SIZE_EXCEEDED";
@@ -6709,6 +6854,7 @@ exports.FileUpload = FileUpload;
 exports.FileUploadError = FileUploadError;
 exports.Heading = Heading;
 exports.InputDatePickerSingle = InputDatePickerSingle;
+exports.InputDateRangePicker = InputDateRangePicker;
 exports.InputDateTimePickerSingle = InputDateTimePickerSingle;
 exports.InputPhone = InputPhone;
 exports.InputText = InputText;

package/dist/index.mjs

@@ -1765,9 +1765,9 @@ var setNebulaLanguage = (language) => {
 var messages19 = /* @__PURE__ */ new Map([
   [null, enMessages],
   [void 0, enMessages],
-  ["en-US", enMessages],
-  ["es", esMessages],
-  ["pt-BR", ptBrMessages]
+  ["en-US" /* EN_US */, enMessages],
+  ["es" /* ES */, esMessages],
+  ["pt-BR" /* PT_BR */, ptBrMessages]
 ]);
 var NebulaI18nContext = createContext(
   null
@@ -1781,13 +1781,13 @@ var NebulaI18nProvider = ({
     [customI18nStorageKey]
   );
   const [messages20, setMessages] = useState(
-    messages19.get(getNebulaLanguage()) ?? messages19.get("en-US")
+    messages19.get(getNebulaLanguage()) ?? messages19.get("en-US" /* EN_US */)
   );
   const handleStorageChange = useCallback(
     ({ detail }) => {
       if (detail.key === storageKey) {
         setMessages(
-          messages19.get(detail.value) ?? messages19.get("en-US")
+          messages19.get(detail.value) ?? messages19.get("en-US" /* EN_US */)
         );
       }
     },
@@ -3968,6 +3968,24 @@ var formatDateToSubmit = (dateStr, timeFallback = "23:59") => {
 };
 
 // src/utils/valid-date-format.ts
+function dateParts(dateSlice, locale, time) {
+  const [day, month, year] = [
+    locale !== "en-US" /* EN_US */ ? dateSlice.substring(0, 2) : dateSlice.substring(3, 5),
+    locale === "en-US" /* EN_US */ ? dateSlice.substring(0, 2) : dateSlice.substring(3, 5),
+    dateSlice.substring(6)
+  ];
+  const [hour = 0, minute = 0] = time?.split(":") ?? [];
+  return {
+    date: new Date(
+      Number(year),
+      Number(month) - 1,
+      Number(day),
+      Number(Math.min(Math.max(Number(hour), 0), 23)),
+      Number(Math.min(Math.max(Number(minute), 0), 59))
+    ),
+    dateParts: [Number(day), Number(month), Number(year)]
+  };
+}
 function dateFormatIsValid(dateStr, locale) {
   const regexBR = /^(?:(?:31\/(0[13578]|1[02]))\/(?:\d{4})|(?:29|30)\/(0[13-9]|1[0-2])\/(?:\d{4})|29\/02\/(?:\d\d(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)|(?:0[1-9]|1\d|2[0-8])\/(0[1-9]|1[0-2])\/(?:\d{4}))$/;
   const regexUS = /^(?:(?:(0[13578]|1[02])\/31)\/(?:\d{4})|(?:(0[13-9]|1[0-2])\/(29|30))\/(?:\d{4})|(?:02\/29)\/(?:\d\d(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)|(?:(0[1-9]|1[0-2])\/(0[1-9]|1\d|2[0-8]))\/(?:\d{4}))$/;
@@ -4048,13 +4066,8 @@ var InputDatePickerSingle = ({
       handleClearValue();
       return;
     }
-    const [day, month2, year] = [
-      locale !== "en-US" ? dateSlice.substring(0, 2) : dateSlice.substring(3, 5),
-      locale === "en-US" ? dateSlice.substring(0, 2) : dateSlice.substring(3, 5),
-      dateSlice.substring(6)
-    ];
-    const date = new Date(Number(year), Number(month2) - 1, Number(day));
-    if ([day, month2, year].some((value2) => !value2) || !dateFormatIsValid(dateSlice, locale) || !isValid(new Date(date)) || !dateIsAvailable(date, disabledDates)) {
+    const { date } = dateParts(dateSlice, locale);
+    if (!isValid(date) || !dateFormatIsValid(dateSlice, locale) || !dateIsAvailable(date, disabledDates)) {
       onChange?.(text);
       handleClearValue();
       return;
@@ -4272,13 +4285,8 @@ var InputDateTimePickerSingle = ({
       handleClearValue();
       return;
     }
-    const [day, month2, year] = [
-      locale !== "en-US" ? dateSlice.substring(0, 2) : dateSlice.substring(3, 5),
-      locale === "en-US" ? dateSlice.substring(0, 2) : dateSlice.substring(3, 5),
-      dateSlice.substring(6)
-    ];
-    const date = new Date(Number(year), Number(month2) - 1, Number(day));
-    if ([day, month2, year].some((value2) => !value2) || !dateFormatIsValid(dateSlice, locale) || !isValid(new Date(date)) || !dateIsAvailable(date, disabledDates)) {
+    const date = dateParts(dateSlice, locale, hourSlice).date;
+    if (!isValid(date) || !dateFormatIsValid(dateSlice, locale) || !dateIsAvailable(date, disabledDates)) {
       onChange?.(text);
       handleClearValue();
       return;
@@ -4449,6 +4457,143 @@ var InputDateTimePickerSingle = ({
     ) })
   ] });
 };
+var InputDateRangePicker = ({
+  placeholder,
+  className,
+  value,
+  onChange,
+  numberOfMonths = 1,
+  onClean,
+  disabledDates,
+  ...rest
+}) => {
+  const [month, setMonth] = useState(/* @__PURE__ */ new Date());
+  const [innerValue, setInnerValue] = useState();
+  const [popoverIsOpen, setPopoverIsOpen] = useState(false);
+  const maskOptions = {
+    mask: "__/__/____ - __/__/____",
+    replacement: { _: /\d/ }
+  };
+  const inputRef = useMask(maskOptions);
+  const { locale } = useNebulaI18n();
+  const conteinerRef = useRef(null);
+  const calendarRef = useRef(null);
+  useClickOutside([conteinerRef, calendarRef], () => {
+    setPopoverIsOpen(false);
+  });
+  useKeyPress("Escape", () => {
+    setPopoverIsOpen(false);
+  });
+  const handleInnerInputChange = (value2) => {
+    const [startDate, endDate] = value2.split(" - ");
+    const dateStart = startDate && dateFormatIsValid(startDate, locale) ? dateParts(startDate, locale).date : void 0;
+    const dateEnd = endDate && dateFormatIsValid(endDate, locale) ? dateParts(endDate, locale).date : void 0;
+    onChange?.(value2, [dateStart, dateEnd]);
+  };
+  const handleChangeCalendarDate = useCallback(
+    (date) => {
+      setInnerValue(date);
+      const [from, to] = date;
+      const fromStr = from ? Intl.DateTimeFormat(locale ?? "en-US", {
+        month: "2-digit",
+        year: "numeric",
+        day: "2-digit"
+      }).format(from) : "";
+      const toStr = to ? Intl.DateTimeFormat(locale ?? "en-US", {
+        month: "2-digit",
+        year: "numeric",
+        day: "2-digit"
+      }).format(to) : "";
+      onChange?.(
+        [fromStr, toStr !== fromStr ? toStr : void 0].filter(Boolean).join(" - "),
+        date
+      );
+      setMonth(to ?? /* @__PURE__ */ new Date());
+    },
+    [locale, onChange]
+  );
+  useEffect(() => {
+    if (value) {
+      const [startDate, endDate] = value.split(" - ");
+      const dateStart = startDate && dateFormatIsValid(startDate, locale) ? dateParts(startDate, locale).date : void 0;
+      const dateEnd = endDate && dateFormatIsValid(endDate, locale) ? dateParts(endDate, locale).date : void 0;
+      setInnerValue(
+        [dateStart, dateEnd].filter(Boolean)
+      );
+      if (dateEnd instanceof Date) {
+        setMonth(dateEnd);
+      } else {
+        setMonth(/* @__PURE__ */ new Date());
+      }
+    } else {
+      setInnerValue([void 0, void 0]);
+      setMonth(/* @__PURE__ */ new Date());
+    }
+  }, [value, locale]);
+  return /* @__PURE__ */ jsxs("div", { className: "nebula-ds w-full", ref: conteinerRef, children: [
+    /* @__PURE__ */ jsx(
+      InputText,
+      {
+        ref: inputRef,
+        placeholder,
+        value,
+        className,
+        icon: /* @__PURE__ */ jsx(
+          CalendarIcon,
+          {
+            tabIndex: 0,
+            role: "button",
+            onClick: () => setPopoverIsOpen((s) => !s),
+            onKeyUp: (e) => {
+              if (e.key === "Enter") {
+                setPopoverIsOpen((s) => !s);
+              }
+            },
+            className: "nebula-ds cursor-pointer"
+          }
+        ),
+        iconPlacement: "end",
+        onKeyUp: (e) => {
+          if (e.key === "ArrowDown") {
+            setPopoverIsOpen(true);
+          }
+        },
+        onClean: onClean ? () => {
+          onClean();
+        } : void 0,
+        ...rest,
+        onChange: (e) => handleInnerInputChange(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "nebula-ds  relative", children: popoverIsOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "nebula-ds absolute top-full left-0-0 z-40 pb-2 pt-1",
+        ref: calendarRef,
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            required: false,
+            mode: "range",
+            numberOfMonths,
+            disabled: disabledDates,
+            month,
+            onPrevClick: setMonth,
+            onNextClick: setMonth,
+            selected: {
+              from: innerValue?.[0],
+              to: innerValue?.[1]
+            },
+            onSelect: (date) => {
+              handleChangeCalendarDate([date?.from, date?.to]);
+            }
+          }
+        )
+      }
+    ) })
+  ] });
+};
+InputDateRangePicker.displayName = "InputDateRangePicker";
 var FileUploadError = /* @__PURE__ */ ((FileUploadError4) => {
   FileUploadError4["MAX_FILES_EXCEEDED"] = "MAX_FILES_EXCEEDED";
   FileUploadError4["MAXIMUM_FILE_SIZE_EXCEEDED"] = "MAXIMUM_FILE_SIZE_EXCEEDED";
@@ -6583,4 +6728,4 @@ var tailwind = {
   // plugin: () => require("tailwindcss")("node_modules/@nebulareact/dist/tailwind.config.js"),
 };
 
-export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Caption, Checkbox, StyledCreatable as Creatable, Cropper2 as Cropper, CropperCropArea2 as CropperCropArea, CropperDescription2 as CropperDescription, CropperImage2 as CropperImage, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FileUploadError, Heading, InputDatePickerSingle, InputDateTimePickerSingle, InputPhone, InputText, InputTime, Label, Link, NebulaI18nProvider, Pagination, Paragraph, Popover, PopoverContent, PopoverTrigger, ProfileImage, RadioGroup2 as RadioGroup, RadioGroupItem, StyledSelect as Select, Separator2 as Separator, Skeleton, Slider, Space, SpaceDirectionEnum, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TextArea, Toaster, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages19 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Caption, Checkbox, StyledCreatable as Creatable, Cropper2 as Cropper, CropperCropArea2 as CropperCropArea, CropperDescription2 as CropperDescription, CropperImage2 as CropperImage, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FileUploadError, Heading, InputDatePickerSingle, InputDateRangePicker, InputDateTimePickerSingle, InputPhone, InputText, InputTime, Label, Link, NebulaI18nProvider, Pagination, Paragraph, Popover, PopoverContent, PopoverTrigger, ProfileImage, RadioGroup2 as RadioGroup, RadioGroupItem, StyledSelect as Select, Separator2 as Separator, Skeleton, Slider, Space, SpaceDirectionEnum, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TextArea, Toaster, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages19 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "1.3.3-beta.1",
+  "version": "1.4.0-beta.1",
   "description": "React components for Nebula Design System",
   "publishConfig": {
     "access": "public"