@servicetitan/anvil2 1.33.0 → 1.34.0

package/dist/{Calendar-ch54N6OS-0vxeSJFt.js → Calendar-C3dudrjk-nI60sdlM.js}

@@ -1,13 +1,18 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { forwardRef, useRef, useCallback, useEffect, useId, useState, useMemo, createContext, useContext } from 'react';
-import { B as Button } from './Button-CEDmdZ-2-DJVJnigb.js';
+import { forwardRef, useRef, useCallback, useEffect, useState, useId, useMemo, createContext, useContext, useLayoutEffect } from 'react';
 import { c as cx } from './index-tZvMCc77.js';
 import { S as SrOnly } from './SrOnly-BXm1DGl3-BJVodjQp.js';
 import { u as useSwipe } from './useSwipe-DIUHs7T5-DIUHs7T5.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-3B2XYWSr-5ZanZ8Ew.js';
+import { G as Grid } from './Grid-UUtdRKEw.js';
+import { a as SelectCard } from './SelectCard-DUYy3aEL-BVXjCaxz.js';
+import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
+import { B as Button } from './Button-DbVpPjA8-CRQ01IJx.js';
+import { S as SvgKeyboardArrowDown } from './keyboard_arrow_down-C8WQ38p1.js';
+import { S as SvgKeyboardArrowUp } from './keyboard_arrow_up-CxzK6LAl.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-GT5myWCm-Cgn7OEq9.js';
 
