@mamrp/components 1.3.2 → 1.4.0

package/dist/date-pickers/index.js

@@ -0,0 +1,752 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/date-pickers/index.ts
+var date_pickers_exports = {};
+__export(date_pickers_exports, {
+  DateRangePicker: () => date_range_picker_default
+});
+module.exports = __toCommonJS(date_pickers_exports);
+
+// react-shim.js
+var React = __toESM(require("react"));
+
+// src/date-pickers/date-range-picker/index.tsx
+var import_react = __toESM(require("react"));
+var import_material = require("@mui/material");
+var import_md = require("react-icons/md");
+var import_react_hook_form = require("react-hook-form");
+var import_x_date_pickers = require("@mui/x-date-pickers");
+var import_AdapterMomentJalaali = require("@mui/x-date-pickers/AdapterMomentJalaali");
+var import_moment_jalaali = __toESM(require("moment-jalaali"));
+import_moment_jalaali.default.locale("fa");
+import_moment_jalaali.default.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] = (0, import_react.useState)(false);
+  const [anchorEl, setAnchorEl] = (0, import_react.useState)(null);
+  const [tempStartDate, setTempStartDate] = (0, import_react.useState)(null);
+  const [tempEndDate, setTempEndDate] = (0, import_react.useState)(null);
+  const [secondCalendarMonth, setSecondCalendarMonth] = (0, import_react.useState)((0, import_moment_jalaali.default)());
+  const [activeTab, setActiveTab] = (0, import_react.useState)("from");
+  const [autoSelectMode, setAutoSelectMode] = (0, import_react.useState)(true);
+  const isMobile = (0, import_material.useMediaQuery)("(max-width:700px)");
+  const showSingleCalendar = isMobile || singleCalendar || !dualCalendar;
+  const {
+    field: fieldFrom,
+    fieldState: { error: errorFrom }
+  } = (0, import_react_hook_form.useController)({ name: fromDate, control });
+  const {
+    field: fieldTo,
+    fieldState: { error: errorTo }
+  } = (0, import_react_hook_form.useController)({ name: toDate, control });
+  const handleOpen = (event) => {
+    if (!disabled && !isLoading) {
+      setAnchorEl(event.currentTarget);
+      setOpen(true);
+    }
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setTempStartDate(null);
+    setTempEndDate(null);
+  };
+  (0, import_react.useEffect)(() => {
+    if (open) {
+      if (fieldFrom.value) {
+        setTempStartDate((0, import_moment_jalaali.default)(fieldFrom.value));
+        setSecondCalendarMonth((0, import_moment_jalaali.default)(fieldFrom.value));
+      } else {
+        setSecondCalendarMonth((0, import_moment_jalaali.default)());
+      }
+      if (fieldTo.value) {
+        setTempEndDate((0, import_moment_jalaali.default)(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 ? (0, import_moment_jalaali.default)(fieldFrom.value) : null;
+    const end = fieldTo.value ? (0, import_moment_jalaali.default)(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__ */ import_react.default.createElement(
+    import_x_date_pickers.LocalizationProvider,
+    {
+      dateAdapter: import_AdapterMomentJalaali.AdapterMomentJalaali,
+      localeText: customLocaleText
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(
+      import_material.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__ */ import_react.default.createElement(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, (fieldFrom.value || fieldTo.value) && !disabled && !isLoading && /* @__PURE__ */ import_react.default.createElement(
+            import_material.IconButton,
+            {
+              size: "small",
+              onClick: handleInputClear,
+              sx: {
+                padding: "4px",
+                color: "text.secondary",
+                "&:hover": {
+                  color: "error.main",
+                  backgroundColor: "rgba(244, 67, 54, 0.08)"
+                }
+              }
+            },
+            /* @__PURE__ */ import_react.default.createElement(import_md.MdClear, { size: 16 })
+          ), isLoading && /* @__PURE__ */ import_react.default.createElement(import_material.CircularProgress, { size: 20, color: "secondary" }))
+        },
+        sx: {
+          "& .MuiOutlinedInput-root": {
+            height: size === "small" ? 40 : 56
+          }
+        }
+      }
+    ), error && /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { fontSize: 13, color: "error", sx: { mt: 0.6, ml: 1 } }, error.message), /* @__PURE__ */ import_react.default.createElement(
+      import_material.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__ */ import_react.default.createElement(import_material.Box, { sx: { p: isMobile ? 1 : 2 } }, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { mb: 2 } }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { variant: "overline", color: "primary" }, "\u0627\u0646\u062A\u062E\u0627\u0628 \u0628\u0627\u0632\u0647 \u062A\u0627\u0631\u06CC\u062E"), /* @__PURE__ */ import_react.default.createElement(import_material.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__ */ import_react.default.createElement(
+          import_material.Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 2,
+              alignItems: "center",
+              width: "100%"
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { variant: "body2", sx: { mb: 1, fontWeight: 500 } }, "\u062A\u0627\u0631\u06CC\u062E \u0634\u0631\u0648\u0639 (\u0627\u0632):"), /* @__PURE__ */ import_react.default.createElement(
+            import_x_date_pickers.DatePicker,
+            {
+              value: tempStartDate,
+              onChange: (day) => {
+                setTempStartDate(day);
+              },
+              openTo: fromOpenTo,
+              views: fromViews,
+              minDate,
+              maxDate: maxDate || (0, import_moment_jalaali.default)(),
+              slotProps: {
+                textField: {
+                  fullWidth: true,
+                  size: "small",
+                  placeholder: "\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E \u0634\u0631\u0648\u0639"
+                }
+              }
+            }
+          )),
+          /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { variant: "body2", sx: { mb: 1, fontWeight: 500 } }, "\u062A\u0627\u0631\u06CC\u062E \u067E\u0627\u06CC\u0627\u0646 (\u062A\u0627):"), /* @__PURE__ */ import_react.default.createElement(
+            import_x_date_pickers.DatePicker,
+            {
+              value: tempEndDate,
+              onChange: (day) => {
+                setTempEndDate(day);
+              },
+              openTo: toOpenTo,
+              views: toViews,
+              minDate: tempStartDate || minDate,
+              maxDate: maxDate || (0, import_moment_jalaali.default)(),
+              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__ */ import_react.default.createElement(
+          import_material.Box,
+          {
+            sx: {
+              display: "flex",
+              gap: showSingleCalendar ? 0 : 2,
+              flexDirection: showSingleCalendar ? "column" : "row",
+              alignItems: "center"
+            }
+          },
+          !dualCalendar && showSingleCalendar && /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { width: "100%", mb: 2 } }, /* @__PURE__ */ import_react.default.createElement(
+            import_material.Box,
+            {
+              sx: { display: "flex", justifyContent: "center", mb: 1 }
+            },
+            /* @__PURE__ */ import_react.default.createElement(
+              import_material.Button,
+              {
+                size: "small",
+                variant: autoSelectMode ? "contained" : "outlined",
+                onClick: () => setAutoSelectMode(!autoSelectMode),
+                sx: { fontSize: "12px", minWidth: "120px" }
+              },
+              /* @__PURE__ */ import_react.default.createElement(
+                import_material.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5
+                  }
+                },
+                autoSelectMode ? /* @__PURE__ */ import_react.default.createElement(import_md.MdTipsAndUpdates, { size: 16 }) : /* @__PURE__ */ import_react.default.createElement(import_md.MdPerson, { size: 16 }),
+                autoSelectMode ? "\u0647\u0648\u0634\u0645\u0646\u062F" : "\u062F\u0633\u062A\u06CC"
+              )
+            )
+          ), !autoSelectMode && /* @__PURE__ */ import_react.default.createElement(
+            import_material.Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                gap: 1,
+                mb: 2,
+                borderBottom: 1,
+                borderColor: "divider",
+                pb: 1
+              }
+            },
+            /* @__PURE__ */ import_react.default.createElement(
+              import_material.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__ */ import_react.default.createElement(
+                import_material.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    flexDirection: "column"
+                  }
+                },
+                /* @__PURE__ */ import_react.default.createElement(
+                  import_material.Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 0.5
+                    }
+                  },
+                  /* @__PURE__ */ import_react.default.createElement(import_md.MdDateRange, { size: 16 }),
+                  "\u0627\u0632 \u062A\u0627\u0631\u06CC\u062E"
+                ),
+                tempStartDate && /* @__PURE__ */ import_react.default.createElement(
+                  import_material.Typography,
+                  {
+                    variant: "caption",
+                    sx: { fontSize: "10px" }
+                  },
+                  tempStartDate.format("jYYYY/jMM/jDD")
+                )
+              )
+            ),
+            /* @__PURE__ */ import_react.default.createElement(
+              import_material.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__ */ import_react.default.createElement(
+                import_material.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    flexDirection: "column"
+                  }
+                },
+                /* @__PURE__ */ import_react.default.createElement(
+                  import_material.Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 0.5
+                    }
+                  },
+                  /* @__PURE__ */ import_react.default.createElement(import_md.MdEvent, { size: 16 }),
+                  "\u062A\u0627 \u062A\u0627\u0631\u06CC\u062E"
+                ),
+                tempEndDate && /* @__PURE__ */ import_react.default.createElement(
+                  import_material.Typography,
+                  {
+                    variant: "caption",
+                    sx: { fontSize: "10px" }
+                  },
+                  tempEndDate.format("jYYYY/jMM/jDD")
+                )
+              )
+            )
+          ), autoSelectMode && /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { textAlign: "center", mb: 2 } }, /* @__PURE__ */ import_react.default.createElement(
+            import_material.Typography,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 0.5
+              }
+            },
+            !tempStartDate && !tempEndDate ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_md.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__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_md.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__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_md.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__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_md.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__ */ import_react.default.createElement(
+            import_x_date_pickers.StaticDatePicker,
+            {
+              value: tempStartDate || (fieldFrom.value ? (0, import_moment_jalaali.default)(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__ */ import_react.default.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 || (0, import_moment_jalaali.default)(),
+              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__ */ import_react.default.createElement(
+            import_x_date_pickers.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__ */ import_react.default.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 || (0, import_moment_jalaali.default)(),
+              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__ */ import_react.default.createElement(
+        import_material.Box,
+        {
+          sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            gap: 1,
+            mt: 2,
+            pt: 2,
+            borderTop: 1,
+            borderColor: "divider"
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_material.Box, null, clear && /* @__PURE__ */ import_react.default.createElement(
+          import_material.Button,
+          {
+            size: "small",
+            onClick: handleClear,
+            disabled: !fieldFrom.value && !fieldTo.value
+          },
+          "\u067E\u0627\u06A9 \u06A9\u0631\u062F\u0646"
+        )),
+        /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { display: "flex", gap: 1 } }, /* @__PURE__ */ import_react.default.createElement(import_material.Button, { size: "small", onClick: handleClose }, "\u0644\u063A\u0648"), /* @__PURE__ */ import_react.default.createElement(
+          import_material.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 = (0, import_moment_jalaali.default)(day).isSame((0, import_moment_jalaali.default)(), "day");
+  const isFriday = (0, import_moment_jalaali.default)(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__ */ import_react.default.createElement(
+    import_x_date_pickers.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;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DateRangePicker
+});
+//# sourceMappingURL=index.js.map