@itilite/lumina-ui 1.1.11 → 1.1.13

package/dist/chunk-VHCLEOHZ.mjs

@@ -1,618 +0,0 @@
-import {
-  Chevron
-} from "./chunk-ZTRM4HZJ.mjs";
-import {
-  Select_default
-} from "./chunk-KRYAP7NG.mjs";
-
-// src/atom/RangePicker/RangePicker.tsx
-import { memo, useEffect, useRef, useState } from "react";
-import clsx from "clsx";
-import dayjs from "dayjs";
-
-// src/atom/RangePicker/RangePicker.module.scss
-var RangePicker_module_default = { "range_start": "RangePicker-module__range_start___hGQp-", "range_end": "RangePicker-module__range_end___JJNib" };
-
-// src/atom/RangePicker/RangePicker.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function CustomRangePicker(props) {
-  var _a, _b;
-  const {
-    id = "",
-    footer,
-    onChange = () => {
-    },
-    dateRange = ["", ""],
-    showNightCount = false,
-    isRange = true,
-    showYearDropdown = false,
-    showSingleCalendar = false,
-    disablePastDates = false,
-    // New prop to control past date restriction
-    minDate = null,
-    // New prop for minimum allowed date
-    maxDate = null,
-    // New prop for maximum allowed date
-    minYear = 1900,
-    // Minimum year for dropdown
-    maxYear = (/* @__PURE__ */ new Date()).getFullYear() + 10,
-    // Maximum year for dropdown
-    experience = "business",
-    showToastError = () => {
-    }
-  } = props;
-  const onChangeRef = useRef(onChange);
-  useEffect(() => {
-    onChangeRef.current = onChange;
-  }, [onChange]);
-  const getInitialDate = () => {
-    if (dateRange[0]) {
-      return new Date(dateRange[0]);
-    }
-    if (!minDate && !maxDate && !minYear && !maxYear) {
-      return /* @__PURE__ */ new Date();
-    }
-    if (maxYear && maxYear !== (/* @__PURE__ */ new Date()).getFullYear()) {
-      let targetDate = new Date(maxYear, 7, 1);
-      if (maxDate) {
-        const maxDateTime = new Date(maxDate);
-        if (targetDate > maxDateTime) {
-          targetDate = new Date(
-            maxDateTime.getFullYear(),
-            maxDateTime.getMonth(),
-            1
-          );
-        }
-      }
-      return targetDate;
-    }
-    if (minDate) {
-      const minDateTime = new Date(minDate);
-      minDateTime.setHours(0, 0, 0, 0);
-      return minDateTime;
-    }
-    return /* @__PURE__ */ new Date();
-  };
-  const [currentDate, setCurrentDate] = useState(() => getInitialDate());
-  const [startDate, setStartDate] = useState(
-    dateRange[0] ? new Date(dateRange[0]) : null
-  );
-  const [endDate, setEndDate] = useState(
-    dateRange[0] && dateRange[1] ? new Date(dateRange[1]) : null
-  );
-  const [hoverDate, setHoverDate] = useState(null);
-  const [isSelectingEnd, setIsSelectingEnd] = useState(
-    dateRange[0] && !dateRange[1] ? true : false
-  );
-  const [selectedDate, setSelectedDate] = useState(
-    !isRange && dateRange[0] ? new Date(dateRange[0]) : null
-  );
-  const getDaysBetween = (start, end) => {
-    if (!start || !end) return 0;
-    const startDay = dayjs(start).startOf("day");
-    const endDay = dayjs(end).startOf("day");
-    return endDay.diff(startDay, "day");
-  };
-  const nightCount = Math.abs(getDaysBetween(startDate || endDate, hoverDate));
-  const nightCountText = nightCount > 1 ? `${nightCount} nights` : "1 night";
-  const today = /* @__PURE__ */ new Date();
-  today.setHours(0, 0, 0, 0);
-  const firstMonth = new Date(
-    currentDate.getFullYear(),
-    currentDate.getMonth(),
-    1
-  );
-  const secondMonth = new Date(
-    currentDate.getFullYear(),
-    currentDate.getMonth() + 1,
-    1
-  );
-  const monthNames = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December"
-  ];
-  const dayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-  const generateYearOptions = () => {
-    const years = [];
-    for (let i = minYear; i <= maxYear; i++) {
-      const isYearDisabled = isYearCompletelyDisabled(i);
-      years.push({
-        label: i.toString(),
-        value: i,
-        disabled: isYearDisabled
-      });
-    }
-    return years;
-  };
-  const isYearCompletelyDisabled = (year) => {
-    const firstDayOfYear = new Date(year, 0, 1);
-    const lastDayOfYear = new Date(year, 11, 31);
-    if (minDate) {
-      const minDateTime = new Date(minDate);
-      minDateTime.setHours(0, 0, 0, 0);
-      if (minDateTime > lastDayOfYear) {
-        return true;
-      }
-    }
-    if (maxDate) {
-      const maxDateTime = new Date(maxDate);
-      maxDateTime.setHours(0, 0, 0, 0);
-      if (maxDateTime < firstDayOfYear) {
-        return true;
-      }
-    }
-    if (disablePastDates) {
-      const today2 = /* @__PURE__ */ new Date();
-      today2.setHours(0, 0, 0, 0);
-      if (lastDayOfYear < today2) {
-        return true;
-      }
-    }
-    return false;
-  };
-  const yearOptions = generateYearOptions();
-  const generateCalendarDays = (monthDate) => {
-    const year = monthDate.getFullYear();
-    const month = monthDate.getMonth();
-    const firstDay = new Date(year, month, 1);
-    const lastDay = new Date(year, month + 1, 0);
-    const daysInMonth = lastDay.getDate();
-    const startingDayOfWeek = firstDay.getDay();
-    const days = [];
-    for (let i = 0; i < startingDayOfWeek; i++) {
-      days.push(null);
-    }
-    for (let day = 1; day <= daysInMonth; day++) {
-      days.push(new Date(year, month, day));
-    }
-    return days;
-  };
-  const formatDateKey = (date) => {
-    if (!date) return "";
-    return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
-  };
-  const isSameDate = (date1, date2) => {
-    if (!date1 || !date2) return false;
-    return formatDateKey(date1) === formatDateKey(date2);
-  };
-  const isDateDisabled = (date) => {
-    if (!date) return false;
-    const checkDate = new Date(date);
-    checkDate.setHours(0, 0, 0, 0);
-    if (disablePastDates && checkDate < today) {
-      return true;
-    }
-    if (minDate) {
-      const minDateTime = new Date(minDate);
-      minDateTime.setHours(0, 0, 0, 0);
-      if (checkDate < minDateTime) {
-        return true;
-      }
-    }
-    if (maxDate) {
-      const maxDateTime = new Date(maxDate);
-      maxDateTime.setHours(0, 0, 0, 0);
-      if (checkDate > maxDateTime) {
-        return true;
-      }
-    }
-    return false;
-  };
-  const isDateInRange = (date) => {
-    if (!isRange || !startDate || !date) return false;
-    const compareDate = endDate || hoverDate;
-    if (!compareDate) return false;
-    const start = startDate < compareDate ? startDate : compareDate;
-    const end = startDate < compareDate ? compareDate : startDate;
-    return date >= start && date <= end;
-  };
-  const isDateBetweenRange = (date) => {
-    if (!isRange || !startDate || !date) return false;
-    const compareDate = endDate || hoverDate;
-    if (!compareDate) return false;
-    const start = startDate < compareDate ? startDate : compareDate;
-    const end = startDate < compareDate ? compareDate : startDate;
-    return date > start && date < end;
-  };
-  const handleDateClick = (date) => {
-    if (isDateDisabled(date)) return;
-    if (!isRange) {
-      setSelectedDate(date);
-      return;
-    }
-    const isCheckinCheckoutSame = dayjs(date).format("D MMM, YYYY") === dayjs(startDate).format("D MMM, YYYY");
-    if (showNightCount && isCheckinCheckoutSame) {
-      setStartDate(null);
-      setEndDate(null);
-      setIsSelectingEnd(false);
-      setHoverDate(null);
-      showToastError("Check-in and check-out dates cannot be the same.");
-      return;
-    }
-    if (!startDate || startDate && endDate) {
-      setStartDate(date);
-      setEndDate(null);
-      setIsSelectingEnd(true);
-      setHoverDate(null);
-    } else if (startDate && !endDate) {
-      if (date < startDate) {
-        setEndDate(startDate);
-        setStartDate(date);
-      } else {
-        setEndDate(date);
-      }
-      setIsSelectingEnd(false);
-      setHoverDate(null);
-    }
-  };
-  useEffect(() => {
-    if (isRange) {
-      sessionStorage.removeItem("rangePickerStartDate");
-      onChangeRef.current(null, [
-        startDate ? dayjs(startDate).format("D MMM, YYYY") : "",
-        endDate ? dayjs(endDate).format("D MMM, YYYY") : ""
-      ]);
-    }
-    if (isRange && startDate && !endDate) {
-      sessionStorage.setItem(
-        "rangePickerStartDate",
-        dayjs(startDate).format("D MMM, YYYY")
-      );
-    }
-  }, [startDate, endDate, isRange]);
-  useEffect(() => {
-    if (!isRange && selectedDate) {
-      onChangeRef.current(null, dayjs(selectedDate).format("D MMM, YYYY"));
-    }
-  }, [selectedDate, isRange]);
-  const handleDateHover = (date) => {
-    if (isDateDisabled(date) || !isRange) return;
-    if (isSelectingEnd && startDate && !endDate) {
-      setHoverDate(date);
-    }
-  };
-  const navigateMonth = (direction) => {
-    const newDate = new Date(currentDate);
-    newDate.setMonth(currentDate.getMonth() + direction);
-    setCurrentDate(newDate);
-  };
-  const isPreviousMonthDisabled = () => {
-    const previousMonth = new Date(currentDate);
-    previousMonth.setMonth(currentDate.getMonth() - 1);
-    const lastDayOfPreviousMonth = new Date(
-      previousMonth.getFullYear(),
-      previousMonth.getMonth() + 1,
-      0
-    );
-    return isDateDisabled(lastDayOfPreviousMonth);
-  };
-  const isNextMonthDisabled = () => {
-    const nextMonth = new Date(currentDate);
-    nextMonth.setMonth(currentDate.getMonth() + 1);
-    const firstDayOfNextMonth = new Date(
-      nextMonth.getFullYear(),
-      nextMonth.getMonth(),
-      1
-    );
-    return isDateDisabled(firstDayOfNextMonth);
-  };
-  const handleYearChange = (selectedYear) => {
-    const newDate = new Date(currentDate);
-    newDate.setFullYear(selectedYear);
-    const targetMonth = newDate.getMonth();
-    if (!isMonthDisabled(selectedYear, targetMonth)) {
-      setCurrentDate(newDate);
-    } else {
-      const firstAvailableMonth = findFirstAvailableMonth(selectedYear);
-      if (firstAvailableMonth !== -1) {
-        newDate.setMonth(firstAvailableMonth);
-        setCurrentDate(newDate);
-      }
-    }
-  };
-  const isMonthDisabled = (year, month) => {
-    const lastDayOfMonth = new Date(year, month + 1, 0);
-    const firstDayOfMonth = new Date(year, month, 1);
-    return isDateDisabled(lastDayOfMonth) && isDateDisabled(firstDayOfMonth);
-  };
-  const findFirstAvailableMonth = (year) => {
-    for (let month = 0; month < 12; month++) {
-      if (!isMonthDisabled(year, month)) {
-        return month;
-      }
-    }
-    return -1;
-  };
-  const isSameDay = ((_a = dayjs(startDate)) == null ? void 0 : _a.format("D MMM, YYYY")) === ((_b = dayjs(endDate)) == null ? void 0 : _b.format("D MMM, YYYY"));
-  const NightCountTooltip = () => {
-    const TooltipArrow = memo(() => {
-      return /* @__PURE__ */ jsx("div", { className: "tw-w-3 tw-h-3 tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-transparent tw-rotate-90", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            borderTop: "5px solid transparent",
-            borderBottom: "5px solid transparent",
-            borderLeft: "8px solid black"
-          }
-        }
-      ) });
-    });
-    return /* @__PURE__ */ jsxs("div", { className: "tw-absolute tw-bottom-11 tw-py-2 tw-bg-black tw-text-white tw-px-2 tw-rounded-lg tw-z-50 tw-text-xs tw-whitespace-nowrap tw-opacity-0 tw-pointer-events-none group-hover:tw-opacity-100 tw-transition-opacity tw-duration-200", children: [
-      nightCountText,
-      /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-right-[42%] tw-bottom-[-7px]", children: /* @__PURE__ */ jsx(TooltipArrow, {}) })
-    ] });
-  };
-  const renderCalendar = (monthDate, isSecondCalendar = false) => {
-    const days = generateCalendarDays(monthDate);
-    const monthName = monthNames[monthDate.getMonth()];
-    const year = monthDate.getFullYear();
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx("tw-flex-1 tw-max-w-[83vw] tw-mb-2", {
-          "tw-h-[320px]": showYearDropdown || days.length > 35,
-          "tw-h-[290px]": !showYearDropdown || days.length <= 35
-        }),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "tw-text-center tw-mb-4 sm:tw-mt-0", children: /* @__PURE__ */ jsxs("div", { className: " tw-flex tw-justify-center tw-items-center tw-gap-4 ", children: [
-            /* @__PURE__ */ jsxs("h3", { className: "tw-typography-footNoteBold tw-text-color-text-default tw-m-0", children: [
-              monthName,
-              " ",
-              !showYearDropdown && ` ${year}`
-            ] }),
-            showYearDropdown && /* @__PURE__ */ jsx(
-              Select_default,
-              {
-                options: yearOptions,
-                value: currentDate.getFullYear(),
-                valueSelected: currentDate.getFullYear(),
-                onChange: (selectedYear) => {
-                  if (typeof selectedYear === "number") {
-                    handleYearChange(selectedYear);
-                  }
-                },
-                className: "tw-min-w-fit tw-bg-transparent tw-typography-footNoteBold tw-text-color-text-default",
-                size: "small",
-                variant: "filled",
-                style: { width: "80px" },
-                id: `${id}-year-select`,
-                allowClear: false,
-                enableSearch: false,
-                experience
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "tw-grid tw-grid-cols-7 tw-mb-2", children: dayNames.map((day) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "tw-py-2 tw-px-0 tw-text-center tw-typography-caption2 tw-text-[#6B7280]",
-              children: day
-            },
-            day
-          )) }),
-          /* @__PURE__ */ jsx("div", { className: "tw-grid tw-grid-cols-7", children: days.map((date, index) => {
-            if (!date) {
-              return /* @__PURE__ */ jsx("div", { className: "tw-h-10" }, index);
-            }
-            const isStart = isRange ? isSameDate(date, startDate) : false;
-            const isEnd = isRange ? isSameDate(date, endDate) : false;
-            const isSelected = !isRange ? isSameDate(date, selectedDate) : false;
-            const isInRange = isRange ? isDateBetweenRange(date) : false;
-            const isHovering = isRange && isSelectingEnd && hoverDate && isDateInRange(date) && !isStart && !isEnd;
-            const isDisabled = isDateDisabled(date);
-            let className = "tw-relative tw-z-20 tw-h-10 tw-w-10 tw-flex tw-items-center tw-justify-center tw-typography-caption1Bold  ";
-            const isFirstInRow = index % 7 === 0;
-            const isLastInRow = index % 7 === 6;
-            let pseudoClass = "";
-            if (isDisabled) {
-              className += "tw-text-gray-300 tw-cursor-not-allowed ";
-            } else {
-              className += "tw-cursor-pointer ";
-              if (isStart || isEnd || isSelected) {
-                className += "tw-bg-black tw-z-[21] tw-text-white tw-font-medium tw-rounded-full ";
-              } else if (isInRange) {
-                className += "tw-text-gray-900";
-                if (window.innerWidth < 640) {
-                  className = className.replace(
-                    "tw-w-10",
-                    "tw-pr-2 tw-w-[50px] sm:tw-w-10 sm:tw-pr-0"
-                  );
-                }
-                pseudoClass = clsx(RangePicker_module_default.range_start, RangePicker_module_default.range_end);
-              } else {
-                className += "tw-text-gray-700 hover:tw-border-2 hover:tw-border-black tw-rounded-full hover:tw-border-solid ";
-              }
-              if (isHovering) {
-                className += "tw-border-2 tw-border-gray-400 tw-bg-white tw-z-[22]";
-              }
-            }
-            const titleDate = dayjs(date).format("YYYY-MM-DD");
-            const hoverDateFormatted = dayjs(hoverDate || null).format(
-              "YYYY-MM-DD"
-            );
-            const isHoveringDate = dayjs(hoverDateFormatted).isSame(
-              dayjs(date),
-              "day"
-            );
-            const isHoverDateGreater = dayjs(hoverDate).isAfter(
-              dayjs(startDate),
-              "day"
-            );
-            const isHoverDateLess = dayjs(hoverDate).isBefore(
-              dayjs(startDate),
-              "day"
-            );
-            return /* @__PURE__ */ jsxs("div", { className: "tw-relative", children: [
-              (isStart || isEnd) && startDate && endDate && !isSameDay && isRange && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: clsx(
-                    "tw-w-9 tw-h-8 tw-bg-[#F2EFEC] tw-rotate-90 tw-absolute tw-z-10 tw-top-1",
-                    {
-                      "tw-left-5": isStart,
-                      "tw-right-5": isEnd,
-                      "tw-invisible": isFirstInRow && isEnd || isLastInRow && isStart
-                    }
-                  )
-                }
-              ),
-              isHoveringDate && isHovering && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "tw-w-9 tw-h-8 tw-bg-[#F2EFEC] tw-rotate-90 tw-absolute tw-z-10 tw-top-1",
-                      {
-                        "tw-right-5": isHoverDateGreater,
-                        "tw-left-5": isHoverDateLess,
-                        "tw-invisible": isFirstInRow && isHoverDateGreater || isLastInRow && isHoverDateLess
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "tw-w-[18px] tw-h-[40px] tw-bg-white tw-rounded-r-full tw-absolute tw-z-20",
-                      {
-                        "tw-left-5": isHoverDateLess,
-                        "tw-right-5 tw-rotate-180": isHoverDateGreater
-                      }
-                    )
-                  }
-                )
-              ] }),
-              isStart && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "tw-w-9 tw-h-8 tw-bg-[#F2EFEC] tw-rotate-90 tw-absolute tw-z-10 tw-top-1",
-                      {
-                        "tw-right-5": isHoverDateLess,
-                        "tw-left-5": isHoverDateGreater,
-                        "tw-invisible": isLastInRow
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "tw-w-[18px] tw-h-[40px] tw-bg-white tw-rounded-r-full tw-absolute tw-z-20",
-                      {
-                        "tw-left-5": isHoverDateGreater,
-                        "tw-right-5 tw-rotate-180": isHoverDateLess
-                      }
-                    )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: clsx(className, pseudoClass, "tw-group", {
-                    "tw-border-2 !tw-border-black tw-rounded-full tw-border-solid": dayjs(date).isSame(dayjs(hoverDate), "day")
-                  }),
-                  onClick: () => handleDateClick(date),
-                  onMouseEnter: () => handleDateHover(date),
-                  "data-date": titleDate,
-                  children: [
-                    showNightCount && isRange && isHovering && /* @__PURE__ */ jsx(NightCountTooltip, {}),
-                    date.getDate()
-                  ]
-                }
-              )
-            ] }, formatDateKey(date));
-          }) })
-        ]
-      }
-    );
-  };
-  const arrowClasses = "tw-relative tw-top-3 sm:tw-top-0 tw-cursor-pointer tw-rounded-full tw-w-10 tw-h-10 tw-flex tw-justify-center hover:tw-bg-gray-100 tw-items-center";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        "custom-range-picker tw-relative tw-bg-white tw-rounded-xl tw-pt-1 tw-px-0 tw-max-w-4xl tw-mx-auto tw-border tw-border-gray-200 tw-border-solid tw-w-full tw-max-h-[90vh] tw-overflow-y-auto",
-        {
-          "sm:tw-w-[640px]": !showSingleCalendar,
-          "sm:tw-w-[330px]": showSingleCalendar
-        }
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-items-center tw-px-4 tw-justify-between tw-mb-4 tw-absolute tw-right-0 tw-left-0 tw-top-0.5 sm:tw-top-4 tw-w-auto", children: [
-          !isPreviousMonthDisabled() && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(arrowClasses, "tw-left-1"),
-              onClick: () => navigateMonth(-1),
-              id: "calendar-previous-month-button",
-              children: /* @__PURE__ */ jsx(
-                Chevron,
-                {
-                  size: "medium",
-                  className: "tw-relative -tw-top-0.5 tw-right-0.5"
-                }
-              )
-            }
-          ),
-          isPreviousMonthDisabled() && /* @__PURE__ */ jsx("div", { className: "tw-w-10 tw-h-10" }),
-          !isNextMonthDisabled() && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(arrowClasses, "tw-mt-[1px] tw-right-1"),
-              onClick: () => navigateMonth(1),
-              id: "calendar-next-month-button",
-              children: /* @__PURE__ */ jsx(
-                Chevron,
-                {
-                  size: "medium",
-                  onClick: () => navigateMonth(1),
-                  className: "tw-rotate-180 tw-relative tw-top-0.5 tw-left-0.5"
-                }
-              )
-            }
-          ),
-          isNextMonthDisabled() && /* @__PURE__ */ jsx("div", { className: "tw-w-10 tw-h-10" })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "tw-flex tw-items-center tw-justify-between tw-px-6 tw-border-solid tw-border-color-gray-100 tw-border-b tw-border-t-0 tw-border-l-0 tw-border-r-0 tw-w-auto", children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx("tw-flex tw-w-full", {
-              "tw-flex-col sm:tw-space-x-8 sm:tw-flex-row": isRange || !showSingleCalendar,
-              "tw-justify-center": !isRange || showSingleCalendar,
-              "tw-pt-4": showYearDropdown,
-              // More space when year dropdown is visible
-              "tw-pt-6": !showYearDropdown
-            }),
-            children: [
-              renderCalendar(firstMonth),
-              !showSingleCalendar && renderCalendar(secondMonth, true)
-            ]
-          }
-        ) }),
-        footer
-      ]
-    }
-  );
-}
-CustomRangePicker.displayName = "RangePicker";
-var RangePicker_default = CustomRangePicker;
-
-export {
-  CustomRangePicker,
-  RangePicker_default
-};