-import './Calendar-ch54N6OS.css';// these aren't really private, but nor are they really useful to document
+import './Calendar-C3dudrjk.css';// these aren't really private, but nor are they really useful to document
 
 /**
  * @private
@@ -7990,41 +7995,73 @@ function friendlyDateTime(dateTimeish) {
   }
 }
 
-const SvgKeyboardArrowRight = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9.29 15.88 13.17 12 9.29 8.12a.996.996 0 1 1 1.41-1.41l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3a.996.996 0 0 1-1.41 0c-.38-.39-.39-1.03 0-1.42z" }));
-
 const SvgKeyboardArrowLeft = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M14.71 15.88 10.83 12l3.88-3.88a.996.996 0 1 0-1.41-1.41L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z" }));
 
-const calendar = "_calendar_1qrj0_3";
-const header = "_header_1qrj0_16";
-const heading = "_heading_1qrj0_41";
-const controller = "_controller_1qrj0_47";
-const spacer = "_spacer_1qrj0_55";
-const cell = "_cell_1qrj0_68";
-const overflow = "_overflow_1qrj0_99";
-const weekday = "_weekday_1qrj0_105";
-const range = "_range_1qrj0_130";
-const selected = "_selected_1qrj0_140";
+const SvgKeyboardArrowRight = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9.29 15.88 13.17 12 9.29 8.12a.996.996 0 1 1 1.41-1.41l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3a.996.996 0 0 1-1.41 0c-.38-.39-.39-1.03 0-1.42z" }));
+
+const calendar = "_calendar_otkxo_3";
+const header = "_header_otkxo_16";
+const controller = "_controller_otkxo_47";
+const spacer = "_spacer_otkxo_54";
+const cell = "_cell_otkxo_67";
+const overflow = "_overflow_otkxo_98";
+const weekday = "_weekday_otkxo_104";
+const range = "_range_otkxo_149";
+const selected = "_selected_otkxo_159";
 const styles = {
 	calendar: calendar,
 	header: header,
-	heading: heading,
 	controller: controller,
 	spacer: spacer,
-	"day-grid": "_day-grid_1qrj0_58",
+	"day-grid": "_day-grid_otkxo_57",
 	cell: cell,
 	overflow: overflow,
 	weekday: weekday,
-	"range-first": "_range-first_1qrj0_130",
-	"range-last": "_range-last_1qrj0_130",
+	"month-selection": "_month-selection_otkxo_116",
+	"selection-checkbox": "_selection-checkbox_otkxo_116",
+	"year-selection": "_year-selection_otkxo_117",
+	"selection-card": "_selection-card_otkxo_126",
+	"range-first": "_range-first_otkxo_149",
+	"range-last": "_range-last_otkxo_149",
 	range: range,
 	selected: selected,
-	"is-unavailable": "_is-unavailable_1qrj0_148",
-	"hover-last": "_hover-last_1qrj0_206",
-	"range-fill": "_range-fill_1qrj0_210",
-	"range-disabled": "_range-disabled_1qrj0_220",
-	"controller-button": "_controller-button_1qrj0_228"
+	"is-unavailable": "_is-unavailable_otkxo_167",
+	"hover-last": "_hover-last_otkxo_225",
+	"range-fill": "_range-fill_otkxo_229",
+	"range-disabled": "_range-disabled_otkxo_239",
+	"controller-button": "_controller-button_otkxo_247"
 };
 
+const CalendarContext = createContext(null);
+function useCalendar() {
+  const context = useContext(CalendarContext);
+  if (!context) {
+    throw new Error("useCalendar must be used within a <Calendar>");
+  }
+  return context;
+}
+
+const CalendarMonthButton = forwardRef((props, ref) => {
+  const { calendarSelectionState, onClick, ...rest } = props;
+  const { selectedMonth, locale } = useCalendar();
+  const currentMonth = DateTime.fromObject({ month: selectedMonth }).setLocale(locale).toFormat("MMM");
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      appearance: "ghost",
+      size: "small",
+      onClick,
+      icon: {
+        after: calendarSelectionState === "month" ? SvgKeyboardArrowUp : SvgKeyboardArrowDown
+      },
+      ...rest,
+      children: currentMonth
+    }
+  );
+});
+CalendarMonthButton.displayName = "CalendarMonthButton";
+
 const isSameDay = (d1, d2) => {
   if (!d1 || !d2) return void 0;
   try {
@@ -8121,81 +8158,201 @@ function rangeUpdater(value, newDate, setValue, onSelection) {
   }
 }
 
-const CalendarPrev = forwardRef(
-  (props, ref) => {
-    const { onClick, className, ...rest } = props;
-    const { focusedDate, setFocusedDate, minDate } = useCalendar();
-    const onClickHandler = (e) => {
-      onClick?.(e);
-      const targetMonth = focusedDate.minus({ month: 1 }).endOf("month");
-      const targetDate = focusedDate.minus({ month: 1 });
-      if (minDate !== null) {
-        if (targetDate.toMillis() >= minDate?.toMillis()) {
-          setFocusedDate(targetDate);
-          return;
-        }
-        if (!isSameMonth(targetMonth, focusedDate)) {
-          setFocusedDate(minDate);
+const CalendarNextButton = forwardRef((props, ref) => {
+  const { onClick, className, ...rest } = props;
+  const {
+    focusedDate,
+    setFocusedDate,
+    maxDate,
+    setSelectedMonth,
+    setSelectedYear
+  } = useCalendar();
+  const [disabled, setDisabled] = useState(false);
+  useEffect(() => {
+    setDisabled(
+      maxDate != null && focusedDate.plus({ month: 1 }).startOf("month") > maxDate
+    );
+  }, [maxDate, focusedDate]);
+  const onClickHandler = (e) => {
+    onClick?.(e);
+    const targetMonth = focusedDate.plus({ month: 1 }).startOf("month");
+    const targetDate = focusedDate.plus({ month: 1 });
+    const isCrossingYearBoundary = focusedDate.month === 12 && targetDate.month === 1;
+    if (maxDate !== null) {
+      if (targetDate.toMillis() <= maxDate?.toMillis()) {
+        setFocusedDate(targetDate);
+        setSelectedMonth(targetDate.month);
+        if (isCrossingYearBoundary) {
+          setSelectedYear(targetDate.year);
         }
         return;
       }
-      setFocusedDate(targetDate);
-    };
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        ref,
-        onClick: onClickHandler,
-        className: cx(styles["controller-button"], className),
-        appearance: "ghost",
-        size: "small",
-        icon: SvgKeyboardArrowLeft,
-        "data-anv": "calendar-prev",
-        "aria-label": "Previous Month",
-        ...rest
+      if (!isSameMonth(targetMonth, focusedDate)) {
+        setFocusedDate(maxDate);
+        setSelectedMonth(maxDate.month);
+        if (isCrossingYearBoundary) {
+          setSelectedYear(maxDate.year);
+        }
+      }
+      return;
+    }
+    setFocusedDate(targetDate);
+    setSelectedMonth(targetDate.month);
+    if (isCrossingYearBoundary) {
+      setSelectedYear(targetDate.year);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: onClickHandler,
+      appearance: "ghost",
+      size: "small",
+      className: cx(styles["controller-button"], className),
+      icon: SvgKeyboardArrowRight,
+      "aria-label": "Next Month",
+      "data-anv": "calendar-next",
+      ref,
+      ...rest,
+      disabled
+    }
+  );
+});
+CalendarNextButton.displayName = "CalendarNextButton";
+
+const CalendarNowButton = forwardRef((props, ref) => {
+  const { onClick, ...rest } = props;
+  const {
+    setFocusedDate,
+    setSelectedMonth,
+    setSelectedYear,
+    value,
+    setValue,
+    defaultTimeZone,
+    unavailableDates,
+    unavailable,
+    onSelection,
+    minDate,
+    maxDate,
+    controlled,
+    range
+  } = useCalendar();
+  const nToday = DateTime.fromISO(DateTime.now().toISO(), {
+    zone: defaultTimeZone
+  }).startOf("day");
+  const onClickHandler = () => {
+    setFocusedDate(nToday);
+    setSelectedMonth(nToday.month);
+    setSelectedYear(nToday.year);
+    if (!range) {
+      onSelection?.({
+        value: toDateString(nToday) ?? void 0
+      });
+      if (!controlled) {
+        setValue(nToday);
       }
+      return;
+    }
+    rangeUpdater(value, nToday, setValue, onSelection);
+  };
+  const isDisabled = isBeyondMaxDate(nToday, maxDate) || isBeyondMinDate(nToday, minDate) || isUnavailableDate(nToday, unavailableDates, unavailable, defaultTimeZone);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      onClick: onClickHandler,
+      appearance: "ghost",
+      disabled: isDisabled,
+      "data-anv": "calendar-now",
+      size: "small",
+      ...rest,
+      children: "Today"
+    }
+  );
+});
+CalendarNowButton.displayName = "CalendarNowButton";
+
+const CalendarPrevButton = forwardRef((props, ref) => {
+  const { onClick, className, ...rest } = props;
+  const {
+    focusedDate,
+    setFocusedDate,
+    minDate,
+    setSelectedMonth,
+    setSelectedYear
+  } = useCalendar();
+  const [disabled, setDisabled] = useState(false);
+  useEffect(() => {
+    setDisabled(
+      minDate != null && focusedDate.minus({ month: 1 }).endOf("month") < minDate
     );
-  }
-);
-CalendarPrev.displayName = "CalendarPrev";
-
-const CalendarNext = forwardRef(
-  (props, ref) => {
-    const { onClick, className, ...rest } = props;
-    const { focusedDate, setFocusedDate, maxDate } = useCalendar();
-    const onClickHandler = (e) => {
-      onClick?.(e);
-      const targetMonth = focusedDate.plus({ month: 1 }).startOf("month");
-      const targetDate = focusedDate.plus({ month: 1 });
-      if (maxDate !== null) {
-        if (targetDate.toMillis() <= maxDate?.toMillis()) {
-          setFocusedDate(targetDate);
-          return;
-        }
-        if (!isSameMonth(targetMonth, focusedDate)) {
-          setFocusedDate(maxDate);
+  }, [minDate, focusedDate]);
+  const onClickHandler = (e) => {
+    onClick?.(e);
+    const targetMonth = focusedDate.minus({ month: 1 }).endOf("month");
+    const targetDate = focusedDate.minus({ month: 1 });
+    const isCrossingYearBoundary = focusedDate.month === 1 && targetDate.month === 12;
+    if (minDate !== null) {
+      if (targetDate.toMillis() >= minDate?.toMillis()) {
+        setFocusedDate(targetDate);
+        setSelectedMonth(targetDate.month);
+        if (isCrossingYearBoundary) {
+          setSelectedYear(targetDate.year);
         }
         return;
       }
-      setFocusedDate(targetDate);
-    };
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        onClick: onClickHandler,
-        appearance: "ghost",
-        size: "small",
-        className: cx(styles["controller-button"], className),
-        icon: SvgKeyboardArrowRight,
-        "aria-label": "Next Month",
-        "data-anv": "calendar-next",
-        ref,
-        ...rest
+      if (!isSameMonth(targetMonth, focusedDate)) {
+        setFocusedDate(minDate);
+        setSelectedMonth(minDate.month);
+        if (isCrossingYearBoundary) {
+          setSelectedYear(minDate.year);
+        }
       }
-    );
-  }
-);
-CalendarNext.displayName = "CalendarNext";
+      return;
+    }
+    setFocusedDate(targetDate);
+    setSelectedMonth(targetDate.month);
+    if (isCrossingYearBoundary) {
+      setSelectedYear(targetDate.year);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      onClick: onClickHandler,
+      className: cx(styles["controller-button"], className),
+      appearance: "ghost",
+      size: "small",
+      icon: SvgKeyboardArrowLeft,
+      "data-anv": "calendar-prev",
+      "aria-label": "Previous Month",
+      ...rest,
+      disabled
+    }
+  );
+});
+CalendarPrevButton.displayName = "CalendarPrevButton";
+
+const CalendarYearButton = forwardRef((props, ref) => {
+  const { calendarSelectionState, ...rest } = props;
+  const { selectedYear, locale } = useCalendar();
+  const currentYear = DateTime.fromObject({ year: selectedYear }).setLocale(locale).toLocaleString({ year: "numeric" });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      appearance: "ghost",
+      size: "small",
+      icon: {
+        after: calendarSelectionState === "year" ? SvgKeyboardArrowUp : SvgKeyboardArrowDown
+      },
+      ...rest,
+      children: currentYear
+    }
+  );
+});
+CalendarYearButton.displayName = "CalendarYearButton";
 
 const CalendarDay = forwardRef(
   (props, ref) => {
@@ -8219,7 +8376,9 @@ const CalendarDay = forwardRef(
       id: uid,
       range,
       dateFormat,
-      startDay
+      startDay,
+      setSelectedMonth,
+      setSelectedYear
     } = context;
     const initialized = useRef(false);
     const futureDateSelection = useCallback(
@@ -8253,7 +8412,14 @@ const CalendarDay = forwardRef(
           return;
         }
         setFocusedDate(targetDate);
+        if (targetDate.month !== focusedDate.month) {
+          setSelectedMonth(targetDate.month);
+          if (targetDate.year !== focusedDate.year) {
+            setSelectedYear(targetDate.year);
+          }
+        }
       },
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't need to re-render when the selected month or year changes
       [maxDate, setFocusedDate, defaultTimeZone, unavailableDates, unavailable]
     );
     const pastDateSelection = (targetDate) => {
@@ -8286,6 +8452,12 @@ const CalendarDay = forwardRef(
         return;
       }
       setFocusedDate(targetDate);
+      if (targetDate.month !== focusedDate.month) {
+        setSelectedMonth(targetDate.month);
+        if (targetDate.year !== focusedDate.year) {
+          setSelectedYear(targetDate.year);
+        }
+      }
     };
     const isSelectedDate = (date2, compareDate) => {
       if (!range) {
@@ -8311,7 +8483,9 @@ const CalendarDay = forwardRef(
         case "Enter":
           e.preventDefault();
           if (!range) {
-            !controlled && setValue(isSameDay(value, focusedDate) ? null : focusedDate);
+            if (!controlled) {
+              setValue(isSameDay(value, focusedDate) ? null : focusedDate);
+            }
             onSelection?.({
               value: isSameDay(value, focusedDate) ? void 0 : focusedDate.setZone(defaultTimeZone).startOf("day").toISO() ?? void 0
             });
@@ -8380,7 +8554,9 @@ const CalendarDay = forwardRef(
         onSelection?.({
           value: toDateString(d.setZone(defaultTimeZone)) ?? void 0
         });
-        !controlled && setValue(d);
+        if (!controlled) {
+          setValue(d);
+        }
         return;
       }
       rangeUpdater(value, d, setValue, onSelection);
@@ -8771,60 +8947,288 @@ const CalendarMonth = forwardRef(
 );
 CalendarMonth.displayName = "CalendarMonth";
 
-const CalendarNow = forwardRef(
-  (props, ref) => {
-    const { onClick, ...rest } = props;
-    const {
-      setFocusedDate,
-      value,
-      setValue,
-      defaultTimeZone,
-      unavailableDates,
-      unavailable,
-      onSelection,
-      minDate,
-      maxDate,
-      controlled,
-      range
-    } = useCalendar();
-    const nToday = DateTime.fromISO(DateTime.now().toISO(), {
-      zone: defaultTimeZone
-    }).startOf("day");
-    const onClickHandler = (e) => {
-      setFocusedDate(nToday);
-      if (!range) {
-        onSelection?.({
-          value: toDateString(nToday) ?? void 0
-        });
-        !controlled && setValue(nToday);
+const CalendarMonthSelection = forwardRef(({ onMonthSelection, ...props }, ref) => {
+  const { defaultTimeZone, maxDate, minDate, selectedMonth, selectedYear } = useCalendar();
+  const monthSelectionRef = useRef(null);
+  const combinedRef = useMergeRefs([ref, monthSelectionRef]);
+  const currentDate = useMemo(
+    () => DateTime.fromObject({ year: selectedYear, month: selectedMonth }).setZone(defaultTimeZone).startOf("day"),
+    [defaultTimeZone, selectedYear, selectedMonth]
+  );
+  const dates = useMemo(
+    () => Array.from({ length: 12 }, (_, i) => {
+      const date = DateTime.fromObject({
+        year: selectedYear,
+        month: 1
+      }).plus({
+        month: i
+      });
+      const disabled = minDate && date < minDate || maxDate && date > maxDate;
+      return {
+        month: date.month,
+        disabled: disabled ?? false
+      };
+    }),
+    [maxDate, minDate, selectedYear]
+  );
+  const classes = cx(styles["month-selection"], props.className);
+  const [focusedIndex, setFocusedIndex] = useState(selectedMonth - 1);
+  useEffect(() => {
+    if (minDate || maxDate) {
+      let index = dates.findIndex(({ month }) => month === selectedMonth);
+      while (dates[index].disabled && index < 11) {
+        index++;
+      }
+      setFocusedIndex(index);
+    } else {
+      setFocusedIndex(selectedMonth - 1);
+    }
+  }, [selectedMonth, minDate, maxDate, dates]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      const target = e.target;
+      const cards = monthSelectionRef.current?.querySelectorAll(
+        "input[type='checkbox']"
+      );
+      if (!cards || cards.length === 0) {
         return;
       }
-      rangeUpdater(value, nToday, setValue, onSelection);
+      const cardArray = Array.from(cards);
+      const currentIndex = cardArray.indexOf(target);
+      if (currentIndex === -1) return;
+      const updateFocusedIndex = (index) => {
+        e.preventDefault();
+        cardArray[index].focus();
+        setFocusedIndex(index);
+      };
+      let newIndex;
+      switch (e.key) {
+        case "ArrowLeft":
+          newIndex = currentIndex > 0 ? currentIndex - 1 : 11;
+          while (dates[newIndex].disabled) {
+            newIndex = newIndex > 0 ? newIndex - 1 : 11;
+          }
+          updateFocusedIndex(newIndex);
+          break;
+        case "ArrowRight":
+          newIndex = currentIndex < 11 ? currentIndex + 1 : 0;
+          while (dates[newIndex].disabled) {
+            newIndex = newIndex < 11 ? newIndex + 1 : 0;
+          }
+          updateFocusedIndex(newIndex);
+          break;
+        case "ArrowUp":
+          if (currentIndex < 3) {
+            newIndex = currentIndex + 9;
+          } else {
+            newIndex = currentIndex - 3;
+          }
+          while (dates[newIndex].disabled) {
+            if (newIndex > 2) {
+              newIndex -= 3;
+            } else {
+              newIndex += 9;
+            }
+          }
+          updateFocusedIndex(newIndex);
+          break;
+        case "ArrowDown":
+          if (currentIndex > 8) {
+            newIndex = currentIndex - 9;
+          } else {
+            newIndex = currentIndex + 3;
+          }
+          while (dates[newIndex].disabled) {
+            if (newIndex < 9) {
+              newIndex += 3;
+            } else {
+              newIndex -= 9;
+            }
+          }
+          updateFocusedIndex(newIndex);
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (!dates[currentIndex].disabled) {
+            onMonthSelection(dates[currentIndex].month);
+          }
+          break;
+      }
+    },
+    [dates, onMonthSelection]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: combinedRef,
+      "data-anv": "calendar-month-selection",
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": "Calendar month selection", children: /* @__PURE__ */ jsx(
+        Grid,
+        {
+          templateColumns: "repeat(3, minmax(0, 1fr))",
+          gap: 3,
+          onKeyDown: handleKeyDown,
+          role: "row",
+          children: dates.map(({ month, disabled }, index) => /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsx(
+            SelectCard,
+            {
+              id: month.toString(),
+              disabled,
+              onChange: () => onMonthSelection(month),
+              checked: selectedMonth === month && selectedYear === currentDate.year,
+              checkboxProps: {
+                className: styles["selection-checkbox"],
+                tabIndex: focusedIndex === index ? 0 : -1
+              },
+              className: styles["selection-card"],
+              children: DateTime.fromObject({ month }).toFormat("MMMM")
+            }
+          ) }, month.toString()))
+        }
+      ) })
+    }
+  );
+});
+CalendarMonthSelection.displayName = "CalendarMonthSelection";
+
+const CalendarYearSelection = forwardRef(({ onYearSelection, ...props }, ref) => {
+  const { maxDate, minDate, selectedYear } = useCalendar();
+  const containerRef = useRef(null);
+  const combinedRef = useMergeRefs([ref, containerRef]);
+  const initialYears = useMemo(
+    () => Array.from({ length: 52 }, (_, i) => {
+      const year = selectedYear - (selectedYear % 2 ? 24 : 25) + i;
+      const disabled = minDate && year < minDate.year || maxDate && year > maxDate.year;
+      return { year, disabled: disabled ?? false };
+    }),
+    [selectedYear, minDate, maxDate]
+  );
+  const [dates, setDates] = useState(initialYears);
+  useLayoutEffect(() => {
+    containerRef.current?.scrollTo({
+      top: (containerRef.current?.scrollHeight ?? 0) / 2 - (containerRef.current?.clientHeight ?? 0) / 2
+    });
+    const container = containerRef.current;
+    if (!container) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const distanceFromTop = scrollTop;
+      const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+      if (distanceFromTop < 200 && !minDate) {
+        setDates((prevDates) => {
+          const firstYear = prevDates[0].year;
+          const newDates = Array.from({ length: 20 }, (_, i) => ({
+            year: firstYear - (20 - i),
+            disabled: false
+          }));
+          return [...newDates, ...prevDates];
+        });
+      } else if (distanceFromBottom < 200 && !maxDate) {
+        setDates((prevDates) => {
+          const lastYear = prevDates[prevDates.length - 1].year;
+          const newDates = Array.from({ length: 20 }, (_, i) => ({
+            year: lastYear + (i + 1),
+            disabled: false
+          }));
+          return [...prevDates, ...newDates];
+        });
+      }
     };
-    const isDisabled = isBeyondMaxDate(nToday, maxDate) || isBeyondMinDate(nToday, minDate) || isUnavailableDate(nToday, unavailableDates, unavailable, defaultTimeZone);
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        ref,
-        onClick: onClickHandler,
-        appearance: "secondary",
-        disabled: isDisabled,
-        "data-anv": "calendar-now",
-        size: "small",
-        ...rest,
-        children: "Today"
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [minDate, maxDate]);
+  const classes = cx(styles["year-selection"], props.className);
+  const [focusedIndex, setFocusedIndex] = useState(
+    // start focused on the middle of the year selection, with odd numbers on the left
+    selectedYear % 2 ? 24 : 25
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      const target = e.target;
+      const cards = containerRef.current?.querySelectorAll(
+        "input[type='checkbox']"
+      );
+      if (!cards || cards.length === 0) {
+        return;
       }
-    );
-  }
-);
-CalendarNow.displayName = "CalendarNow";
+      const cardArray = Array.from(cards);
+      const currentIndex = cardArray.indexOf(target);
+      if (currentIndex === -1) return;
+      const updateFocusedIndex = (index) => {
+        e.preventDefault();
+        cardArray[index].focus();
+        setFocusedIndex(index);
+      };
+      switch (e.key) {
+        case "ArrowLeft":
+          updateFocusedIndex(currentIndex - 1);
+          break;
+        case "ArrowRight":
+          updateFocusedIndex(currentIndex + 1);
+          break;
+        case "ArrowUp":
+          updateFocusedIndex(currentIndex - 2);
+          break;
+        case "ArrowDown":
+          updateFocusedIndex(currentIndex + 2);
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          onYearSelection(dates[currentIndex].year);
+          break;
+      }
+    },
+    [dates, onYearSelection]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: combinedRef,
+      "data-anv": "calendar-year-selection",
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": "Calendar year selection", children: /* @__PURE__ */ jsx(
+        Grid,
+        {
+          templateColumns: "repeat(2, minmax(0, 1fr))",
+          gap: 3,
+          onKeyDown: handleKeyDown,
+          role: "row",
+          children: dates.map(({ year, disabled }, index) => {
+            const yearDate = DateTime.fromObject({ year }).toFormat("yyyy");
+            return /* @__PURE__ */ jsx("div", { role: "gridcell", children: /* @__PURE__ */ jsx(
+              SelectCard,
+              {
+                id: yearDate,
+                onChange: () => onYearSelection(year),
+                checked: selectedYear === year,
+                checkboxProps: {
+                  className: styles["selection-checkbox"],
+                  tabIndex: focusedIndex === index ? 0 : -1
+                },
+                className: styles["selection-card"],
+                disabled,
+                children: yearDate
+              }
+            ) }, yearDate);
+          })
+        }
+      ) })
+    }
+  );
+});
+CalendarYearSelection.displayName = "CalendarYearSelection";
 
