@ttoss/components 2.21.2 → 2.22.0

package/README.md

@@ -105,6 +105,8 @@ import { DatePicker } from '@ttoss/components';
 />;
 ```
 
+Dates, the placeholder and the calendar's month and weekday names follow the `I18nProvider` locale (the calendar supports English, Spanish and Portuguese, falling back to English). Preset labels are yours to translate.
+
 ### Drawer
 
 Slide-out panels from screen edges. [Docs](https://storybook.ttoss.dev/?path=/docs/components-drawer--docs)

package/dist/index.d.mts

@@ -163,7 +163,7 @@ declare const Accordion: ({
   ...boxProps
 }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion
-//#region src/components/DatePicker/DatePicker.d.ts
+//#region src/components/DatePicker/DatePicker.types.d.ts
 interface DateRange {
   from: Date | undefined;
   to: Date | undefined;
@@ -172,6 +172,8 @@ interface DateRangePreset {
   label: string;
   getValue: () => DateRange;
 }
+//#endregion
+//#region src/components/DatePicker/DatePicker.d.ts
 interface DatePickerProps {
   label?: string;
   value?: DateRange;
@@ -1053,4 +1055,4 @@ declare const Tabs: {
 declare const ToastContainer: (props: ToastContainerProps) => import("react/jsx-runtime").JSX.Element;
 declare const toast: typeof toast$1;
 //#endregion
-export { Accordion, AccordionItem, AccordionProps, AccordionRenderItemProps, BaseMetric, ConsentScope, DateMetric, DatePicker, DateRange, Drawer, DrawerProps, EnhancedTitle, EnhancedTitleBadge, EnhancedTitleProps, EnhancedTitleVariant, FileUploadState, FileUploader, FileUploaderProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, JsonEditor, JsonView, type LinkComponentProps, List, ListItem, ListItemProps, ListProps, LockedOverlay, Markdown, MarkdownProps, Menu, MenuProps, Metric, MetricCard, MetricCardProps, Modal, ModalProps, NavList, type NavListGroup, type NavListItem, type NavListProps, Notification, NotificationAction, NotificationButton, NotificationButtonProps, NotificationCard, NotificationCardProps, NotificationsMenu, NumberMetric, OAuthConsent, OAuthConsentLabels, OAuthConsentProps, OnFilesChange, OnRemove, OnUpload, OnUploadComplete, OnUploadError, OnUploadProgress, OnUploadStart, PercentageMetric, Search, SearchProps, SpotlightCard, SpotlightCardProps, type TabListProps, type TabPanelProps, type TabProps, Table, Tabs, type TabsProps, ToastContainer, type ToastContainerProps, type ToastOptions, UploadResult, UploadedFile, collectGrantedScopes, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };
+export { Accordion, AccordionItem, AccordionProps, AccordionRenderItemProps, BaseMetric, ConsentScope, DateMetric, DatePicker, type DateRange, Drawer, DrawerProps, EnhancedTitle, EnhancedTitleBadge, EnhancedTitleProps, EnhancedTitleVariant, FileUploadState, FileUploader, FileUploaderProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, JsonEditor, JsonView, type LinkComponentProps, List, ListItem, ListItemProps, ListProps, LockedOverlay, Markdown, MarkdownProps, Menu, MenuProps, Metric, MetricCard, MetricCardProps, Modal, ModalProps, NavList, type NavListGroup, type NavListItem, type NavListProps, Notification, NotificationAction, NotificationButton, NotificationButtonProps, NotificationCard, NotificationCardProps, NotificationsMenu, NumberMetric, OAuthConsent, OAuthConsentLabels, OAuthConsentProps, OnFilesChange, OnRemove, OnUpload, OnUploadComplete, OnUploadError, OnUploadProgress, OnUploadStart, PercentageMetric, Search, SearchProps, SpotlightCard, SpotlightCardProps, type TabListProps, type TabPanelProps, type TabProps, Table, Tabs, type TabsProps, ToastContainer, type ToastContainerProps, type ToastOptions, UploadResult, UploadedFile, collectGrantedScopes, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };

package/dist/index.mjs

@@ -2,11 +2,11 @@
 import { Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Divider, Flex, Heading, IconButton, Input, Label, Link, Stack, Tag, Text, TooltipIcon, keyframes, useResponsiveValue, useTheme } from "@ttoss/ui";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { defineMessages, useI18n } from "@ttoss/react-i18n";
 import { Icon } from "@ttoss/react-icons";
 import { DayPicker } from "react-day-picker";
-import { ptBR } from "react-day-picker/locale";
+import { enUS, es, ptBR } from "react-day-picker/locale";
 import DrawerUi from "react-modern-drawer";
-import { defineMessages, useI18n } from "@ttoss/react-i18n";
 import { JsonEditor } from "json-edit-react";
 import { JsonView } from "react-json-view-lite";
 import ReactMarkdown from "react-markdown";
@@ -189,72 +189,415 @@ var Accordion = ({
 };
 
 //#endregion
-//#region src/components/DatePicker/DatePicker.tsx
-var formatDate = date => {
-  return date.toLocaleDateString("pt-BR");
+//#region src/components/DatePicker/DatePicker.styles.ts
+var triggerSx = {
+  width: "100%",
+  justifyContent: "space-between",
+  fontSize: ["14px", "14px"],
+  fontWeight: 400,
+  backgroundColor: "white",
+  padding: "8px 12px",
+  borderRadius: "lg",
+  border: "md",
+  borderColor: "display.border.muted.default",
+  height: "40px",
+  minWidth: ["auto", "240px"],
+  "&:disabled": {
+    borderColor: "display.border.muted.default"
+  }
 };
-var DatePicker = ({
-  label,
-  value,
+var triggerTextSx = {
+  fontSize: ["12px", "14px"],
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var backdropSx = {
+  display: ["block", "none"],
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  zIndex: 49
+};
+var panelSx = {
+  position: ["fixed", "absolute"],
+  top: ["auto", "calc(100% + 4px)"],
+  bottom: ["0", "auto"],
+  left: ["0", "0"],
+  right: ["0", "auto"],
+  width: ["100%", "auto"],
+  maxWidth: ["100%", "650px"],
+  zIndex: 50,
+  backgroundColor: "white",
+  border: "1px solid",
+  borderColor: "display.border.muted.default",
+  borderRadius: ["16px 16px 0 0", "8px"],
+  boxShadow: ["0 -4px 6px -1px rgba(0, 0, 0, 0.1)", "0 4px 6px -1px rgba(0, 0, 0, 0.1)"],
+  overflow: "hidden",
+  maxHeight: ["80vh", "none"],
+  display: "flex",
+  flexDirection: "column"
+};
+var mobileHeaderSx = {
+  display: ["flex", "none"],
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "12px 16px",
+  borderBottom: "1px solid",
+  borderColor: "display.border.muted.default"
+};
+var closeButtonSx = {
+  padding: "4px",
+  minWidth: "auto",
+  width: "32px",
+  height: "32px"
+};
+var panelBodySx = {
+  minHeight: "300px",
+  flexDirection: ["column", "row"],
+  maxHeight: ["calc(80vh - 60px)", "none"],
+  overflow: ["auto", "visible"]
+};
+var presetsSx = {
+  flexDirection: ["row", "column"],
+  gap: "4px",
+  padding: ["8px", "12px"],
+  borderRight: ["none", "1px solid"],
+  borderBottom: ["1px solid", "none"],
+  borderColor: "display.border.muted.default",
+  backgroundColor: "navigation.background.muted.default",
+  minWidth: ["auto", "140px"],
+  width: ["100%", "auto"],
+  overflowX: ["auto", "visible"],
+  overflowY: ["visible", "auto"],
+  flexWrap: ["nowrap", "wrap"],
+  "@media (max-width: 768px)": {
+    "&::-webkit-scrollbar": {
+      display: "none"
+    },
+    scrollbarWidth: "none"
+  }
+};
+var presetButtonSx = {
+  justifyContent: ["center", "flex-start"],
+  fontSize: ["12px", "14px"],
+  fontWeight: 400,
+  padding: ["6px 8px", "8px 12px"],
+  color: "display.text.secondary.default",
+  backgroundColor: "transparent",
+  whiteSpace: "nowrap",
+  minWidth: ["auto", "auto"],
+  flexShrink: 0,
+  "&:hover": {
+    backgroundColor: "input.background.muted.active"
+  }
+};
+var calendarSx = {
+  padding: ["12px", "16px"],
+  flex: 1,
+  overflow: "auto",
+  "& .rdp": {
+    margin: 0
+  },
+  "& .rdp-month": {
+    width: "100%"
+  },
+  "& .rdp-day_button": {
+    borderRadius: "50% !important",
+    border: "none",
+    fontSize: ["12px", "14px"],
+    width: ["32px", "36px"],
+    height: ["32px", "36px"],
+    cursor: "pointer"
+  },
+  "& .rdp-range_start .rdp-day_button": {
+    backgroundColor: "action.background.accent.default",
+    color: "black"
+  },
+  "& .rdp-range_end .rdp-day_button": {
+    backgroundColor: "action.background.accent.default",
+    color: "black"
+  },
+  "& .rdp-day_button:hover": {
+    backgroundColor: "action.background.primary.default",
+    color: "action.text.primary.default"
+  },
+  "& .rdp-day_selected": {
+    backgroundColor: "action.background.accent.default",
+    color: "white",
+    fontWeight: 600
+  },
+  "& .rdp-day_range_middle": {
+    backgroundColor: "action.background.accent.default",
+    color: "white"
+  },
+  "& .rdp-day_range_start, & .rdp-day_range_end": {
+    backgroundColor: "action.background.accent.default",
+    color: "white",
+    fontWeight: 600
+  },
+  "& .rdp-weekday": {
+    fontSize: ["10px", "12px"],
+    fontWeight: 500,
+    color: "display.text.muted.default"
+  },
+  "& .rdp-month_caption": {
+    fontSize: ["12px", "14px"],
+    fontWeight: 600,
+    marginBottom: ["12px", "16px"]
+  },
+  "@media (max-width: 768px)": {
+    "& .rdp-caption": {
+      marginBottom: "8px"
+    },
+    "& .rdp-table": {
+      width: "100%"
+    }
+  }
+};
+
+//#endregion
+//#region src/components/DatePicker/DatePickerPanel.tsx
+var toDayPickerSelection = selection => {
+  if (!selection?.from) return;
+  return {
+    from: selection.from,
+    to: selection.to ?? selection.from
+  };
+};
+var Presets = ({
   presets,
-  onChange,
-  disabled
+  onPresetClick
+}) => {
+  return /* @__PURE__ */jsx(Flex, {
+    sx: presetsSx,
+    children: presets.map(preset => {
+      return /* @__PURE__ */jsx(Button, {
+        variant: "ghost",
+        onClick: () => {
+          return onPresetClick(preset);
+        },
+        sx: presetButtonSx,
+        children: preset.label
+      }, preset.label);
+    })
+  });
+};
+var DatePickerPanel = ({
+  title,
+  presets,
+  pickerSelection,
+  dayPickerLocale,
+  disabled,
+  onClose,
+  onPresetClick,
+  onSelect,
+  onDayClick
+}) => {
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx(Box, {
+      sx: backdropSx,
+      onClick: onClose
+    }), /* @__PURE__ */jsxs(Box, {
+      sx: panelSx,
+      children: [/* @__PURE__ */jsxs(Flex, {
+        sx: mobileHeaderSx,
+        children: [/* @__PURE__ */jsx(Text, {
+          sx: {
+            fontSize: "16px",
+            fontWeight: 600
+          },
+          children: title
+        }), /* @__PURE__ */jsx(Button, {
+          variant: "ghost",
+          onClick: onClose,
+          sx: closeButtonSx,
+          children: /* @__PURE__ */jsx(Icon, {
+            icon: "mdi:close",
+            size: 20
+          })
+        })]
+      }), /* @__PURE__ */jsxs(Flex, {
+        sx: panelBodySx,
+        children: [presets && presets.length > 0 && /* @__PURE__ */jsx(Presets, {
+          presets,
+          onPresetClick
+        }), /* @__PURE__ */jsx(Box, {
+          sx: calendarSx,
+          children: /* @__PURE__ */jsx(DayPicker, {
+            disabled,
+            mode: "range",
+            locale: dayPickerLocale,
+            selected: toDayPickerSelection(pickerSelection),
+            onSelect: selected => {
+              return onSelect(selected);
+            },
+            onDayClick,
+            weekStartsOn: 1,
+            showOutsideDays: true
+          })
+        })]
+      })]
+    })]
+  });
+};
+
+//#endregion
+//#region src/components/DatePicker/dayPickerLocale.ts
+var DAY_PICKER_LOCALES = {
+  en: enUS,
+  es,
+  pt: ptBR
+};
+/**
+* The calendar locale (month and weekday names) for an intl locale, matched
+* by language and falling back to English.
+*/
+var getDayPickerLocale = locale => {
+  return DAY_PICKER_LOCALES[locale?.split("-")[0].toLowerCase() ?? "en"] ?? enUS;
+};
+
+//#endregion
+//#region src/components/DatePicker/useDatePicker.ts
+var isFullRange = range => {
+  return Boolean(range?.from && range?.to);
+};
+var isPartialRange = range => {
+  return Boolean(range?.from && !range?.to);
+};
+var resolveResetToSingleDay = ({
+  selected,
+  pickerSelection,
+  isResettingRange
+}) => {
+  if (!isResettingRange || selected || !isPartialRange(pickerSelection)) return;
+  const day = pickerSelection.from;
+  return [{
+    kind: "commit",
+    range: {
+      from: day,
+      to: day
+    },
+    close: true
+  }];
+};
+var resolveRestartFromClickedDay = ({
+  selected,
+  date,
+  pickerSelection
+}) => {
+  if (!isFullRange(date) || isPartialRange(pickerSelection) || !isFullRange(selected)) return;
+  return [{
+    kind: "edit",
+    selection: {
+      from: selected.from.getTime() === date.from.getTime() ? selected.to : selected.from,
+      to: void 0
+    }
+  }];
+};
+/**
+* What a DayPicker `onSelect` means for the picker, given the committed range
+* and the range being edited.
+*/
+var resolveDayPickerSelect = args => {
+  const special = resolveResetToSingleDay(args) ?? resolveRestartFromClickedDay(args);
+  if (special) return special;
+  const {
+    selected
+  } = args;
+  const edit = {
+    kind: "edit",
+    selection: selected
+  };
+  if (isFullRange(selected)) return [edit, {
+    kind: "commit",
+    range: selected,
+    close: true
+  }];
+  if (!selected?.from && !selected?.to) return [edit, {
+    kind: "commit",
+    range: void 0,
+    close: false
+  }];
+  return [edit];
+};
+var useCloseOnClickOutside = ({
+  containerRef,
+  isOpen,
+  close
 }) => {
-  const [date, setDate] = React.useState(value);
-  const [pickerSelection, setPickerSelection] = React.useState(value);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const containerRef = React.useRef(null);
-  const isResettingRangeRef = React.useRef(false);
-  React.useEffect(() => {
-    setDate(value);
-  }, [value]);
-  React.useEffect(() => {
-    if (isOpen) setPickerSelection(date);
-  }, [isOpen, date]);
   React.useEffect(() => {
     const handleClickOutside = event => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) setIsOpen(false);
+      if (containerRef.current && !containerRef.current.contains(event.target)) close();
     };
     if (isOpen) document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [isOpen]);
+  }, [containerRef, isOpen, close]);
+};
+/**
+* Selection state of the DatePicker: `date` is the committed range shown on
+* the trigger, `pickerSelection` the range being edited while the calendar is
+* open.
+*/
+var useDatePicker = ({
+  value,
+  onChange,
+  containerRef
+}) => {
+  const [date, setDate] = React.useState(value);
+  const [pickerSelection, setPickerSelection] = React.useState(value);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [prevValue, setPrevValue] = React.useState(value);
+  const isResettingRangeRef = React.useRef(false);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setDate(value);
+    if (isOpen) setPickerSelection(value);
+  }
+  const close = React.useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  useCloseOnClickOutside({
+    containerRef,
+    isOpen,
+    close
+  });
+  const toggle = () => {
+    if (!isOpen) setPickerSelection(date);
+    setIsOpen(!isOpen);
+  };
   const commitSelection = range => {
     setDate(range);
     onChange?.(range);
   };
   const handlePresetClick = preset => {
     commitSelection(preset.getValue());
-    setIsOpen(false);
+    close();
   };
   const handleDayPickerSelect = selected => {
-    if (isResettingRangeRef.current && !selected && pickerSelection?.from && !pickerSelection?.to) {
-      commitSelection({
-        from: pickerSelection.from,
-        to: pickerSelection.from
-      });
-      setIsOpen(false);
-      return;
-    }
+    const outcomes = resolveDayPickerSelect({
+      selected,
+      date,
+      pickerSelection,
+      isResettingRange: isResettingRangeRef.current
+    });
     isResettingRangeRef.current = false;
-    const hadFullRange = date?.from && date?.to;
-    const hadPartialPicker = pickerSelection?.from && !pickerSelection?.to;
-    if (hadFullRange && !hadPartialPicker && selected?.from && selected?.to) {
-      setPickerSelection({
-        from: selected.from.getTime() === date?.from?.getTime() ? selected.to : selected.from,
-        to: void 0
-      });
-      return;
+    for (const outcome of outcomes) {
+      if (outcome.kind === "edit") {
+        setPickerSelection(outcome.selection);
+        continue;
+      }
+      commitSelection(outcome.range);
+      if (outcome.close) close();
     }
-    setPickerSelection(selected);
-    if (selected?.from && selected?.to) {
-      commitSelection(selected);
-      setIsOpen(false);
-    } else if (!selected?.from && !selected?.to) commitSelection(void 0);
   };
   const handleDayClick = day => {
-    if (date?.from && date?.to) {
+    if (isFullRange(date)) {
       isResettingRangeRef.current = true;
       setPickerSelection({
         from: day,
@@ -262,6 +605,60 @@ var DatePicker = ({
       });
     }
   };
+  return {
+    date,
+    pickerSelection,
+    isOpen,
+    toggle,
+    close,
+    handlePresetClick,
+    handleDayPickerSelect,
+    handleDayClick
+  };
+};
+
+//#endregion
+//#region src/components/DatePicker/DatePicker.tsx
+var messages$4 = defineMessages({
+  selectPeriod: {
+    id: "Yvbvep",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Select a period"
+    }]
+  }
+});
+var formatRange = ({
+  range,
+  formatDate
+}) => {
+  if (!range.from) return;
+  if (!range.to) return formatDate(range.from);
+  return `${formatDate(range.from)} - ${formatDate(range.to)}`;
+};
+var DatePicker = ({
+  label,
+  value,
+  presets,
+  onChange,
+  disabled
+}) => {
+  const {
+    intl
+  } = useI18n();
+  const containerRef = React.useRef(null);
+  const picker = useDatePicker({
+    value,
+    onChange,
+    containerRef
+  });
+  const selectPeriod = intl.formatMessage(messages$4.selectPeriod);
+  const rangeText = picker.date ? formatRange({
+    range: picker.date,
+    formatDate: date => {
+      return intl.formatDate(date);
+    }
+  }) : void 0;
   return /* @__PURE__ */jsxs(Flex, {
     ref: containerRef,
     sx: {
@@ -274,246 +671,27 @@ var DatePicker = ({
     }), /* @__PURE__ */jsx(Button, {
       disabled,
       variant: "secondary",
-      onClick: () => {
-        return setIsOpen(!isOpen);
-      },
-      sx: {
-        width: "100%",
-        justifyContent: "space-between",
-        fontSize: ["14px", "14px"],
-        fontWeight: 400,
-        backgroundColor: "white",
-        padding: "8px 12px",
-        borderRadius: "lg",
-        border: "md",
-        borderColor: "display.border.muted.default",
-        height: "40px",
-        minWidth: ["auto", "240px"],
-        "&:disabled": {
-          borderColor: "display.border.muted.default"
-        }
-      },
-      children: date?.from ? date.to ? /* @__PURE__ */jsxs(Text, {
-        sx: {
-          fontSize: ["12px", "14px"],
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        },
-        children: [formatDate(date.from), " - ", formatDate(date.to)]
-      }) : /* @__PURE__ */jsx(Text, {
-        sx: {
-          fontSize: ["12px", "14px"],
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        },
-        children: formatDate(date.from)
+      onClick: picker.toggle,
+      sx: triggerSx,
+      children: rangeText ? /* @__PURE__ */jsx(Text, {
+        sx: triggerTextSx,
+        children: rangeText
       }) : /* @__PURE__ */jsx(Text, {
         sx: {
           fontSize: ["12px", "14px"]
         },
-        children: "Selecione o período"
+        children: selectPeriod
       })
-    }), isOpen && /* @__PURE__ */jsxs(Fragment, {
-      children: [/* @__PURE__ */jsx(Box, {
-        sx: {
-          display: ["block", "none"],
-          position: "fixed",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
-          zIndex: 49
-        },
-        onClick: () => {
-          return setIsOpen(false);
-        }
-      }), /* @__PURE__ */jsxs(Box, {
-        sx: {
-          position: ["fixed", "absolute"],
-          top: ["auto", "calc(100% + 4px)"],
-          bottom: ["0", "auto"],
-          left: ["0", "0"],
-          right: ["0", "auto"],
-          width: ["100%", "auto"],
-          maxWidth: ["100%", "650px"],
-          zIndex: 50,
-          backgroundColor: "white",
-          border: "1px solid",
-          borderColor: "display.border.muted.default",
-          borderRadius: ["16px 16px 0 0", "8px"],
-          boxShadow: ["0 -4px 6px -1px rgba(0, 0, 0, 0.1)", "0 4px 6px -1px rgba(0, 0, 0, 0.1)"],
-          overflow: "hidden",
-          maxHeight: ["80vh", "none"],
-          display: "flex",
-          flexDirection: "column"
-        },
-        children: [/* @__PURE__ */jsxs(Flex, {
-          sx: {
-            display: ["flex", "none"],
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: "12px 16px",
-            borderBottom: "1px solid",
-            borderColor: "display.border.muted.default"
-          },
-          children: [/* @__PURE__ */jsx(Text, {
-            sx: {
-              fontSize: "16px",
-              fontWeight: 600
-            },
-            children: label || "Selecione o período"
-          }), /* @__PURE__ */jsx(Button, {
-            variant: "ghost",
-            onClick: () => {
-              return setIsOpen(false);
-            },
-            sx: {
-              padding: "4px",
-              minWidth: "auto",
-              width: "32px",
-              height: "32px"
-            },
-            children: /* @__PURE__ */jsx(Icon, {
-              icon: "mdi:close",
-              size: 20
-            })
-          })]
-        }), /* @__PURE__ */jsxs(Flex, {
-          sx: {
-            minHeight: "300px",
-            flexDirection: ["column", "row"],
-            maxHeight: ["calc(80vh - 60px)", "none"],
-            overflow: ["auto", "visible"]
-          },
-          children: [presets && presets.length > 0 && /* @__PURE__ */jsx(Flex, {
-            sx: {
-              flexDirection: ["row", "column"],
-              gap: "4px",
-              padding: ["8px", "12px"],
-              borderRight: ["none", "1px solid"],
-              borderBottom: ["1px solid", "none"],
-              borderColor: "display.border.muted.default",
-              backgroundColor: "navigation.background.muted.default",
-              minWidth: ["auto", "140px"],
-              width: ["100%", "auto"],
-              overflowX: ["auto", "visible"],
-              overflowY: ["visible", "auto"],
-              flexWrap: ["nowrap", "wrap"],
-              "@media (max-width: 768px)": {
-                "&::-webkit-scrollbar": {
-                  display: "none"
-                },
-                scrollbarWidth: "none"
-              }
-            },
-            children: presets?.map(preset => {
-              return /* @__PURE__ */jsx(Button, {
-                variant: "ghost",
-                onClick: () => {
-                  return handlePresetClick(preset);
-                },
-                sx: {
-                  justifyContent: ["center", "flex-start"],
-                  fontSize: ["12px", "14px"],
-                  fontWeight: 400,
-                  padding: ["6px 8px", "8px 12px"],
-                  color: "display.text.secondary.default",
-                  backgroundColor: "transparent",
-                  whiteSpace: "nowrap",
-                  minWidth: ["auto", "auto"],
-                  flexShrink: 0,
-                  "&:hover": {
-                    backgroundColor: "input.background.muted.active"
-                  }
-                },
-                children: preset.label
-              }, preset.label);
-            })
-          }), /* @__PURE__ */jsx(Box, {
-            sx: {
-              padding: ["12px", "16px"],
-              flex: 1,
-              overflow: "auto",
-              "& .rdp": {
-                margin: 0
-              },
-              "& .rdp-month": {
-                width: "100%"
-              },
-              "& .rdp-day_button": {
-                borderRadius: "50% !important",
-                border: "none",
-                fontSize: ["12px", "14px"],
-                width: ["32px", "36px"],
-                height: ["32px", "36px"],
-                cursor: "pointer"
-              },
-              "& .rdp-range_start .rdp-day_button": {
-                backgroundColor: "action.background.accent.default",
-                color: "black"
-              },
-              "& .rdp-range_end .rdp-day_button": {
-                backgroundColor: "action.background.accent.default",
-                color: "black"
-              },
-              "& .rdp-day_button:hover": {
-                backgroundColor: "action.background.primary.default",
-                color: "action.text.primary.default"
-              },
-              "& .rdp-day_selected": {
-                backgroundColor: "action.background.accent.default",
-                color: "white",
-                fontWeight: 600
-              },
-              "& .rdp-day_range_middle": {
-                backgroundColor: "action.background.accent.default",
-                color: "white"
-              },
-              "& .rdp-day_range_start, & .rdp-day_range_end": {
-                backgroundColor: "action.background.accent.default",
-                color: "white",
-                fontWeight: 600
-              },
-              "& .rdp-weekday": {
-                fontSize: ["10px", "12px"],
-                fontWeight: 500,
-                color: "display.text.muted.default"
-              },
-              "& .rdp-month_caption": {
-                fontSize: ["12px", "14px"],
-                fontWeight: 600,
-                marginBottom: ["12px", "16px"]
-              },
-              "@media (max-width: 768px)": {
-                "& .rdp-caption": {
-                  marginBottom: "8px"
-                },
-                "& .rdp-table": {
-                  width: "100%"
-                }
-              }
-            },
-            children: /* @__PURE__ */jsx(DayPicker, {
-              disabled,
-              mode: "range",
-              locale: ptBR,
-              selected: pickerSelection?.from ? {
-                from: pickerSelection.from,
-                to: pickerSelection.to ?? pickerSelection.from
-              } : void 0,
-              onSelect: selected => {
-                return handleDayPickerSelect(selected);
-              },
-              onDayClick: handleDayClick,
-              weekStartsOn: 1,
-              showOutsideDays: true
-            })
-          })]
-        })]
-      })]
+    }), picker.isOpen && /* @__PURE__ */jsx(DatePickerPanel, {
+      title: label || selectPeriod,
+      presets,
+      pickerSelection: picker.pickerSelection,
+      dayPickerLocale: getDayPickerLocale(intl.locale),
+      disabled,
+      onClose: picker.close,
+      onPresetClick: picker.handlePresetClick,
+      onSelect: picker.handleDayPickerSelect,
+      onDayClick: picker.handleDayClick
     })]
   });
 };

package/i18n/compiled/en.json

@@ -59,6 +59,12 @@
       "value": "File Upload"
     }
   ],
+  "Yvbvep": [
+    {
+      "type": 0,
+      "value": "Select a period"
+    }
+  ],
   "dx4ZnR": [
     {
       "type": 1,

package/i18n/compiled/pt-BR.json

@@ -59,6 +59,12 @@
       "value": "Upload de Arquivo"
     }
   ],
+  "Yvbvep": [
+    {
+      "type": 0,
+      "value": "Selecione o período"
+    }
+  ],
   "dx4ZnR": [
     {
       "type": 0,

package/i18n/lang/en.json

@@ -36,6 +36,10 @@
   "XKyo5X": {
     "defaultMessage": "File Upload"
   },
+  "Yvbvep": {
+    "defaultMessage": "Select a period",
+    "description": "Date range picker: placeholder when no range is selected, and the mobile panel title when there is no label."
+  },
   "dx4ZnR": {
     "defaultMessage": "{name} logo",
     "description": "OAuth consent: alt text for the requesting application logo."

package/i18n/lang/pt-BR.json

@@ -39,6 +39,10 @@
     "defaultMessage": "Upload de Arquivo",
     "description": null
   },
+  "Yvbvep": {
+    "defaultMessage": "Selecione o período",
+    "description": "Date range picker: placeholder when no range is selected, and the mobile panel title when there is no label."
+  },
   "dx4ZnR": {
     "defaultMessage": "Logo de {name}",
     "description": "OAuth consent: alt text for the requesting application logo."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.21.2",
+  "version": "2.22.0",
   "description": "React components for ttoss ecosystem.",
   "keywords": [
     "React",
@@ -55,11 +55,11 @@
     "tsdown": "^0.22.2",
     "tsx": "^4.21.0",
     "@ttoss/config": "^1.39.1",
-    "@ttoss/react-hooks": "^2.4.1",
     "@ttoss/i18n-cli": "^0.11.1",
-    "@ttoss/react-i18n": "^2.5.2",
-    "@ttoss/test-utils": "^4.3.1",
+    "@ttoss/react-hooks": "^2.4.1",
     "@ttoss/react-icons": "^0.10.1",
+    "@ttoss/test-utils": "^4.3.1",
+    "@ttoss/react-i18n": "^2.5.2",
     "@ttoss/ui": "^6.10.2"
   },
   "peerDependencies": {