shad-m 1.0.0

package/dist/components/calendar.js

@@ -0,0 +1,681 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var button = require('@/components/button');
+var utils = require('@/lib/utils');
+var dateFns = require('date-fns');
+var locale = require('date-fns/locale');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var reactDayPicker = require('react-day-picker');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function Calendar({
+  className,
+  showOutsideDays = true,
+  showYearSwitcher = true,
+  yearRange = 12,
+  numberOfMonths,
+  components,
+  locale: locale$1 = locale.vi,
+  onNavViewChange,
+  ...props
+}) {
+  const { onNextClick, onPrevClick, startMonth, endMonth } = props;
+  const [navView, setNavView] = React__namespace.useState("days");
+  const [currentCalendarMonth, setCurrentCalendarMonth] = React__namespace.useState(() => {
+    return props.defaultMonth || /* @__PURE__ */ new Date();
+  });
+  React__namespace.useEffect(() => {
+    onNavViewChange?.(navView);
+  }, [navView, onNavViewChange]);
+  const [displayYears, setDisplayYears] = React__namespace.useState(
+    React__namespace.useMemo(() => {
+      if (startMonth && endMonth) {
+        const minYear = startMonth.getFullYear();
+        const maxYear = endMonth.getFullYear();
+        const currentYear2 = (/* @__PURE__ */ new Date()).getFullYear();
+        const targetCenterYear = Math.max(minYear, Math.min(maxYear, currentYear2));
+        let from = targetCenterYear - Math.floor(yearRange / 2 - 1);
+        let to = targetCenterYear + Math.ceil(yearRange / 2);
+        from = Math.max(from, minYear);
+        to = Math.min(to, maxYear);
+        if (to - from + 1 < yearRange) {
+          from = minYear;
+          to = maxYear;
+        }
+        return { from, to };
+      }
+      const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+      return {
+        from: currentYear - Math.floor(yearRange / 2 - 1),
+        to: currentYear + Math.ceil(yearRange / 2)
+      };
+    }, [yearRange, startMonth, endMonth])
+  );
+  const columnsDisplayed = navView === "days" ? numberOfMonths : 1;
+  const isSingleMode = !numberOfMonths || numberOfMonths === 1;
+  const _monthsClassName = utils.cn(
+    "relative flex",
+    isSingleMode ? "w-full" : "ml-[-4px] w-max",
+    props.monthsClassName
+  );
+  const _monthCaptionClassName = utils.cn(
+    "relative mx-16 flex h-7 items-center justify-center",
+    // mx-16 for 4 buttons (<<, <, >, >>)
+    props.monthCaptionClassName
+  );
+  const _weekdaysClassName = utils.cn(
+    "flex flex-row gap-[2px]",
+    isSingleMode ? "w-full" : "",
+    props.weekdaysClassName
+  );
+  const _weekdayClassName = utils.cn(
+    isSingleMode ? "w-11 text-center" : "w-8",
+    "text-sm font-medium text-muted-foreground",
+    props.weekdayClassName
+  );
+  const _monthClassName = utils.cn("w-full", props.monthClassName);
+  const _captionClassName = utils.cn(
+    "relative flex items-center justify-center pt-1",
+    props.captionClassName
+  );
+  const _captionLabelClassName = utils.cn("truncate text-sm font-medium", props.captionLabelClassName);
+  const buttonNavClassName = button.buttonVariants({
+    variant: "outline",
+    className: "absolute h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+  });
+  const _buttonNextClassName = utils.cn(buttonNavClassName, "right-0", props.buttonNextClassName);
+  const _buttonPreviousClassName = utils.cn(buttonNavClassName, "left-0", props.buttonPreviousClassName);
+  const _navClassName = utils.cn("flex items-start", props.navClassName);
+  const _monthGridClassName = utils.cn(
+    "mt-4",
+    isSingleMode ? "w-full" : "mx-auto",
+    props.monthGridClassName
+  );
+  const _weekClassName = utils.cn(
+    "mt-1 flex items-start gap-[2px]",
+    isSingleMode ? "w-full" : "w-max",
+    props.weekClassName
+  );
+  const _dayClassName = utils.cn(
+    "flex items-center justify-center p-0 text-sm",
+    isSingleMode ? "w-11 h-11" : "size-8 flex-1",
+    props.dayClassName
+  );
+  const _dayButtonClassName = utils.cn(
+    button.buttonVariants({ variant: "ghost" }),
+    "rounded-full p-0 font-medium transition-none aria-selected:opacity-100",
+    isSingleMode ? "w-11 h-11" : "size-8",
+    props.dayButtonClassName
+  );
+  const buttonRangeClassName = "bg-primary/10 [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground";
+  const _rangeStartClassName = utils.cn(
+    buttonRangeClassName,
+    "day-range-start rounded-s-full",
+    props.rangeStartClassName
+  );
+  const _rangeEndClassName = utils.cn(
+    buttonRangeClassName,
+    "day-range-end rounded-e-full",
+    props.rangeEndClassName
+  );
+  const _rangeMiddleClassName = utils.cn(
+    "bg-primary/10 !text-primary !font-medium [&>button]:bg-transparent [&>button]:!text-primary [&>button]:!font-medium [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground",
+    props.rangeMiddleClassName
+  );
+  const _selectedClassName = utils.cn(
+    "[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:!bg-primary [&>button]:hover:!text-primary-foreground",
+    props.selectedClassName
+  );
+  const _todayClassName = utils.cn(
+    "[&>button]:bg-primary/10 [&>button]:text-accent-foreground [&>button]:hover:bg-accent [&>button]:hover:text-accent-foreground",
+    props.todayClassName
+  );
+  const _outsideClassName = utils.cn(
+    "day-outside text-muted-foreground opacity-50 aria-selected:bg-primary/10/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+    props.outsideClassName
+  );
+  const _disabledClassName = utils.cn("text-muted-foreground opacity-50", props.disabledClassName);
+  const _hiddenClassName = utils.cn("invisible flex-1", props.hiddenClassName);
+  const formatters = {
+    formatCaption: (date) => {
+      return `Th\xE1ng ${dateFns.format(date, "MM yyyy")}`;
+    },
+    formatWeekdayName: (date) => {
+      const dayNames = ["CN", "T2", "T3", "T4", "T5", "T6", "T7"];
+      return dayNames[date.getDay()] || "CN";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactDayPicker.DayPicker,
+    {
+      showOutsideDays,
+      locale: locale$1,
+      formatters,
+      className: utils.cn("p-0", className),
+      style: navView === "years" ? { width: "274px" } : navView === "months" ? { width: "312px" } : isSingleMode ? { width: "340px" } : {
+        width: 252 * (columnsDisplayed ?? 1) + "px"
+      },
+      classNames: {
+        months: _monthsClassName,
+        month_caption: _monthCaptionClassName,
+        weekdays: _weekdaysClassName,
+        weekday: _weekdayClassName,
+        month: _monthClassName,
+        caption: _captionClassName,
+        caption_label: _captionLabelClassName,
+        button_next: _buttonNextClassName,
+        button_previous: _buttonPreviousClassName,
+        nav: _navClassName,
+        month_grid: _monthGridClassName,
+        week: _weekClassName,
+        day: _dayClassName,
+        day_button: _dayButtonClassName,
+        range_start: _rangeStartClassName,
+        range_middle: _rangeMiddleClassName,
+        range_end: _rangeEndClassName,
+        selected: _selectedClassName,
+        today: _todayClassName,
+        outside: _outsideClassName,
+        disabled: _disabledClassName,
+        hidden: _hiddenClassName
+      },
+      components: {
+        Chevron: ({ orientation }) => {
+          const Icon = orientation === "left" ? lucideReact.ChevronLeft : lucideReact.ChevronRight;
+          return /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" });
+        },
+        Nav: ({ className: className2 }) => /* @__PURE__ */ jsxRuntime.jsx(
+          Nav,
+          {
+            className: className2,
+            displayYears,
+            navView,
+            setDisplayYears,
+            startMonth,
+            endMonth,
+            onPrevClick,
+            onNextClick,
+            currentCalendarMonth,
+            setCurrentCalendarMonth
+          }
+        ),
+        CaptionLabel: (props2) => /* @__PURE__ */ jsxRuntime.jsx(
+          CaptionLabel,
+          {
+            showYearSwitcher,
+            navView,
+            setNavView,
+            displayYears,
+            currentCalendarMonth,
+            ...props2
+          }
+        ),
+        MonthGrid: ({ className: className2, children, ...props2 }) => /* @__PURE__ */ jsxRuntime.jsx(
+          MonthGrid,
+          {
+            children,
+            className: className2,
+            displayYears,
+            startMonth,
+            endMonth,
+            navView,
+            setNavView,
+            currentCalendarMonth,
+            setCurrentCalendarMonth,
+            ...props2
+          }
+        ),
+        ...components
+      },
+      numberOfMonths: columnsDisplayed,
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+function Nav({
+  className,
+  navView,
+  startMonth,
+  endMonth,
+  displayYears,
+  setDisplayYears,
+  onPrevClick,
+  onNextClick,
+  currentCalendarMonth,
+  setCurrentCalendarMonth
+}) {
+  const { nextMonth, previousMonth, goToMonth } = reactDayPicker.useDayPicker();
+  const currentDate = /* @__PURE__ */ new Date();
+  const isPreviousDisabled = (() => {
+    if (navView === "months") {
+      return true;
+    }
+    if (navView === "years") {
+      return startMonth && dateFns.differenceInCalendarDays(new Date(displayYears.from - 1, 0, 1), startMonth) < 0 || endMonth && dateFns.differenceInCalendarDays(new Date(displayYears.from - 1, 0, 1), endMonth) > 0;
+    }
+    return !previousMonth;
+  })();
+  const isNextDisabled = (() => {
+    if (navView === "months") {
+      return true;
+    }
+    if (navView === "years") {
+      return startMonth && dateFns.differenceInCalendarDays(new Date(displayYears.to + 1, 0, 1), startMonth) < 0 || endMonth && dateFns.differenceInCalendarDays(new Date(displayYears.to + 1, 0, 1), endMonth) > 0;
+    }
+    return !nextMonth;
+  })();
+  const handlePreviousClick = React__namespace.useCallback(() => {
+    if (navView === "months") {
+      return;
+    }
+    if (navView === "years") {
+      const yearRange = displayYears.to - displayYears.from + 1;
+      const newFrom = displayYears.from - yearRange;
+      const newTo = displayYears.to - yearRange;
+      const minYear = startMonth?.getFullYear();
+      const constrainedFrom = minYear !== void 0 ? Math.max(newFrom, minYear) : newFrom;
+      const constrainedTo = minYear !== void 0 ? Math.max(newTo, minYear + yearRange - 1) : newTo;
+      setDisplayYears({
+        from: constrainedFrom,
+        to: constrainedTo
+      });
+      onPrevClick?.(new Date(constrainedFrom, 0, 1));
+      return;
+    }
+    if (!previousMonth) return;
+    setCurrentCalendarMonth(previousMonth);
+    goToMonth(previousMonth);
+    onPrevClick?.(previousMonth);
+  }, [
+    previousMonth,
+    goToMonth,
+    navView,
+    currentDate,
+    displayYears,
+    setDisplayYears,
+    onPrevClick,
+    startMonth,
+    setCurrentCalendarMonth
+  ]);
+  const handleNextClick = React__namespace.useCallback(() => {
+    if (navView === "months") {
+      return;
+    }
+    if (navView === "years") {
+      const yearRange = displayYears.to - displayYears.from + 1;
+      const newFrom = displayYears.from + yearRange;
+      const newTo = displayYears.to + yearRange;
+      const maxYear = endMonth?.getFullYear();
+      const constrainedFrom = maxYear !== void 0 ? Math.min(newFrom, maxYear - yearRange + 1) : newFrom;
+      const constrainedTo = maxYear !== void 0 ? Math.min(newTo, maxYear) : newTo;
+      setDisplayYears({
+        from: constrainedFrom,
+        to: constrainedTo
+      });
+      onNextClick?.(new Date(constrainedTo, 0, 1));
+      return;
+    }
+    if (!nextMonth) return;
+    setCurrentCalendarMonth(nextMonth);
+    goToMonth(nextMonth);
+    onNextClick?.(nextMonth);
+  }, [
+    goToMonth,
+    nextMonth,
+    navView,
+    currentDate,
+    displayYears,
+    setDisplayYears,
+    onNextClick,
+    endMonth,
+    setCurrentCalendarMonth
+  ]);
+  const handleFastPreviousClick = React__namespace.useCallback(() => {
+    if (navView !== "years") return;
+    const yearRange = displayYears.to - displayYears.from + 1;
+    const newFrom = displayYears.from - yearRange * 2;
+    const newTo = displayYears.to - yearRange * 2;
+    const minYear = startMonth?.getFullYear();
+    const constrainedFrom = minYear !== void 0 ? Math.max(newFrom, minYear) : newFrom;
+    const constrainedTo = minYear !== void 0 ? Math.max(newTo, minYear + yearRange - 1) : newTo;
+    setDisplayYears({ from: constrainedFrom, to: constrainedTo });
+    onPrevClick?.(new Date(constrainedFrom, 0, 1));
+  }, [navView, displayYears, startMonth, setDisplayYears, onPrevClick]);
+  const handleFastNextClick = React__namespace.useCallback(() => {
+    if (navView !== "years") return;
+    const yearRange = displayYears.to - displayYears.from + 1;
+    const newFrom = displayYears.from + yearRange * 2;
+    const newTo = displayYears.to + yearRange * 2;
+    const maxYear = endMonth?.getFullYear();
+    const constrainedFrom = maxYear !== void 0 ? Math.min(newFrom, maxYear - yearRange + 1) : newFrom;
+    const constrainedTo = maxYear !== void 0 ? Math.min(newTo, maxYear) : newTo;
+    setDisplayYears({ from: constrainedFrom, to: constrainedTo });
+    onNextClick?.(new Date(constrainedTo, 0, 1));
+  }, [navView, displayYears, endMonth, setDisplayYears, onNextClick]);
+  const isFastPreviousDisabled = navView !== "years" || isPreviousDisabled;
+  const isFastNextDisabled = navView !== "years" || isNextDisabled;
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: utils.cn("flex items-center justify-between", className), children: [
+    navView === "years" && /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        variant: "outline",
+        className: "absolute left-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
+        type: "button",
+        tabIndex: isFastPreviousDisabled ? void 0 : -1,
+        disabled: isFastPreviousDisabled,
+        "aria-label": "Go back 2 year ranges",
+        onClick: handleFastPreviousClick,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        variant: "outline",
+        className: utils.cn(
+          "absolute h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
+          navView === "years" ? "left-8" : "left-0"
+        ),
+        type: "button",
+        tabIndex: isPreviousDisabled ? void 0 : -1,
+        disabled: isPreviousDisabled,
+        "aria-label": navView === "years" ? `Go to the previous ${displayYears.to - displayYears.from + 1} years` : navView === "months" ? "Go to the previous year" : reactDayPicker.labelPrevious(previousMonth),
+        onClick: handlePreviousClick,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        variant: "outline",
+        className: utils.cn(
+          "absolute h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
+          navView === "years" ? "right-8" : "right-0"
+        ),
+        type: "button",
+        tabIndex: isNextDisabled ? void 0 : -1,
+        disabled: isNextDisabled,
+        "aria-label": navView === "years" ? `Go to the next ${displayYears.to - displayYears.from + 1} years` : navView === "months" ? "Go to the next year" : reactDayPicker.labelNext(nextMonth),
+        onClick: handleNextClick,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+      }
+    ),
+    navView === "years" && /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        variant: "outline",
+        className: "absolute right-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
+        type: "button",
+        tabIndex: isFastNextDisabled ? void 0 : -1,
+        disabled: isFastNextDisabled,
+        "aria-label": "Go forward 2 year ranges",
+        onClick: handleFastNextClick,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+function CaptionLabel({
+  children,
+  showYearSwitcher,
+  navView,
+  setNavView,
+  displayYears,
+  currentCalendarMonth,
+  ...props
+}) {
+  const currentDate = /* @__PURE__ */ new Date();
+  if (!showYearSwitcher) return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, children });
+  const handleMonthsClick = () => {
+    setNavView(navView === "months" ? "days" : "months");
+  };
+  const handleYearsClick = () => {
+    setNavView(navView === "years" ? "days" : "years");
+  };
+  const getDisplayText = () => {
+    switch (navView) {
+      case "days":
+        return children;
+      case "months":
+        return currentCalendarMonth?.getFullYear() || currentDate.getFullYear();
+      case "years":
+        return displayYears.from + " - " + displayYears.to;
+      default:
+        return children;
+    }
+  };
+  if (navView === "months" || navView === "years") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        className: "h-7 w-full truncate text-sm font-medium",
+        variant: "ghost",
+        size: "sm",
+        onClick: () => setNavView("days"),
+        children: getDisplayText()
+      }
+    );
+  }
+  const childrenStr = children?.toString() || "";
+  const parts = childrenStr.split(" ");
+  const monthPart = parts.length >= 2 ? `${parts[0]} ${parts[1]}` : parts[0] || "Th\xE1ng";
+  const yearPart = parts.length >= 3 ? parts[2] : parts[parts.length - 1] || currentDate.getFullYear().toString();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        className: "h-7 flex-1 truncate text-sm font-medium",
+        variant: "ghost",
+        size: "sm",
+        onClick: handleMonthsClick,
+        title: "Ch\u1ECDn th\xE1ng",
+        children: monthPart
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        className: "h-7 flex-1 truncate text-sm font-medium",
+        variant: "ghost",
+        size: "sm",
+        onClick: handleYearsClick,
+        title: "Ch\u1ECDn n\u0103m",
+        children: yearPart
+      }
+    )
+  ] });
+}
+function MonthGrid({
+  className,
+  children,
+  displayYears,
+  startMonth,
+  endMonth,
+  navView,
+  setNavView,
+  currentCalendarMonth,
+  setCurrentCalendarMonth,
+  ...props
+}) {
+  if (navView === "years") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      YearGrid,
+      {
+        displayYears,
+        startMonth,
+        endMonth,
+        setNavView,
+        navView,
+        className,
+        currentCalendarMonth,
+        setCurrentCalendarMonth,
+        ...props
+      }
+    );
+  }
+  if (navView === "months") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MonthsGrid,
+      {
+        startMonth,
+        endMonth,
+        setNavView,
+        navView,
+        className,
+        currentCalendarMonth,
+        setCurrentCalendarMonth,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("table", { className, ...props, children });
+}
+function YearGrid({
+  className,
+  displayYears,
+  startMonth,
+  endMonth,
+  setNavView,
+  navView,
+  currentCalendarMonth,
+  setCurrentCalendarMonth,
+  ...props
+}) {
+  const { goToMonth, selected } = reactDayPicker.useDayPicker();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("mx-auto grid w-full grid-cols-4 gap-1 px-3", className), ...props, children: Array.from({ length: displayYears.to - displayYears.from + 1 }, (_, i) => {
+    const isBefore = dateFns.differenceInCalendarDays(new Date(displayYears.from + i, 11, 31), startMonth) < 0;
+    const isAfter = dateFns.differenceInCalendarDays(new Date(displayYears.from + i, 0, 0), endMonth) > 0;
+    const isDisabled = isBefore || isAfter;
+    const selectedYear = (() => {
+      try {
+        const selectedValue = selected;
+        if (selectedValue && typeof selectedValue.getFullYear === "function") {
+          return selectedValue.getFullYear();
+        }
+        if (selectedValue && selectedValue.from && typeof selectedValue.from.getFullYear === "function") {
+          return selectedValue.from.getFullYear();
+        }
+      } catch (error) {
+      }
+      return null;
+    })();
+    const isSelectedYear = selectedYear === displayYears.from + i;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        className: utils.cn(
+          "text-foreground h-7 w-full text-sm font-medium",
+          isSelectedYear && "text-accent-foreground bg-primary/10 font-medium",
+          displayYears.from + i === (/* @__PURE__ */ new Date()).getFullYear() && !isSelectedYear && "text-accent-foreground bg-accent/80 font-medium"
+        ),
+        variant: "ghost",
+        onClick: () => {
+          setNavView("days");
+          const preservedMonth = currentCalendarMonth.getMonth();
+          const newDate = new Date(displayYears.from + i, preservedMonth);
+          setCurrentCalendarMonth(newDate);
+          goToMonth(newDate);
+        },
+        disabled: isDisabled,
+        children: displayYears.from + i
+      },
+      i
+    );
+  }) });
+}
+function MonthsGrid({
+  className,
+  startMonth,
+  endMonth,
+  setNavView,
+  navView,
+  numberOfMonths,
+  currentCalendarMonth,
+  setCurrentCalendarMonth,
+  ...props
+}) {
+  const { goToMonth, selected } = reactDayPicker.useDayPicker();
+  const currentDate = /* @__PURE__ */ new Date();
+  const preservedYear = currentCalendarMonth.getFullYear();
+  const currentMonth = currentDate.getMonth();
+  const selectedMonth = (() => {
+    try {
+      const selectedValue = selected;
+      if (selectedValue && typeof selectedValue.getMonth === "function") {
+        return selectedValue.getMonth();
+      }
+      if (selectedValue && selectedValue.from && typeof selectedValue.from.getMonth === "function") {
+        return selectedValue.from.getMonth();
+      }
+    } catch (error) {
+    }
+    return null;
+  })();
+  const monthNames = [
+    "Th\xE1ng 01",
+    "Th\xE1ng 02",
+    "Th\xE1ng 03",
+    "Th\xE1ng 04",
+    "Th\xE1ng 05",
+    "Th\xE1ng 06",
+    "Th\xE1ng 07",
+    "Th\xE1ng 08",
+    "Th\xE1ng 09",
+    "Th\xE1ng 10",
+    "Th\xE1ng 11",
+    "Th\xE1ng 12"
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("mx-auto grid w-full grid-cols-3 gap-2 px-3", className), ...props, children: monthNames.map((monthName, i) => {
+    const isBefore = startMonth && dateFns.differenceInCalendarDays(new Date(preservedYear, i, 31), startMonth) < 0;
+    const isAfter = endMonth && dateFns.differenceInCalendarDays(new Date(preservedYear, i, 0), endMonth) > 0;
+    const isDisabled = isBefore || isAfter;
+    const isSelectedMonth = selectedMonth === i;
+    const isCurrentMonth = i === currentMonth && preservedYear === currentDate.getFullYear();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        className: utils.cn(
+          "text-foreground h-9 w-full text-sm font-medium",
+          isSelectedMonth && "text-accent-foreground bg-primary/10 font-medium",
+          isCurrentMonth && !isSelectedMonth && "text-accent-foreground bg-accent/80 font-medium"
+        ),
+        variant: "ghost",
+        onClick: () => {
+          setNavView("days");
+          const newDate = new Date(preservedYear, i);
+          setCurrentCalendarMonth(newDate);
+          goToMonth(newDate);
+        },
+        disabled: isDisabled,
+        children: monthName
+      },
+      i
+    );
+  }) });
+}
+
+exports.Calendar = Calendar;
+//# sourceMappingURL=calendar.js.map
+//# sourceMappingURL=calendar.js.map