-const CalendarContext = createContext(null);
 const Calendar = forwardRef(
   (props, ref) => {
     const uid = useId();
     const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
     const {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- overriding children internally
       children,
       focusedDate: focusProp,
       defaultFocusedDate,
@@ -8846,36 +9250,98 @@ const Calendar = forwardRef(
       range,
       ...remainingProps
     } = componentProps;
+    const calendarRef = useRef(null);
+    const combinedRef = useMergeRefs([ref, calendarRef]);
+    const lastIValue = useRef(iValue);
+    const buttonsRef = useRef(void 0);
+    const [calendarWidth, setCalendarWidth] = useState(
+      void 0
+    );
+    const [calendarSelectionState, setCalendarSelectionState] = useState("day");
+    useEffect(() => {
+      if (!calendarRef.current || style?.width != null) return;
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const width = entry.contentRect.width;
+          if (calendarSelectionState === "day" && width > 100) {
+            setCalendarWidth(width);
+          }
+        }
+      });
+      resizeObserver.observe(calendarRef.current);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [calendarSelectionState, style?.width]);
     const styleCombined = {
+      width: calendarWidth,
       ...style,
       ...layoutStyles
     };
-    const lastIValue = useRef(iValue);
-    const nDate = iValue ? typeof iValue === "string" ? normalizeDate(iValue, defaultTimeZone) : {
-      start: iValue.start ? normalizeDate(iValue.start, defaultTimeZone) : null,
-      end: iValue.end ? normalizeDate(iValue.end, defaultTimeZone) : null
-    } : null;
-    const nDefaultDate = iDefaultValue ? typeof iDefaultValue === "string" ? normalizeDate(iDefaultValue, defaultTimeZone) ?? null : {
-      start: iDefaultValue.start ? normalizeDate(iDefaultValue.start, defaultTimeZone) : null,
-      end: iDefaultValue?.end ? normalizeDate(iDefaultValue.end, defaultTimeZone) : null
-    } : null;
-    const nToday = typeof iValue === "string" ? normalizeDate(DateTime.now().toISO(), defaultTimeZone) : {
-      start: normalizeDate(DateTime.now().toISO(), defaultTimeZone),
-      end: normalizeDate(DateTime.now().toISO(), defaultTimeZone)
-    };
+    const { nDate, nDefaultDate, nToday } = useMemo(
+      () => ({
+        nDate: iValue ? typeof iValue === "string" ? normalizeDate(iValue, defaultTimeZone) : {
+          start: iValue.start ? normalizeDate(iValue.start, defaultTimeZone) : null,
+          end: iValue.end ? normalizeDate(iValue.end, defaultTimeZone) : null
+        } : null,
+        nDefaultDate: iDefaultValue ? typeof iDefaultValue === "string" ? normalizeDate(iDefaultValue, defaultTimeZone) : {
+          start: iDefaultValue.start ? normalizeDate(iDefaultValue.start, defaultTimeZone) : null,
+          end: iDefaultValue?.end ? normalizeDate(iDefaultValue.end, defaultTimeZone) : null
+        } : null,
+        nToday: typeof iValue === "string" ? normalizeDate(DateTime.now().toISO(), defaultTimeZone) : {
+          start: normalizeDate(DateTime.now().toISO(), defaultTimeZone),
+          end: normalizeDate(DateTime.now().toISO(), defaultTimeZone)
+        }
+      }),
+      [iValue, iDefaultValue, defaultTimeZone]
+    );
     const [value, setValue] = useState(nDate ?? nDefaultDate ?? nToday);
-    const returnFocusedDate = () => {
+    const getInitialDate = useMemo(() => {
+      if (defaultFocusedDate) {
+        return normalizeDate(defaultFocusedDate, defaultTimeZone);
+      }
+      if (iDefaultValue) {
+        const date = typeof iDefaultValue === "string" ? normalizeDate(iDefaultValue, defaultTimeZone) : normalizeDate(
+          iDefaultValue.start ?? iDefaultValue.end ?? "",
+          defaultTimeZone
+        );
+        return date;
+      }
       if (!DateTime.isDateTime(nDate) && !DateTime.isDateTime(nDefaultDate) && !DateTime.isDateTime(nToday)) {
         return nDate?.start ?? nDefaultDate?.start ?? nToday?.start;
       }
       return nDate ?? nDefaultDate ?? nToday;
-    };
-    const [focusedDate, setFocusedDate] = useState(returnFocusedDate());
+    }, [
+      defaultFocusedDate,
+      iDefaultValue,
+      nDate,
+      nDefaultDate,
+      nToday,
+      defaultTimeZone
+    ]);
+    const initialDate = getInitialDate ?? DateTime.now();
+    const [focusedDate, setFocusedDate] = useState(initialDate);
     const [hoveredDate, setHoveredDate] = useState();
+    const [selectedMonth, setSelectedMonth] = useState(
+      initialDate.month
+    );
+    const [selectedYear, setSelectedYear] = useState(
+      initialDate.year
+    );
     useEffect(() => {
-      if (!focusProp) return;
-      focusProp && setFocusedDate(normalizeDate(focusProp, defaultTimeZone));
-    }, [focusProp]);
+      if (!focusProp && !defaultFocusedDate) return;
+      if (focusProp) {
+        setFocusedDate(normalizeDate(focusProp, defaultTimeZone));
+      } else if (defaultFocusedDate) {
+        setFocusedDate(normalizeDate(defaultFocusedDate, defaultTimeZone));
+        setSelectedMonth(
+          normalizeDate(defaultFocusedDate, defaultTimeZone).month
+        );
+        setSelectedYear(
+          normalizeDate(defaultFocusedDate, defaultTimeZone).year
+        );
+      }
+    }, [focusProp, defaultFocusedDate]);
     useEffect(() => {
       if (!iValue) {
         lastIValue.current = iValue;
@@ -8895,6 +9361,14 @@ const Calendar = forwardRef(
       }
       lastIValue.current = iValue;
     }, [iValue]);
+    const normalizedMinDate = useMemo(
+      () => minDate ? normalizeDate(minDate, defaultTimeZone) : null,
+      [minDate, defaultTimeZone]
+    );
+    const normalizedMaxDate = useMemo(
+      () => maxDate ? normalizeDate(maxDate, defaultTimeZone) : null,
+      [maxDate, defaultTimeZone]
+    );
     const providerValue = useMemo(() => {
       const format = {
         weekday: "long",
@@ -8905,6 +9379,10 @@ const Calendar = forwardRef(
       return {
         focusedDate,
         setFocusedDate,
+        selectedMonth,
+        setSelectedMonth,
+        selectedYear,
+        setSelectedYear,
         hoveredDate,
         setHoveredDate,
         value,
@@ -8914,8 +9392,8 @@ const Calendar = forwardRef(
         onSelection,
         controlled: !!iValue,
         range,
-        minDate: minDate ? normalizeDate(minDate, defaultTimeZone) : null,
-        maxDate: maxDate ? normalizeDate(maxDate, defaultTimeZone) : null,
+        minDate: normalizedMinDate,
+        maxDate: normalizedMaxDate,
         unavailableDates: new Set(unavailableDates),
         unavailable: {
           dates: new Set(unavailable.dates),
@@ -8927,11 +9405,13 @@ const Calendar = forwardRef(
       };
     }, [
       focusedDate,
+      selectedMonth,
+      selectedYear,
       hoveredDate,
       id,
       locale,
-      maxDate,
-      minDate,
+      normalizedMaxDate,
+      normalizedMinDate,
       iValue,
       onSelection,
       range,
@@ -8942,74 +9422,138 @@ const Calendar = forwardRef(
       value,
       startDay
     ]);
-    const heading = () => {
-      return focusedDate?.setLocale(locale).toLocaleString({
-        month: "long",
-        year: "numeric"
-      });
-    };
-    if ("range" in remainingProps && remainingProps.range === true) {
-      return /* @__PURE__ */ jsx(
-        CalendarContext.Provider,
-        {
-          value: providerValue,
-          children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref,
-              id: id ?? uid,
-              className: styles["calendar"],
-              style: styleCombined,
-              "data-anv": "calendar",
-              ...remainingProps,
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: styles["header"], children: [
-                  /* @__PURE__ */ jsx("span", { className: styles["heading"], children: heading() }),
-                  /* @__PURE__ */ jsxs("span", { className: styles["controller"], children: [
-                    /* @__PURE__ */ jsx(CalendarNow, {}),
-                    /* @__PURE__ */ jsx(CalendarPrev, {}),
-                    /* @__PURE__ */ jsx(CalendarNext, {})
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx(CalendarMonth, {})
-              ]
-            }
-          )
-        }
+    const updateHeaderButtons = useCallback(() => {
+      buttonsRef.current = calendarRef.current?.querySelectorAll(
+        "[data-calendar-header-button]"
       );
-    }
+    }, []);
+    useEffect(() => {
+      updateHeaderButtons();
+    }, [updateHeaderButtons]);
+    const handleHeaderKeyDown = useCallback((e) => {
+      const target = e.target;
+      if (!buttonsRef.current || buttonsRef.current.length === 0) {
+        return;
+      }
+      const buttonArray = Array.from(buttonsRef.current);
+      const currentIndex = buttonArray.indexOf(target);
+      if (currentIndex === -1) return;
+      let newIndex;
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          newIndex = currentIndex > 0 ? currentIndex - 1 : buttonArray.length - 1;
+          buttonArray[newIndex].focus();
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          newIndex = currentIndex < buttonArray.length - 1 ? currentIndex + 1 : 0;
+          buttonArray[newIndex].focus();
+          break;
+      }
+    }, []);
+    const handleMonthSelection = useCallback(
+      (month) => {
+        setSelectedMonth(month);
+        setFocusedDate(
+          DateTime.fromObject({
+            year: focusedDate?.year ?? 1,
+            month,
+            day: 1
+          })
+        );
+        setCalendarSelectionState("day");
+      },
+      [focusedDate]
+    );
+    const handleYearSelection = useCallback(
+      (year) => {
+        setSelectedYear(year);
+        setFocusedDate(
+          DateTime.fromObject({
+            year,
+            month: focusedDate?.month ?? 1,
+            day: 1
+          })
+        );
+        setCalendarSelectionState("day");
+      },
+      [focusedDate]
+    );
     return /* @__PURE__ */ jsx(CalendarContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsxs(
       "div",
       {
-        ref,
+        ref: combinedRef,
         id: id ?? uid,
         style: styleCombined,
         className: styles["calendar"],
         "data-anv": "calendar",
         ...remainingProps,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: styles["header"], children: [
-            /* @__PURE__ */ jsx("span", { className: styles["heading"], children: heading() }),
-            /* @__PURE__ */ jsxs("span", { className: styles["controller"], children: [
-              /* @__PURE__ */ jsx(CalendarNow, {}),
-              /* @__PURE__ */ jsx(CalendarPrev, {}),
-              /* @__PURE__ */ jsx(CalendarNext, {})
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(CalendarMonth, {})
+          /* @__PURE__ */ jsx("div", { className: styles["header"], children: /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "aria-label": "Calendar navigation",
+              role: "toolbar",
+              onKeyDown: handleHeaderKeyDown,
+              className: styles["controller"],
+              children: [
+                /* @__PURE__ */ jsx(
+                  CalendarMonthButton,
+                  {
+                    "data-calendar-header-button": true,
+                    calendarSelectionState,
+                    onClick: () => setCalendarSelectionState(
+                      (prev) => prev === "month" ? "day" : "month"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CalendarYearButton,
+                  {
+                    tabIndex: -1,
+                    "data-calendar-header-button": true,
+                    calendarSelectionState,
+                    onClick: () => setCalendarSelectionState(
+                      (prev) => prev === "year" ? "day" : "year"
+                    )
+                  }
+                ),
+                calendarSelectionState === "day" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    CalendarPrevButton,
+                    {
+                      tabIndex: -1,
+                      "data-calendar-header-button": true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CalendarNextButton,
+                    {
+                      tabIndex: -1,
+                      "data-calendar-header-button": true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CalendarNowButton,
+                    {
+                      tabIndex: -1,
+                      "data-calendar-header-button": true
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) }),
+          calendarSelectionState === "day" && /* @__PURE__ */ jsx(CalendarMonth, {}),
+          calendarSelectionState === "month" && /* @__PURE__ */ jsx(CalendarMonthSelection, { onMonthSelection: handleMonthSelection }),
+          calendarSelectionState === "year" && /* @__PURE__ */ jsx(CalendarYearSelection, { onYearSelection: handleYearSelection })
         ]
       }
     ) });
   }
 );
-function useCalendar() {
-  const context = useContext(CalendarContext);
-  if (!context) {
-    throw new Error("useCalendar must be used within a <Calendar>");
-  }
-  return context;
-}
 Calendar.displayName = "Calendar";
 
-export { CalendarNow as C, DateTime as D, CalendarMonth as a, CalendarNext as b, CalendarPrev as c, Calendar as d, isValidDate as i, toDateString as t };
-//# sourceMappingURL=Calendar-ch54N6OS-0vxeSJFt.js.map
+export { CalendarNowButton as C, DateTime as D, CalendarMonth as a, CalendarNextButton as b, CalendarPrevButton as c, CalendarMonthButton as d, CalendarYearButton as e, Calendar as f, isValidDate as i, toDateString as t };
+//# sourceMappingURL=Calendar-C3dudrjk-nI60sdlM.js.map