master-components-react-ts 2.1.2 → 2.1.4

package/dist/components/ActionDropdown/ActionDropdown.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import style from "./ActionDropdown.module.scss.js";
+import { IconArrowUp } from "../../assets/Icons/IconArrowUp.js";
+import { useState, useRef, useEffect } from "react";
+const ActionDropdown = ({ title, data, onSelect }) => {
+  const [Collapsed, setCollapsed] = useState(false);
+  const DropdownRef = useRef(null);
+  const ListRef = useRef(null);
+  const [Selected, setSelected] = useState(null);
+  const HandleSelect = (item) => {
+    setSelected(item);
+    onSelect?.(item);
+    setCollapsed(false);
+  };
+  const CalculatePos = () => {
+    const componentEl = DropdownRef.current;
+    const dropdownEl = ListRef.current;
+    if (!dropdownEl || !componentEl) return;
+    const componentRect = componentEl.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    dropdownEl.style.position = "fixed";
+    dropdownEl.style.width = componentRect.width + "px";
+    dropdownEl.style.left = `${componentRect.left + window.pageXOffset}px`;
+    if (componentRect.bottom + dropdownEl.offsetHeight > windowHeight) {
+      dropdownEl.style.top = `${window.scrollY + componentRect.top - dropdownEl.offsetHeight - 4}px`;
+      dropdownEl.style.bottom = "unset";
+    } else {
+      dropdownEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
+      dropdownEl.style.bottom = "unset";
+    }
+  };
+  useEffect(() => {
+    CalculatePos();
+  }, [DropdownRef, Collapsed]);
+  useEffect(() => {
+    const ClickHandler = (event) => {
+      if (!DropdownRef.current) return;
+      if (event.composedPath().includes(DropdownRef.current)) return;
+      setCollapsed(false);
+    };
+    const ScrollHandler = (event) => {
+      if (!DropdownRef.current || !ListRef.current) return;
+      if (ListRef.current.contains(event.target)) return;
+      setCollapsed(false);
+    };
+    document.addEventListener("click", ClickHandler);
+    document.addEventListener("wheel", ScrollHandler);
+    return () => {
+      document.removeEventListener("click", ClickHandler);
+      document.removeEventListener("wheel", ScrollHandler);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: `${style.actionDropdownContainer} ${Collapsed ? style.collapsed : ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { ref: DropdownRef, className: style.actionDropdownContent, onClick: () => setCollapsed((state) => !state), children: [
+      /* @__PURE__ */ jsx("p", { title, className: style.actionDropdownTitle, children: Selected?.label || title }),
+      /* @__PURE__ */ jsx("div", { className: style.actionDropdownIcon, children: /* @__PURE__ */ jsx(IconArrowUp, { width: "10", height: "6", color: "#131314" }) })
+    ] }),
+    Collapsed && /* @__PURE__ */ jsx("ul", { ref: ListRef, onClick: (e) => e.stopPropagation(), className: style.actionDropdownList, children: data.map((item) => /* @__PURE__ */ jsx(
+      "li",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          HandleSelect(item);
+        },
+        className: `${style.actionDropdownItem} ${Selected?.id === item.id ? style.selected : ""}`,
+        children: item.label
+      },
+      item.id
+    )) }, data.length)
+  ] });
+};
+export {
+  ActionDropdown as default
+};

package/dist/components/ActionDropdown/ActionDropdown.module.scss.js

@@ -0,0 +1,29 @@
+const actionDropdownContainer = "ActionDropdown-module__actionDropdownContainer";
+const collapsed = "ActionDropdown-module__collapsed";
+const actionDropdownIcon = "ActionDropdown-module__actionDropdownIcon";
+const actionDropdownContent = "ActionDropdown-module__actionDropdownContent";
+const actionDropdownTitle = "ActionDropdown-module__actionDropdownTitle";
+const actionDropdownList = "ActionDropdown-module__actionDropdownList";
+const actionDropdownItem = "ActionDropdown-module__actionDropdownItem";
+const selected = "ActionDropdown-module__selected";
+const style = {
+  actionDropdownContainer,
+  collapsed,
+  actionDropdownIcon,
+  actionDropdownContent,
+  actionDropdownTitle,
+  actionDropdownList,
+  actionDropdownItem,
+  selected
+};
+export {
+  actionDropdownContainer,
+  actionDropdownContent,
+  actionDropdownIcon,
+  actionDropdownItem,
+  actionDropdownList,
+  actionDropdownTitle,
+  collapsed,
+  style as default,
+  selected
+};

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import style from "./Checkbox.module.scss.js";
+import { useNamespace } from "../../context/NamespaceContext.js";
+import { IconMinus } from "../../assets/Icons/IconMinus.js";
+import { IconCheckmark } from "../../assets/Icons/IconCheckmark.js";
+const Checkbox = ({
+  checked,
+  change,
+  type = "default",
+  disabled = false,
+  required = false,
+  multipleChecked = false,
+  activeStyle,
+  checkBoxStyle,
+  theme = "light"
+}) => {
+  const namespace = useNamespace();
+  const CheckboxRef = useRef(null);
+  const [isActive, setIsActive] = useState(false);
+  const onChange = () => {
+    if (disabled) return;
+    if (change && typeof change === "function") {
+      change(!checked);
+    }
+  };
+  const getStyle = () => {
+    if (isActive) {
+      if (disabled) {
+        return { boxShadow: "none" };
+      }
+      return activeStyle ?? {};
+    }
+    return checkBoxStyle ?? {};
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: getStyle(),
+      className: `${theme === "dark" ? style.dark : ""}  ${style[namespace]} ${style.checkboxWrapper} ${type === "error" ? style.error : ""} ${checked ? style.checked : style.unChecked} ${disabled ? style.disabled : ""}`,
+      onMouseDown: () => setIsActive(true),
+      onMouseUp: () => setIsActive(false),
+      onMouseLeave: () => setIsActive(false),
+      onClick: onChange,
+      children: [
+        /* @__PURE__ */ jsx("input", { ref: CheckboxRef, type: "checkbox", disabled, checked: checked ?? false, hidden: true, readOnly: true, required: required ?? false }),
+        checked ? multipleChecked ? /* @__PURE__ */ jsx(IconMinus, {}) : /* @__PURE__ */ jsx(IconCheckmark, {}) : ""
+      ]
+    }
+  );
+};
+export {
+  Checkbox as default
+};

package/dist/components/Checkbox/Checkbox.module.scss.js

@@ -0,0 +1,26 @@
+const checkboxWrapper = "Checkbox-module__checkboxWrapper";
+const checkMark = "Checkbox-module__checkMark";
+const error = "Checkbox-module__error";
+const checked = "Checkbox-module__checked";
+const disabled = "Checkbox-module__disabled";
+const namespaceHr = "Checkbox-module__Namespace_Hr";
+const dark = "Checkbox-module__dark";
+const style = {
+  checkboxWrapper,
+  checkMark,
+  error,
+  checked,
+  disabled,
+  namespaceHr,
+  dark
+};
+export {
+  checkMark,
+  checkboxWrapper,
+  checked,
+  dark,
+  style as default,
+  disabled,
+  error,
+  namespaceHr
+};

package/dist/components/DatePicker/Calendar.js

@@ -0,0 +1,437 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import dayjs from "dayjs";
+import style from "./Calendar.module.scss.js";
+import { IconLeft } from "../../assets/Icons/IconLeft.js";
+import { IconRight } from "../../assets/Icons/IconRight.js";
+import { _filterUnique } from "../../utils/Helpers.js";
+import customParseFormat from "../../node_modules/dayjs/plugin/customParseFormat.js";
+import MainButton from "../MainButton/MainButton.js";
+dayjs.extend(customParseFormat);
+const Calendar = ({
+  valueFormat,
+  quickPick,
+  onChange,
+  CurrentMonth,
+  setCurrentMonth,
+  SelectedDate,
+  namespace,
+  customYears,
+  setSelectedDate,
+  IsFocused,
+  setIsFocused,
+  mode,
+  RangeSelection,
+  setRangeSelection,
+  pickerType,
+  disabledDatesRange,
+  disabledDatesTill,
+  disabledDatesFrom,
+  CalendarRef,
+  defaultValue,
+  selectedStyle,
+  endDateStyle,
+  startDateStyle,
+  inRangeStyle,
+  otherMonthStyle,
+  todayStyle,
+  weekDayStyle,
+  quickPickStyle,
+  monthStyle
+}) => {
+  const daysOfWeek = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  dayjs().year();
+  const [PickedMonth, setPickedMonth] = useState("");
+  const QuickPicker = useRef([]);
+  const [ShowMonths, setShowMonths] = useState(false);
+  const getMonthMatrix = (month) => {
+    if (customYears?.length && !customYears.includes(month.year().toString())) {
+      return [];
+    }
+    const startDay = (month.startOf("month").day() + 6) % 7;
+    const endDay = month.endOf("month").date();
+    const prevMonthEnd = month.subtract(1, "month").endOf("month").date();
+    const matrix = [];
+    let week = [];
+    let day = 1;
+    for (let i = 0; i < startDay; i++) {
+      week.push({
+        date: month.subtract(1, "month").date(prevMonthEnd - startDay + i + 1),
+        currentMonth: false
+      });
+    }
+    while (day <= endDay) {
+      week.push({ date: month.date(day++), currentMonth: true });
+      if (week.length === 7) {
+        matrix.push(week);
+        week = [];
+      }
+    }
+    let nextMonthDay = 1;
+    while (matrix.length < 5) {
+      if (week.length === 7) {
+        matrix.push(week);
+        week = [];
+      }
+      week.push({
+        date: month.add(1, "month").date(nextMonthDay++),
+        currentMonth: false
+      });
+    }
+    if (week.length) {
+      while (week.length < 7) {
+        week.push({
+          date: month.add(1, "month").date(nextMonthDay++),
+          currentMonth: false
+        });
+      }
+      matrix.push(week);
+    }
+    return matrix;
+  };
+  const currentMonthMatrix = getMonthMatrix(CurrentMonth);
+  const nextMonthMatrix = pickerType === "dual" ? getMonthMatrix(CurrentMonth.add(1, "month")) : null;
+  const getQuickPickers = () => {
+    let array = [];
+    if (quickPick && Array.isArray(quickPick) && quickPick.length > 0) {
+      quickPick.forEach((item) => {
+        switch (item) {
+          case "today":
+            QuickPicker.current.push({ name: "Today", key: "Today" });
+            break;
+          case "yesterday":
+            QuickPicker.current.push({ name: "Yesterday", key: "Yesterday" });
+            break;
+          case "thisweek":
+            QuickPicker.current.push({ name: "This week", key: "Thisweek" });
+            break;
+          case "lastweek":
+            QuickPicker.current.push({ name: "Last week", key: "Lastweek" });
+            break;
+          case "thismonth":
+            QuickPicker.current.push({ name: "This month", key: "Thismonth" });
+            break;
+          case "lastmonth":
+            QuickPicker.current.push({ name: "Last month", key: "Lastmonth" });
+            break;
+          case "thisyear":
+            QuickPicker.current.push({ name: "This year", key: "Thisyear" });
+            break;
+          case "lastyear":
+            QuickPicker.current.push({ name: "Last year", key: "Lastyear" });
+            break;
+          case "alltime":
+            QuickPicker.current.push({ name: "All time", key: "Alltime" });
+            break;
+        }
+      });
+    }
+    QuickPicker.current = _filterUnique(QuickPicker.current, "key");
+    array = QuickPicker.current;
+    return array;
+  };
+  const handleQuickPick = (item) => {
+    let obj = { start: "", end: "" };
+    setSelectedDate(null);
+    switch (item.key?.toLowerCase()) {
+      case "today":
+        setRangeSelection({
+          start: dayjs(),
+          end: dayjs()
+        });
+        obj.start = dayjs();
+        break;
+      case "yesterday":
+        setSelectedDate(dayjs().subtract(1, "day"));
+        setRangeSelection({
+          start: dayjs().subtract(1, "day"),
+          end: dayjs().subtract(1, "day")
+        });
+        obj.start = dayjs().subtract(1, "day");
+        break;
+      case "thisweek":
+        setRangeSelection({
+          start: dayjs().startOf("week"),
+          end: dayjs().endOf("week")
+        });
+        obj.start = dayjs().startOf("week");
+        obj.end = dayjs().endOf("week");
+        break;
+      case "lastweek":
+        setRangeSelection({
+          start: dayjs().subtract(1, "week").startOf("week"),
+          end: dayjs().subtract(1, "week").endOf("week")
+        });
+        obj.start = dayjs().subtract(1, "week").startOf("week");
+        obj.end = dayjs().subtract(1, "week").endOf("week");
+        break;
+      case "thismonth":
+        setRangeSelection({
+          start: dayjs().startOf("month"),
+          end: dayjs().endOf("month")
+        });
+        obj.start = dayjs().startOf("month");
+        obj.end = dayjs().endOf("month");
+        break;
+      case "lastmonth":
+        setRangeSelection({
+          start: dayjs().subtract(1, "month").startOf("month"),
+          end: dayjs().subtract(1, "month").endOf("month")
+        });
+        obj.start = dayjs().subtract(1, "month").startOf("month");
+        obj.end = dayjs().subtract(1, "month").endOf("month");
+        break;
+      case "thisyear":
+        setRangeSelection({
+          start: dayjs().startOf("year"),
+          end: dayjs().endOf("year")
+        });
+        obj.start = dayjs().startOf("year");
+        obj.end = dayjs().endOf("year");
+        break;
+      case "lastyear":
+        setRangeSelection({
+          start: dayjs().subtract(1, "year").startOf("year"),
+          end: dayjs().subtract(1, "year").endOf("year")
+        });
+        obj.start = dayjs().subtract(1, "year").startOf("year");
+        obj.end = dayjs().subtract(1, "year").endOf("year");
+        break;
+      case "alltime":
+        setRangeSelection({
+          start: "",
+          end: ""
+        });
+        obj.start = "";
+        obj.end = "";
+        break;
+      default:
+        console.warn("Unsupported quick pick option:", item);
+        break;
+    }
+    if (onChange && typeof onChange === "function") {
+      const range = {
+        start: obj.start ? obj.start : "",
+        end: obj.end ? obj.end : ""
+      };
+      setIsFocused(false);
+      onChange(range.end === "" ? range.start : range);
+    }
+  };
+  const HandleChooseMonth = () => {
+    return;
+  };
+  const handleDayClick = (day, isCurrentMonth, withDefault = false) => {
+    if (!isCurrentMonth) {
+      setCurrentMonth(day.startOf("month"));
+    }
+    if (mode === "range") {
+      setRangeSelection((prev) => {
+        if (!prev.start || prev.start && prev.end) {
+          if (onChange && typeof onChange === "function") {
+            onChange({
+              start: day ?? "",
+              end: ""
+            });
+          }
+          return { start: day ?? "", end: "" };
+        } else if (prev.start && !prev.end) {
+          if (day.isBefore(prev.start, "day")) {
+            if (onChange && typeof onChange === "function") {
+              onChange({
+                start: day ?? "",
+                end: prev?.start ?? ""
+              });
+            }
+            return { start: day ?? "", end: prev?.start ?? "" };
+          } else {
+            onChange({
+              ...prev,
+              end: day ?? ""
+            });
+            return { ...prev, end: day ?? "" };
+          }
+        }
+        return prev;
+      });
+    } else {
+      setRangeSelection({ start: null, end: null });
+      setSelectedDate(day);
+      if (!withDefault) {
+        setIsFocused(false);
+        if (onChange && typeof onChange === "function") {
+          onChange(day.format(valueFormat));
+        }
+      }
+    }
+  };
+  const goToNextMonth = () => {
+    setCurrentMonth(CurrentMonth.add(1, "month"));
+  };
+  const goToPreviousMonth = () => {
+    setCurrentMonth(CurrentMonth.subtract(1, "month"));
+  };
+  const goToNextYear = () => {
+    setCurrentMonth(CurrentMonth.add(1, "year"));
+  };
+  const goToPreviousYear = () => {
+    setCurrentMonth(CurrentMonth.subtract(1, "year"));
+  };
+  useEffect(() => {
+    if (defaultValue?.state) {
+      if (Array.isArray(defaultValue?.value)) {
+        setRangeSelection({ start: dayjs(defaultValue?.value[0], valueFormat), end: dayjs(defaultValue?.value[1], valueFormat) });
+      } else {
+        handleDayClick(dayjs(defaultValue.value), false, true);
+      }
+      defaultValue.state = false;
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: CalendarRef,
+      className: `${namespace === "namespaceHr" ? style.namespaceHr : ""} ${style.datePicker} ${IsFocused ? style.focused : ""} ${pickerType === "dual" ? quickPick && Array.isArray(quickPick) && quickPick.length > 0 ? style.dualCalendarWithQuick : style.dualCalendar : ""} `,
+      onClick: (e) => e.stopPropagation(),
+      style: pickerType === "dual" && quickPick && Array.isArray(quickPick) && quickPick.length > 0 ? { width: "848px" } : {},
+      children: /* @__PURE__ */ jsxs("div", { className: style.div, children: [
+        pickerType === "dual" ? /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { width: "50%", display: "flex", alignItems: "center", justifyContent: "flex-start", gap: "80px" }, children: [
+            /* @__PURE__ */ jsxs("div", { className: style.left, children: [
+              (!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() > Math.min(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style.doubleIcon, onClick: goToPreviousYear, children: [
+                /* @__PURE__ */ jsx(IconLeft, {}),
+                /* @__PURE__ */ jsx(IconLeft, {})
+              ] }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
+              !customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `January ${Math.min(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style.singleIcon, onClick: goToPreviousMonth, children: /* @__PURE__ */ jsx(IconLeft, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: monthStyle ?? {}, children: customYears && customYears.length === 1 ? CurrentMonth.format("MMMM") : CurrentMonth.format("MMMM YYYY") })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { width: "50%", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "80px" }, children: [
+            /* @__PURE__ */ jsx("span", { style: monthStyle ?? {}, children: customYears && customYears.length === 1 ? CurrentMonth.add(1, "month").format("MMMM") : CurrentMonth.add(1, "month").format("MMMM YYYY") }),
+            /* @__PURE__ */ jsxs("div", { className: style.right, children: [
+              !customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `December ${Math.max(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style.singleIcon, onClick: goToNextMonth, children: /* @__PURE__ */ jsx(IconRight, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
+              (!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() < Math.max(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style.doubleIcon, onClick: goToNextYear, children: [
+                /* @__PURE__ */ jsx(IconRight, {}),
+                /* @__PURE__ */ jsx(IconRight, {})
+              ] }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } })
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: style.datePickerHeader, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsxs("div", { className: style.left, children: [
+              (!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() > Math.min(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style.doubleIcon, onClick: goToPreviousYear, children: [
+                /* @__PURE__ */ jsx(IconLeft, {}),
+                /* @__PURE__ */ jsx(IconLeft, {})
+              ] }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
+              !customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `January ${Math.min(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style.singleIcon, onClick: goToPreviousMonth, children: /* @__PURE__ */ jsx(IconLeft, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: style.currentDateHeader, style: monthStyle ?? {}, onClick: HandleChooseMonth, children: customYears && customYears.length === 1 ? CurrentMonth.format("MMMM") : CurrentMonth.format("MMMM YYYY") }),
+            /* @__PURE__ */ jsxs("div", { className: style.right, children: [
+              !customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `December ${Math.max(...customYears.map(Number))}` ? /* @__PURE__ */ jsx("div", { className: style.singleIcon, onClick: goToNextMonth, children: /* @__PURE__ */ jsx(IconRight, {}) }) : /* @__PURE__ */ jsx("div", { style: { width: "20px", height: "20px" } }),
+              (!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() < Math.max(...customYears.map(Number))) ? /* @__PURE__ */ jsxs("div", { className: style.doubleIcon, onClick: goToNextYear, children: [
+                /* @__PURE__ */ jsx(IconRight, {}),
+                /* @__PURE__ */ jsx(IconRight, {})
+              ] }) : /* @__PURE__ */ jsx("div", { className: style.doubleIcon })
+            ] })
+          ] }),
+          pickerType === "single" && quickPick && Array.isArray(quickPick) && quickPick.length > 0 && /* @__PURE__ */ jsx("ul", { className: style.quickPick, children: getQuickPickers().slice(0, 3).map((item) => {
+            return /* @__PURE__ */ jsx("li", { style: quickPickStyle ?? {}, onClick: () => handleQuickPick(item), children: item.name }, item.key);
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: style.calendarWrapper, children: [
+          ShowMonths ? /* @__PURE__ */ jsx("ul", { className: style.monthsWrapper, children: months.map((month) => /* @__PURE__ */ jsx("li", { className: `${style.month} ${PickedMonth === month ? style.pickedMonth : ""}`, onClick: () => setPickedMonth(month), children: /* @__PURE__ */ jsx("div", { className: style.monthName, children: month }) })) }) : /* @__PURE__ */ jsxs("table", { children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: daysOfWeek.map((day) => /* @__PURE__ */ jsx("th", { style: weekDayStyle ?? {}, children: day }, day)) }) }),
+            /* @__PURE__ */ jsxs("tbody", { children: [
+              /* @__PURE__ */ jsx("tr", { className: style.spacerRow, children: /* @__PURE__ */ jsx("td", {}) }),
+              currentMonthMatrix.map((week, index) => /* @__PURE__ */ jsx("tr", { children: week.map(({ date, currentMonth }, idx) => {
+                const isInRange = RangeSelection.start && RangeSelection.end && date.isAfter(RangeSelection.start, "day") && date.isBefore(RangeSelection.end, "day");
+                const isStartDate = RangeSelection.start && date.isSame(RangeSelection.start, "day");
+                const isEndDate = RangeSelection.end && date.isSame(RangeSelection.end, "day");
+                const selected = mode === "single" && SelectedDate && date.isSame(SelectedDate, "day");
+                const isDisabledTill = disabledDatesTill && date.isBefore(dayjs(disabledDatesTill), "day");
+                const isDisabledFrom = disabledDatesFrom && date.isAfter(dayjs(disabledDatesFrom), "day");
+                let isInDisabledRange = false;
+                if (disabledDatesRange?.length === 2) {
+                  const [start, end] = disabledDatesRange.map((d) => dayjs(d));
+                  isInDisabledRange = date.isAfter(start.subtract(1, "day")) && date.isBefore(end.add(1, "day"));
+                }
+                const isDisabled = isDisabledFrom || isDisabledTill || isInDisabledRange;
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      ...currentMonth ? {} : otherMonthStyle,
+                      ...date.isSame(dayjs(), "day") ? todayStyle : {},
+                      ...isInRange ? inRangeStyle : {},
+                      ...isStartDate ? startDateStyle : {},
+                      ...isEndDate ? endDateStyle : {},
+                      ...selected ? selectedStyle : {}
+                    },
+                    className: `${style.day} 
+                              ${currentMonth ? "" : style.otherMonth} 
+                              ${!currentMonth ? "" : date.isSame(dayjs(), "day") ? style.today : ""} 
+                              ${!currentMonth ? "" : isInRange ? style.inRange : ""} 
+                              ${!currentMonth ? "" : isStartDate ? style.startDate : ""} 
+                              ${!currentMonth ? "" : isEndDate ? style.endDate : ""}
+                              ${!currentMonth && !isInRange && !isEndDate ? "" : selected ? style.selected : ""}
+                              ${isDisabled ? style.disabled : ""}`,
+                    onClick: () => handleDayClick(date, currentMonth),
+                    children: date.date()
+                  },
+                  idx
+                );
+              }) }, index))
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: style.buttonWrapper, children: /* @__PURE__ */ jsx(MainButton, { label: "Current date", onClick: () => handleDayClick(dayjs(), true) }) }),
+          pickerType === "dual" && /* @__PURE__ */ jsx("div", { className: style.border }),
+          pickerType === "dual" && /* @__PURE__ */ jsxs("table", { children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: daysOfWeek.map((day) => /* @__PURE__ */ jsx("th", { style: weekDayStyle ?? {}, children: day }, day)) }) }),
+            /* @__PURE__ */ jsx("tbody", { children: nextMonthMatrix?.map((week, index) => /* @__PURE__ */ jsx("tr", { children: week.map(({ date, currentMonth }, idx) => {
+              const isInRange = RangeSelection.start && RangeSelection.end && date.isAfter(RangeSelection.start, "day") && date.isBefore(RangeSelection.end, "day");
+              const isStartDate = RangeSelection.start && date.isSame(RangeSelection.start, "day");
+              const isEndDate = RangeSelection.end && date.isSame(RangeSelection.end, "day");
+              const selected = mode === "single" && SelectedDate && date.isSame(SelectedDate, "day");
+              const isDisabledTill = disabledDatesTill && date.isBefore(dayjs(disabledDatesTill), "day");
+              const isDisabledFrom = disabledDatesFrom && date.isAfter(dayjs(disabledDatesFrom), "day");
+              let isInDisabledRange = false;
+              if (disabledDatesRange?.length === 2) {
+                const [start, end] = disabledDatesRange.map((d) => dayjs(d));
+                isInDisabledRange = date.isAfter(start.subtract(1, "day")) && date.isBefore(end.add(1, "day"));
+              }
+              const isDisabled = isDisabledFrom || isDisabledTill || isInDisabledRange;
+              return /* @__PURE__ */ jsx(
+                "td",
+                {
+                  style: {
+                    ...currentMonth ? {} : otherMonthStyle,
+                    ...date.isSame(dayjs(), "day") ? todayStyle : {},
+                    ...isInRange ? inRangeStyle : {},
+                    ...isStartDate ? startDateStyle : {},
+                    ...isEndDate ? endDateStyle : {},
+                    ...selected ? selectedStyle : {}
+                  },
+                  className: `${style.day} 
+                              ${currentMonth ? "" : style.otherMonth} 
+                              ${!currentMonth ? "" : date.isSame(dayjs(), "day") ? style.today : ""} 
+                              ${!currentMonth ? "" : isInRange ? style.inRange : ""} 
+                              ${!currentMonth ? "" : isStartDate ? style.startDate : ""} 
+                              ${!currentMonth ? "" : isEndDate ? style.endDate : ""}
+                              ${!currentMonth && !isInRange && !isEndDate ? "" : selected ? style.selected : ""}
+                              ${isDisabled ? style.disabled : ""}`,
+                  onClick: () => handleDayClick(date, currentMonth),
+                  children: date.date()
+                },
+                idx
+              );
+            }) }, index)) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  Calendar as default
+};