@mamrp/components 1.3.2 → 1.4.0

package/dist/date-pickers/index.mjs

@@ -0,0 +1,737 @@
+// react-shim.js
+import * as React from "react";
+
+// src/date-pickers/date-range-picker/index.tsx
+import React2, { useState, useEffect } from "react";
+import {
+  Box,
+  Typography,
+  CircularProgress,
+  Popover,
+  TextField,
+  Button,
+  useMediaQuery,
+  IconButton
+} from "@mui/material";
+import {
+  MdClear,
+  MdDateRange,
+  MdEvent,
+  MdPerson,
+  MdGpsFixed,
+  MdCheckCircle,
+  MdTipsAndUpdates
+} from "react-icons/md";
+import { useController } from "react-hook-form";
+import {
+  StaticDatePicker,
+  DatePicker,
+  PickersDay,
+  LocalizationProvider
+} from "@mui/x-date-pickers";
+import { AdapterMomentJalaali } from "@mui/x-date-pickers/AdapterMomentJalaali";
+import moment from "moment-jalaali";
+moment.locale("fa");
+moment.loadPersian({ dialect: "persian-modern", usePersianDigits: true });
+var DateRangePicker = ({
+  fromDate,
+  toDate,
+  fromViews = ["year", "month", "day"],
+  fromOpenTo = "day",
+  toViews = ["year", "month", "day"],
+  toOpenTo = "day",
+  control,
+  label = "\u0627\u0646\u062A\u062E\u0627\u0628 \u0628\u0627\u0632\u0647",
+  size = "medium",
+  disabled = false,
+  persian = true,
+  align = "left",
+  isLoading = false,
+  minDate,
+  maxDate,
+  clear = true,
+  singleCalendar = false,
+  // Default to dual calendars on desktop
+  useMobilePickers = false,
+  // Default to calendar popup style
+  dualCalendar = false
+  // Default to single calendar with smart tabs
+}) => {
+  const [open, setOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [tempStartDate, setTempStartDate] = useState(null);
+  const [tempEndDate, setTempEndDate] = useState(null);
+  const [secondCalendarMonth, setSecondCalendarMonth] = useState(moment());
+  const [activeTab, setActiveTab] = useState("from");
+  const [autoSelectMode, setAutoSelectMode] = useState(true);
+  const isMobile = useMediaQuery("(max-width:700px)");
+  const showSingleCalendar = isMobile || singleCalendar || !dualCalendar;
+  const {
+    field: fieldFrom,
+    fieldState: { error: errorFrom }
+  } = useController({ name: fromDate, control });
+  const {
+    field: fieldTo,
+    fieldState: { error: errorTo }
+  } = useController({ name: toDate, control });
+  const handleOpen = (event) => {
+    if (!disabled && !isLoading) {
+      setAnchorEl(event.currentTarget);
+      setOpen(true);
+    }
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setTempStartDate(null);
+    setTempEndDate(null);
+  };
+  useEffect(() => {
+    if (open) {
+      if (fieldFrom.value) {
+        setTempStartDate(moment(fieldFrom.value));
+        setSecondCalendarMonth(moment(fieldFrom.value));
+      } else {
+        setSecondCalendarMonth(moment());
+      }
+      if (fieldTo.value) {
+        setTempEndDate(moment(fieldTo.value));
+      }
+    }
+  }, [open, fieldFrom.value, fieldTo.value]);
+  const handleDaySelect = (day, calendarSide) => {
+    if (!dualCalendar && showSingleCalendar) {
+      if (autoSelectMode) {
+        if (!tempStartDate && !tempEndDate) {
+          setTempStartDate(day);
+          setActiveTab("to");
+        } else if (tempStartDate && !tempEndDate) {
+          if (day.isBefore(tempStartDate)) {
+            setTempEndDate(tempStartDate);
+            setTempStartDate(day);
+          } else {
+            setTempEndDate(day);
+          }
+        } else if (!tempStartDate && tempEndDate) {
+          if (day.isAfter(tempEndDate)) {
+            setTempStartDate(tempEndDate);
+            setTempEndDate(day);
+          } else {
+            setTempStartDate(day);
+          }
+        } else {
+          setTempStartDate(day);
+          setTempEndDate(null);
+          setActiveTab("to");
+        }
+      } else {
+        if (activeTab === "from") {
+          setTempStartDate(day);
+          setActiveTab("to");
+        } else {
+          setTempEndDate(day);
+          setActiveTab("from");
+        }
+      }
+    } else {
+      if (!tempStartDate && !tempEndDate) {
+        if (calendarSide === "right") {
+          setTempStartDate(day);
+        } else {
+          setTempEndDate(day);
+        }
+      } else if (tempStartDate && tempEndDate) {
+        setTempStartDate(day);
+        setTempEndDate(null);
+      } else if (tempStartDate && !tempEndDate) {
+        if (day.isBefore(tempStartDate)) {
+          setTempEndDate(tempStartDate);
+          setTempStartDate(day);
+        } else {
+          setTempEndDate(day);
+        }
+      } else if (!tempStartDate && tempEndDate) {
+        if (day.isAfter(tempEndDate)) {
+          setTempStartDate(tempEndDate);
+          setTempEndDate(day);
+        } else {
+          setTempStartDate(day);
+        }
+      }
+    }
+  };
+  const handleConfirm = () => {
+    if (tempStartDate) {
+      fieldFrom.onChange(tempStartDate.locale("en").format("YYYY-MM-DD"));
+    }
+    if (tempEndDate) {
+      fieldTo.onChange(tempEndDate.locale("en").format("YYYY-MM-DD"));
+    }
+    setOpen(false);
+    setTempStartDate(null);
+    setTempEndDate(null);
+  };
+  const handleClear = () => {
+    fieldFrom.onChange(null);
+    fieldTo.onChange(null);
+    setTempStartDate(null);
+    setTempEndDate(null);
+    setActiveTab("from");
+  };
+  const handleInputClear = (event) => {
+    event.stopPropagation();
+    fieldFrom.onChange(null);
+    fieldTo.onChange(null);
+    setTempStartDate(null);
+    setTempEndDate(null);
+    setActiveTab("from");
+  };
+  const displayValue = () => {
+    const start = fieldFrom.value ? moment(fieldFrom.value) : null;
+    const end = fieldTo.value ? moment(fieldTo.value) : null;
+    if (start && end) {
+      return persian ? `${end.format("jYYYY/jMM/jDD")} - ${start.format("jYYYY/jMM/jDD")}` : `${end.format("YYYY/MM/DD")} - ${start.format("YYYY/MM/DD")}`;
+    } else if (start) {
+      return persian ? "\u0627\u0632 \u062A\u0627\u0631\u06CC\u062E  " + start.format("jYYYY/jMM/jDD") : start.format("YYYY/MM/DD");
+    } else if (end) {
+      return persian ? "\u062A\u0627 \u062A\u0627\u0631\u06CC\u062E  " + end.format("jYYYY/jMM/jDD") : end.format("YYYY/MM/DD");
+    }
+    return "";
+  };
+  const error = errorFrom || errorTo;
+  const customLocaleText = {
+    cancelButtonLabel: "\u0644\u063A\u0648",
+    okButtonLabel: "\u062A\u0623\u06CC\u06CC\u062F",
+    todayButtonLabel: "\u0627\u0645\u0631\u0648\u0632",
+    clearButtonLabel: "\u067E\u0627\u06A9 \u06A9\u0631\u062F\u0646"
+  };
+  return /* @__PURE__ */ React2.createElement(
+    LocalizationProvider,
+    {
+      dateAdapter: AdapterMomentJalaali,
+      localeText: customLocaleText
+    },
+    /* @__PURE__ */ React2.createElement(Box, { sx: { width: "100%" } }, /* @__PURE__ */ React2.createElement(
+      TextField,
+      {
+        label,
+        size,
+        fullWidth: true,
+        value: displayValue(),
+        onClick: handleOpen,
+        disabled: disabled || isLoading,
+        placeholder: "\u0627\u0646\u062A\u062E\u0627\u0628 \u0628\u0627\u0632\u0647 \u062A\u0627\u0631\u06CC\u062E",
+        error: !!error,
+        InputLabelProps: {
+          shrink: true
+        },
+        InputProps: {
+          readOnly: true,
+          sx: {
+            textAlign: align,
+            direction: "ltr",
+            cursor: disabled ? "default" : "pointer",
+            "& input": {
+              textAlign: align
+            }
+          },
+          endAdornment: /* @__PURE__ */ React2.createElement(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, (fieldFrom.value || fieldTo.value) && !disabled && !isLoading && /* @__PURE__ */ React2.createElement(
+            IconButton,
+            {
+              size: "small",
+              onClick: handleInputClear,
+              sx: {
+                padding: "4px",
+                color: "text.secondary",
+                "&:hover": {
+                  color: "error.main",
+                  backgroundColor: "rgba(244, 67, 54, 0.08)"
+                }
+              }
+            },
+            /* @__PURE__ */ React2.createElement(MdClear, { size: 16 })
+          ), isLoading && /* @__PURE__ */ React2.createElement(CircularProgress, { size: 20, color: "secondary" }))
+        },
+        sx: {
+          "& .MuiOutlinedInput-root": {
+            height: size === "small" ? 40 : 56
+          }
+        }
+      }
+    ), error && /* @__PURE__ */ React2.createElement(Typography, { fontSize: 13, color: "error", sx: { mt: 0.6, ml: 1 } }, error.message), /* @__PURE__ */ React2.createElement(
+      Popover,
+      {
+        open,
+        anchorEl,
+        onClose: handleClose,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        slotProps: {
+          paper: {
+            sx: {
+              mt: 1,
+              maxWidth: isMobile ? "95vw" : "auto",
+              width: isMobile ? "auto" : "auto",
+              maxHeight: isMobile ? "90vh" : "auto",
+              overflow: isMobile ? "auto" : "visible"
+            }
+          }
+        }
+      },
+      /* @__PURE__ */ React2.createElement(Box, { sx: { p: isMobile ? 1 : 2 } }, /* @__PURE__ */ React2.createElement(Box, { sx: { mb: 2 } }, /* @__PURE__ */ React2.createElement(Typography, { variant: "overline", color: "primary" }, "\u0627\u0646\u062A\u062E\u0627\u0628 \u0628\u0627\u0632\u0647 \u062A\u0627\u0631\u06CC\u062E"), /* @__PURE__ */ React2.createElement(Typography, { variant: "body2", color: "text.secondary" }, tempStartDate && tempEndDate ? `${tempStartDate.format("jDD jMMMM")} \u062A\u0627 ${tempEndDate.format("jDD jMMMM")}` : tempStartDate ? `\u0627\u0632 ${tempStartDate.format("jDD jMMMM")}` : "\u062A\u0627\u0631\u06CC\u062E \u0634\u0631\u0648\u0639 \u0648 \u067E\u0627\u06CC\u0627\u0646 \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F")), useMobilePickers ? (
+        // Mobile-style: Use DatePicker inputs
+        /* @__PURE__ */ React2.createElement(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 2,
+              alignItems: "center",
+              width: "100%"
+            }
+          },
+          /* @__PURE__ */ React2.createElement(Box, { sx: { width: "100%" } }, /* @__PURE__ */ React2.createElement(Typography, { variant: "body2", sx: { mb: 1, fontWeight: 500 } }, "\u062A\u0627\u0631\u06CC\u062E \u0634\u0631\u0648\u0639 (\u0627\u0632):"), /* @__PURE__ */ React2.createElement(
+            DatePicker,
+            {
+              value: tempStartDate,
+              onChange: (day) => {
+                setTempStartDate(day);
+              },
+              openTo: fromOpenTo,
+              views: fromViews,
+              minDate,
+              maxDate: maxDate || moment(),
+              slotProps: {
+                textField: {
+                  fullWidth: true,
+                  size: "small",
+                  placeholder: "\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E \u0634\u0631\u0648\u0639"
+                }
+              }
+            }
+          )),
+          /* @__PURE__ */ React2.createElement(Box, { sx: { width: "100%" } }, /* @__PURE__ */ React2.createElement(Typography, { variant: "body2", sx: { mb: 1, fontWeight: 500 } }, "\u062A\u0627\u0631\u06CC\u062E \u067E\u0627\u06CC\u0627\u0646 (\u062A\u0627):"), /* @__PURE__ */ React2.createElement(
+            DatePicker,
+            {
+              value: tempEndDate,
+              onChange: (day) => {
+                setTempEndDate(day);
+              },
+              openTo: toOpenTo,
+              views: toViews,
+              minDate: tempStartDate || minDate,
+              maxDate: maxDate || moment(),
+              slotProps: {
+                textField: {
+                  fullWidth: true,
+                  size: "small",
+                  placeholder: "\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E \u067E\u0627\u06CC\u0627\u0646"
+                }
+              }
+            }
+          ))
+        )
+      ) : (
+        // Calendar popup style: Use StaticDatePicker(s)
+        /* @__PURE__ */ React2.createElement(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              gap: showSingleCalendar ? 0 : 2,
+              flexDirection: showSingleCalendar ? "column" : "row",
+              alignItems: "center"
+            }
+          },
+          !dualCalendar && showSingleCalendar && /* @__PURE__ */ React2.createElement(Box, { sx: { width: "100%", mb: 2 } }, /* @__PURE__ */ React2.createElement(
+            Box,
+            {
+              sx: { display: "flex", justifyContent: "center", mb: 1 }
+            },
+            /* @__PURE__ */ React2.createElement(
+              Button,
+              {
+                size: "small",
+                variant: autoSelectMode ? "contained" : "outlined",
+                onClick: () => setAutoSelectMode(!autoSelectMode),
+                sx: { fontSize: "12px", minWidth: "120px" }
+              },
+              /* @__PURE__ */ React2.createElement(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5
+                  }
+                },
+                autoSelectMode ? /* @__PURE__ */ React2.createElement(MdTipsAndUpdates, { size: 16 }) : /* @__PURE__ */ React2.createElement(MdPerson, { size: 16 }),
+                autoSelectMode ? "\u0647\u0648\u0634\u0645\u0646\u062F" : "\u062F\u0633\u062A\u06CC"
+              )
+            )
+          ), !autoSelectMode && /* @__PURE__ */ React2.createElement(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                gap: 1,
+                mb: 2,
+                borderBottom: 1,
+                borderColor: "divider",
+                pb: 1
+              }
+            },
+            /* @__PURE__ */ React2.createElement(
+              Button,
+              {
+                size: "small",
+                variant: activeTab === "from" ? "contained" : "outlined",
+                onClick: () => setActiveTab("from"),
+                sx: {
+                  minWidth: "140px",
+                  fontSize: "13px",
+                  backgroundColor: activeTab === "from" ? "primary.main" : "transparent",
+                  color: activeTab === "from" ? "white" : "primary.main"
+                }
+              },
+              /* @__PURE__ */ React2.createElement(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    flexDirection: "column"
+                  }
+                },
+                /* @__PURE__ */ React2.createElement(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 0.5
+                    }
+                  },
+                  /* @__PURE__ */ React2.createElement(MdDateRange, { size: 16 }),
+                  "\u0627\u0632 \u062A\u0627\u0631\u06CC\u062E"
+                ),
+                tempStartDate && /* @__PURE__ */ React2.createElement(
+                  Typography,
+                  {
+                    variant: "caption",
+                    sx: { fontSize: "10px" }
+                  },
+                  tempStartDate.format("jYYYY/jMM/jDD")
+                )
+              )
+            ),
+            /* @__PURE__ */ React2.createElement(
+              Button,
+              {
+                size: "small",
+                variant: activeTab === "to" ? "contained" : "outlined",
+                onClick: () => setActiveTab("to"),
+                sx: {
+                  minWidth: "140px",
+                  fontSize: "13px",
+                  backgroundColor: activeTab === "to" ? "primary.main" : "transparent",
+                  color: activeTab === "to" ? "white" : "primary.main"
+                }
+              },
+              /* @__PURE__ */ React2.createElement(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    flexDirection: "column"
+                  }
+                },
+                /* @__PURE__ */ React2.createElement(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 0.5
+                    }
+                  },
+                  /* @__PURE__ */ React2.createElement(MdEvent, { size: 16 }),
+                  "\u062A\u0627 \u062A\u0627\u0631\u06CC\u062E"
+                ),
+                tempEndDate && /* @__PURE__ */ React2.createElement(
+                  Typography,
+                  {
+                    variant: "caption",
+                    sx: { fontSize: "10px" }
+                  },
+                  tempEndDate.format("jYYYY/jMM/jDD")
+                )
+              )
+            )
+          ), autoSelectMode && /* @__PURE__ */ React2.createElement(Box, { sx: { textAlign: "center", mb: 2 } }, /* @__PURE__ */ React2.createElement(
+            Typography,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 0.5
+              }
+            },
+            !tempStartDate && !tempEndDate ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MdGpsFixed, { size: 14 }), "\u0627\u0648\u0644\u06CC\u0646 \u062A\u0627\u0631\u06CC\u062E \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F") : tempStartDate && !tempEndDate ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MdGpsFixed, { size: 14 }), "\u062A\u0627\u0631\u06CC\u062E \u067E\u0627\u06CC\u0627\u0646 \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F") : tempStartDate && tempEndDate ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MdCheckCircle, { size: 14 }), "\u0628\u0627\u0632\u0647 \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647 - \u062A\u0627\u0631\u06CC\u062E \u062C\u062F\u06CC\u062F \u0628\u0631\u0627\u06CC \u0634\u0631\u0648\u0639 \u0645\u062C\u062F\u062F") : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MdGpsFixed, { size: 14 }), "\u062A\u0627\u0631\u06CC\u062E \u0634\u0631\u0648\u0639 \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F")
+          ))),
+          /* @__PURE__ */ React2.createElement(
+            StaticDatePicker,
+            {
+              value: tempStartDate || (fieldFrom.value ? moment(fieldFrom.value) : null),
+              onChange: (day) => {
+                if (day) handleDaySelect(day, "right");
+              },
+              openTo: fromOpenTo,
+              views: fromViews,
+              slots: {
+                day: (props) => CustomDay({
+                  ...props,
+                  startDate: tempStartDate,
+                  endDate: tempEndDate
+                }),
+                actionBar: () => null,
+                monthButton: (props) => {
+                  return /* @__PURE__ */ React2.createElement(
+                    "button",
+                    {
+                      className: `${props.className}`,
+                      style: {
+                        width: "100%",
+                        padding: "15px 8px",
+                        border: "1px solid #ccc",
+                        borderRadius: "8px",
+                        backgroundColor: props.disabled ? "#f0f0f0" : "#ffffff",
+                        fontSize: "17px",
+                        cursor: props.disabled ? "default" : "pointer",
+                        textAlign: "center",
+                        boxSizing: "border-box"
+                      },
+                      disabled: props.disabled,
+                      onFocus: props.onFocus,
+                      onBlur: props.onBlur,
+                      onClick: props.onClick,
+                      ref: props.ref
+                    },
+                    props["aria-label"]
+                  );
+                }
+              },
+              minDate,
+              maxDate: maxDate || moment(),
+              slotProps: {
+                toolbar: { hidden: true },
+                layout: {
+                  sx: {
+                    "& .MuiPickersCalendarHeader-root": {
+                      minHeight: "40px",
+                      maxHeight: "40px"
+                    },
+                    "& .MuiDayCalendar-header": {
+                      justifyContent: "space-around"
+                    },
+                    "& .MuiDayCalendar-weekContainer": {
+                      justifyContent: "space-around"
+                    },
+                    "& .MuiPickersDay-root": {
+                      fontSize: "0.875rem"
+                    },
+                    "& .MuiMonthCalendar-root": {
+                      display: "grid",
+                      gridTemplateColumns: "repeat(3, 1fr)",
+                      gap: "8px",
+                      width: "100%"
+                    }
+                  }
+                }
+              },
+              sx: {
+                "& .MuiPickersLayout-contentWrapper": {
+                  minWidth: showSingleCalendar ? "300px" : "280px",
+                  maxWidth: showSingleCalendar ? "350px" : "320px"
+                }
+              }
+            }
+          ),
+          dualCalendar && !showSingleCalendar && /* @__PURE__ */ React2.createElement(
+            StaticDatePicker,
+            {
+              value: secondCalendarMonth,
+              onChange: (day) => {
+                if (day) handleDaySelect(day, "left");
+              },
+              openTo: toOpenTo,
+              views: toViews,
+              slots: {
+                day: (props) => CustomDay({
+                  ...props,
+                  startDate: tempStartDate,
+                  endDate: tempEndDate
+                }),
+                actionBar: () => null,
+                monthButton: (props) => {
+                  return /* @__PURE__ */ React2.createElement(
+                    "button",
+                    {
+                      className: `${props.className}`,
+                      style: {
+                        width: "100%",
+                        padding: "15px 8px",
+                        border: "1px solid #ccc",
+                        borderRadius: "8px",
+                        backgroundColor: props.disabled ? "#f0f0f0" : "#ffffff",
+                        fontSize: "17px",
+                        cursor: props.disabled ? "default" : "pointer",
+                        textAlign: "center",
+                        boxSizing: "border-box"
+                      },
+                      disabled: props.disabled,
+                      onFocus: props.onFocus,
+                      onBlur: props.onBlur,
+                      onClick: props.onClick,
+                      ref: props.ref
+                    },
+                    props["aria-label"]
+                  );
+                }
+              },
+              minDate,
+              maxDate: maxDate || moment(),
+              slotProps: {
+                toolbar: { hidden: true },
+                layout: {
+                  sx: {
+                    "& .MuiPickersCalendarHeader-root": {
+                      minHeight: "40px",
+                      maxHeight: "40px"
+                    },
+                    "& .MuiDayCalendar-header": {
+                      justifyContent: "space-around"
+                    },
+                    "& .MuiDayCalendar-weekContainer": {
+                      justifyContent: "space-around"
+                    },
+                    "& .MuiPickersDay-root": {
+                      fontSize: "0.875rem"
+                    },
+                    "& .MuiMonthCalendar-root": {
+                      display: "grid",
+                      gridTemplateColumns: "repeat(3, 1fr)",
+                      gap: "8px",
+                      width: "100%"
+                    }
+                  }
+                }
+              },
+              sx: {
+                "& .MuiPickersLayout-contentWrapper": {
+                  minWidth: "280px",
+                  maxWidth: "320px"
+                }
+              },
+              onMonthChange: (newMonth) => {
+                setSecondCalendarMonth(newMonth);
+              }
+            }
+          )
+        )
+      ), /* @__PURE__ */ React2.createElement(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            gap: 1,
+            mt: 2,
+            pt: 2,
+            borderTop: 1,
+            borderColor: "divider"
+          }
+        },
+        /* @__PURE__ */ React2.createElement(Box, null, clear && /* @__PURE__ */ React2.createElement(
+          Button,
+          {
+            size: "small",
+            onClick: handleClear,
+            disabled: !fieldFrom.value && !fieldTo.value
+          },
+          "\u067E\u0627\u06A9 \u06A9\u0631\u062F\u0646"
+        )),
+        /* @__PURE__ */ React2.createElement(Box, { sx: { display: "flex", gap: 1 } }, /* @__PURE__ */ React2.createElement(Button, { size: "small", onClick: handleClose }, "\u0644\u063A\u0648"), /* @__PURE__ */ React2.createElement(
+          Button,
+          {
+            variant: "contained",
+            size: "small",
+            onClick: handleConfirm,
+            disabled: !tempStartDate && !tempEndDate
+          },
+          "\u062A\u0623\u06CC\u06CC\u062F"
+        ))
+      ))
+    ))
+  );
+};
+function CustomDay(props) {
+  const { day, outsideCurrentMonth, startDate, endDate, ...other } = props;
+  const isToday = moment(day).isSame(moment(), "day");
+  const isFriday = moment(day).day() === 5;
+  let inRange = false;
+  if (startDate && endDate) {
+    inRange = day.isAfter(startDate, "day") && day.isBefore(endDate, "day");
+  }
+  const isStart = startDate && day.isSame(startDate, "day");
+  const isEnd = endDate && day.isSame(endDate, "day");
+  const isSelected = isStart || isEnd;
+  return /* @__PURE__ */ React2.createElement(
+    PickersDay,
+    {
+      ...other,
+      day,
+      outsideCurrentMonth,
+      selected: false,
+      sx: {
+        borderRadius: isSelected ? "50%" : inRange ? "100%" : "50%",
+        fontSize: "0.9rem",
+        width: 34,
+        height: 34,
+        my: 0.2,
+        bgcolor: isSelected ? "primary.main" : inRange ? "rgba(25,118,210,0.12)" : isToday ? "rgba(25,118,210,0.08)" : "transparent",
+        color: isSelected ? "#fff" : isFriday ? "error.main" : isToday ? "primary.main" : outsideCurrentMonth ? "text.disabled" : "text.primary",
+        fontWeight: isSelected ? 600 : isToday ? 500 : 400,
+        "&:hover": {
+          bgcolor: isSelected ? "primary.dark" : inRange ? "rgba(25,118,210,0.2)" : "rgba(0,0,0,0.04)"
+        },
+        ...isStart && endDate && {
+          borderTopRightRadius: "50%",
+          borderBottomRightRadius: "50%"
+        },
+        ...isEnd && startDate && {
+          borderTopLeftRadius: "50%",
+          borderBottomLeftRadius: "50%"
+        }
+      }
+    }
+  );
+}
+var date_range_picker_default = DateRangePicker;
+export {
+  date_range_picker_default as DateRangePicker
+};
+//# sourceMappingURL=index.mjs.map