@mirohq/design-system-calendar 2.4.42 → 2.5.0

package/dist/module.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { createContext, useContext, useState, useMemo, useCallback, useRef, useEffect } from 'react';
-import { useDateFormatter, useCalendarCell, useFocusRing, mergeProps, useLocale, useCalendarGrid, useCalendar, useRangeCalendar, I18nProvider } from 'react-aria';
+import React, { createContext, useContext, useState, useMemo, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import { useLocale, useDateFormatter, useCalendarCell, useFocusRing, mergeProps, useCalendarGrid, useCalendar, useRangeCalendar, I18nProvider } from 'react-aria';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { Trigger as Trigger$1, Content as Content$1 } from '@radix-ui/react-popover';
-import { IconCross, IconCalendarBlank, IconChevronLeft, IconChevronRight } from '@mirohq/design-system-icons';
+import { IconCross, IconCalendarBlank, IconChevronLeft, IconChevronRight, IconClock } from '@mirohq/design-system-icons';
 import { useFormFieldContext } from '@mirohq/design-system-base-form';
 import { stringAttrValue, booleanify } from '@mirohq/design-system-utils';
 import { Primitive } from '@mirohq/design-system-primitive';
@@ -14,7 +14,7 @@ import { BaseButton } from '@mirohq/design-system-base-button';
 import { Tooltip } from '@mirohq/design-system-tooltip';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useCalendarState, useRangeCalendarState } from 'react-stately';
-import { isSameMonth, isSameDay, isToday, getLocalTimeZone, getWeeksInMonth, createCalendar } from '@internationalized/date';
+import { getLocalTimeZone, startOfWeek, endOfWeek, today, isSameDay, isSameMonth, isToday, getWeeksInMonth, CalendarDate, createCalendar } from '@internationalized/date';
 import { Flex } from '@mirohq/design-system-flex';
 import { Heading } from '@mirohq/design-system-typography';
 import { IconButton } from '@mirohq/design-system-icon-button';
@@ -103,6 +103,18 @@ const ClearAction = React.forwardRef(({ "aria-label": ariaLabel, label, ...restP
   /* @__PURE__ */ jsx(Tooltip.Content, { children: label })
 ] }));
 
+const PERIOD_TO_VIEW_MODE = {
+  quarter: "quarters",
+  month: "months"
+};
+const getNavigationYear = (value) => {
+  var _a;
+  if (value == null) {
+    return (/* @__PURE__ */ new Date()).getFullYear();
+  }
+  const date = "start" in value ? value.start : value;
+  return (_a = date == null ? void 0 : date.year) != null ? _a : (/* @__PURE__ */ new Date()).getFullYear();
+};
 const CalendarContext = createContext({});
 const CalendarProvider = ({
   children,
@@ -116,7 +128,7 @@ const CalendarProvider = ({
   onClose,
   ...restProps
 }) => {
-  var _a;
+  var _a, _b;
   const [immediateSave, setImmediateSave] = useState(false);
   const [internalCalendarValue, setInternalCalendarValue] = useState(valueProp != null ? valueProp : defaultValueProp);
   const visibleDuration = useMemo(
@@ -130,6 +142,13 @@ const CalendarProvider = ({
     defaultProp: defaultValueProp,
     onChange: onValueChange
   });
+  const defaultViewMode = (_a = restProps.period != null ? PERIOD_TO_VIEW_MODE[restProps.period] : void 0) != null ? _a : "days";
+  const [viewMode, setViewMode] = useState(defaultViewMode);
+  const [navigationYear, setNavigationYear] = useState(
+    () => getNavigationYear(value)
+  );
+  const valueRef = useRef(value);
+  valueRef.current = value;
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpenProp,
@@ -137,10 +156,20 @@ const CalendarProvider = ({
       if (state) {
         onOpen == null ? void 0 : onOpen();
       } else {
+        setViewMode(defaultViewMode);
         onClose == null ? void 0 : onClose();
       }
     }
   });
+  const valueYear = getNavigationYear(value);
+  useEffect(() => {
+    setNavigationYear(valueYear);
+  }, [valueYear]);
+  useEffect(() => {
+    if (open) {
+      setNavigationYear(getNavigationYear(valueRef.current));
+    }
+  }, [open]);
   const onCalendarDateClick = useCallback(
     (value2) => {
       if (immediateSave) {
@@ -156,11 +185,15 @@ const CalendarProvider = ({
     setValue(internalCalendarValue);
     setOpen(false);
   };
+  const periodImpliesNavigation = restProps.period === "quarter" || restProps.period === "month" || restProps.period === "week";
+  const effectivePeriodNavigation = restProps.navigation === true && visibleMonths <= 1 || periodImpliesNavigation;
+  const effectiveViewMode = effectivePeriodNavigation ? viewMode : "days";
   return /* @__PURE__ */ jsx(
     CalendarContext.Provider,
     {
       value: {
         ...restProps,
+        navigation: effectivePeriodNavigation,
         visibleDuration,
         value,
         setValue,
@@ -169,8 +202,11 @@ const CalendarProvider = ({
         onCalendarDateClick,
         setImmediateSave,
         onSaveClick,
-        // value should not be undefined otherwise react-aria calendar will complain in console
-        calendarValue: (_a = immediateSave ? internalCalendarValue : value) != null ? _a : null
+        calendarValue: (_b = immediateSave ? internalCalendarValue : value) != null ? _b : null,
+        viewMode: effectiveViewMode,
+        setViewMode,
+        navigationYear,
+        setNavigationYear
       },
       children
     }
@@ -233,6 +269,298 @@ const Trigger = React.forwardRef(
   }
 );
 
+const DECADE_SIZE = 12;
+
+const StyledValue = styled(Primitive.span, {});
+
+const en = {
+  quarter: (q) => "Q".concat(q),
+  quarterWithYear: (label, year) => "".concat(label, " ").concat(year),
+  views: { months: "months", quarters: "quarters", years: "years" },
+  switchView: (title, nextView) => "".concat(title, ", switch to ").concat(nextView, " view"),
+  previousYear: "Previous year",
+  nextYear: "Next year",
+  previousYears: (n) => "Previous ".concat(n, " years"),
+  nextYears: (n) => "Next ".concat(n, " years")
+};
+const STRINGS = {
+  en,
+  de: {
+    quarter: (q) => "Q".concat(q),
+    quarterWithYear: (label, year) => "".concat(label, " ").concat(year),
+    views: { months: "Monate", quarters: "Quartale", years: "Jahre" },
+    switchView: (title, nextView) => "".concat(title, ", zur Ansicht ").concat(nextView, " wechseln"),
+    previousYear: "Vorheriges Jahr",
+    nextYear: "N\xE4chstes Jahr",
+    previousYears: (n) => "Vorherige ".concat(n, " Jahre"),
+    nextYears: (n) => "N\xE4chste ".concat(n, " Jahre")
+  },
+  es: {
+    quarter: (q) => "T".concat(q),
+    quarterWithYear: (label, year) => "".concat(label, " ").concat(year),
+    views: { months: "meses", quarters: "trimestres", years: "a\xF1os" },
+    switchView: (title, nextView) => "".concat(title, ", cambiar a la vista de ").concat(nextView),
+    previousYear: "A\xF1o anterior",
+    nextYear: "A\xF1o siguiente",
+    previousYears: (n) => "".concat(n, " a\xF1os anteriores"),
+    nextYears: (n) => "".concat(n, " a\xF1os siguientes")
+  },
+  fr: {
+    quarter: (q) => "T".concat(q),
+    quarterWithYear: (label, year) => "".concat(label, " ").concat(year),
+    views: { months: "mois", quarters: "trimestres", years: "ann\xE9es" },
+    switchView: (title, nextView) => "".concat(title, ", passer \xE0 la vue ").concat(nextView),
+    previousYear: "Ann\xE9e pr\xE9c\xE9dente",
+    nextYear: "Ann\xE9e suivante",
+    previousYears: (n) => "".concat(n, " ann\xE9es pr\xE9c\xE9dentes"),
+    nextYears: (n) => "".concat(n, " ann\xE9es suivantes")
+  },
+  it: {
+    quarter: (q) => "T".concat(q),
+    quarterWithYear: (label, year) => "".concat(label, " ").concat(year),
+    views: { months: "mesi", quarters: "trimestri", years: "anni" },
+    switchView: (title, nextView) => "".concat(title, ", passa alla vista ").concat(nextView),
+    previousYear: "Anno precedente",
+    nextYear: "Anno successivo",
+    previousYears: (n) => "".concat(n, " anni precedenti"),
+    nextYears: (n) => "".concat(n, " anni successivi")
+  },
+  ja: {
+    quarter: (q) => "\u7B2C".concat(q, "\u56DB\u534A\u671F"),
+    quarterWithYear: (label, year) => "".concat(year, "\u5E74").concat(label),
+    views: { months: "\u6708", quarters: "\u56DB\u534A\u671F", years: "\u5E74" },
+    switchView: (title, nextView) => "".concat(title, "\u3001").concat(nextView, "\u8868\u793A\u306B\u5207\u308A\u66FF\u3048"),
+    previousYear: "\u524D\u5E74",
+    nextYear: "\u7FCC\u5E74",
+    previousYears: (n) => "\u524D\u306E".concat(n, "\u5E74"),
+    nextYears: (n) => "\u6B21\u306E".concat(n, "\u5E74")
+  },
+  ko: {
+    quarter: (q) => "".concat(q, "\uBD84\uAE30"),
+    quarterWithYear: (label, year) => "".concat(year, "\uB144 ").concat(label),
+    views: { months: "\uC6D4", quarters: "\uBD84\uAE30", years: "\uB144" },
+    switchView: (title, nextView) => "".concat(title, ", ").concat(nextView, " \uBCF4\uAE30\uB85C \uC804\uD658"),
+    previousYear: "\uC774\uC804 \uD574",
+    nextYear: "\uB2E4\uC74C \uD574",
+    previousYears: (n) => "\uC774\uC804 ".concat(n, "\uB144"),
+    nextYears: (n) => "\uB2E4\uC74C ".concat(n, "\uB144")
+  },
+  nl: {
+    quarter: (q) => "K".concat(q),
+    quarterWithYear: (label, year) => "".concat(label, " ").concat(year),
+    views: { months: "maanden", quarters: "kwartalen", years: "jaren" },
+    switchView: (title, nextView) => "".concat(title, ", ga naar weergave ").concat(nextView),
+    previousYear: "Vorig jaar",
+    nextYear: "Volgend jaar",
+    previousYears: (n) => "Vorige ".concat(n, " jaar"),
+    nextYears: (n) => "Volgende ".concat(n, " jaar")
+  },
+  pl: {
+    quarter: (q) => "K".concat(q),
+    quarterWithYear: (label, year) => "".concat(label, " ").concat(year),
+    views: { months: "miesi\u0105ce", quarters: "kwarta\u0142y", years: "lata" },
+    switchView: (title, nextView) => "".concat(title, ", prze\u0142\u0105cz na widok: ").concat(nextView),
+    previousYear: "Poprzedni rok",
+    nextYear: "Nast\u0119pny rok",
+    previousYears: (n) => "Poprzednie ".concat(n, " lat"),
+    nextYears: (n) => "Nast\u0119pne ".concat(n, " lat")
+  },
+  pt: {
+    quarter: (q) => "T".concat(q),
+    quarterWithYear: (label, year) => "".concat(label, " ").concat(year),
+    views: { months: "meses", quarters: "trimestres", years: "anos" },
+    switchView: (title, nextView) => "".concat(title, ", mudar para a visualiza\xE7\xE3o de ").concat(nextView),
+    previousYear: "Ano anterior",
+    nextYear: "Pr\xF3ximo ano",
+    previousYears: (n) => "".concat(n, " anos anteriores"),
+    nextYears: (n) => "Pr\xF3ximos ".concat(n, " anos")
+  },
+  ru: {
+    quarter: (q) => "".concat(q, " \u043A\u0432."),
+    quarterWithYear: (label, year) => "".concat(label, " ").concat(year),
+    views: { months: "\u043C\u0435\u0441\u044F\u0446\u044B", quarters: "\u043A\u0432\u0430\u0440\u0442\u0430\u043B\u044B", years: "\u0433\u043E\u0434\u044B" },
+    switchView: (title, nextView) => "".concat(title, ", \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0438\u0442\u044C\u0441\u044F \u043D\u0430 ").concat(nextView),
+    previousYear: "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0433\u043E\u0434",
+    nextYear: "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0433\u043E\u0434",
+    previousYears: (n) => "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0435 ".concat(n, " \u043B\u0435\u0442"),
+    nextYears: (n) => "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0435 ".concat(n, " \u043B\u0435\u0442")
+  },
+  tr: {
+    quarter: (q) => "\xC7".concat(q),
+    quarterWithYear: (label, year) => "".concat(label, " ").concat(year),
+    views: { months: "aylar", quarters: "\xE7eyrekler", years: "y\u0131llar" },
+    switchView: (title, nextView) => "".concat(title, ", ").concat(nextView, " g\xF6r\xFCn\xFCm\xFCne ge\xE7"),
+    previousYear: "\xD6nceki y\u0131l",
+    nextYear: "Sonraki y\u0131l",
+    previousYears: (n) => "\xD6nceki ".concat(n, " y\u0131l"),
+    nextYears: (n) => "Sonraki ".concat(n, " y\u0131l")
+  },
+  uk: {
+    quarter: (q) => "".concat(q, " \u043A\u0432."),
+    quarterWithYear: (label, year) => "".concat(label, " ").concat(year),
+    views: { months: "\u043C\u0456\u0441\u044F\u0446\u0456", quarters: "\u043A\u0432\u0430\u0440\u0442\u0430\u043B\u0438", years: "\u0440\u043E\u043A\u0438" },
+    switchView: (title, nextView) => "".concat(title, ", \u043F\u0435\u0440\u0435\u0439\u0442\u0438 \u0434\u043E ").concat(nextView),
+    previousYear: "\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u0440\u0456\u043A",
+    nextYear: "\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u0440\u0456\u043A",
+    previousYears: (n) => "\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456 ".concat(n, " \u0440\u043E\u043A\u0456\u0432"),
+    nextYears: (n) => "\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0456 ".concat(n, " \u0440\u043E\u043A\u0456\u0432")
+  },
+  zh: {
+    quarter: (q) => "\u7B2C".concat(q, "\u5B63\u5EA6"),
+    quarterWithYear: (label, year) => "".concat(year, "\u5E74").concat(label),
+    views: { months: "\u6708\u4EFD", quarters: "\u5B63\u5EA6", years: "\u5E74\u4EFD" },
+    switchView: (title, nextView) => "".concat(title, "\uFF0C\u5207\u6362\u5230").concat(nextView, "\u89C6\u56FE"),
+    previousYear: "\u4E0A\u4E00\u5E74",
+    nextYear: "\u4E0B\u4E00\u5E74",
+    previousYears: (n) => "\u524D".concat(n, "\u5E74"),
+    nextYears: (n) => "\u540E".concat(n, "\u5E74")
+  }
+};
+const getCalendarStrings = (locale) => {
+  var _a;
+  return (_a = STRINGS[locale.split(/[-_]/)[0].toLowerCase()]) != null ? _a : en;
+};
+const useCalendarStrings = () => {
+  const { locale } = useLocale();
+  return useMemo(() => getCalendarStrings(locale), [locale]);
+};
+
+const DEFAULT_FORMAT = {
+  day: "2-digit",
+  month: "short",
+  year: "numeric"
+};
+const PERIOD_DAY_FORMAT = {
+  day: "numeric",
+  month: "short"
+};
+const PERIOD_WEEK_FORMAT = PERIOD_DAY_FORMAT;
+const PERIOD_MONTH_FORMAT = {
+  month: "short",
+  year: "2-digit"
+};
+function formatDate(date, formatter, timeZone) {
+  return formatter.format(date.toDate(timeZone));
+}
+function formatValue(value, formatter, timeZone) {
+  if (value == null || value === void 0) {
+    return void 0;
+  }
+  if ("start" in value) {
+    if (value.start == null || value.end == null) {
+      return void 0;
+    }
+    return "".concat(formatDate(value.start, formatter, timeZone), " - ").concat(formatDate(
+      value.end,
+      formatter,
+      timeZone
+    ));
+  }
+  return formatDate(value, formatter, timeZone);
+}
+function isCurrentPeriod(value, period, locale) {
+  const todayDate = today(getLocalTimeZone());
+  switch (period) {
+    case "day":
+    case void 0:
+      return isSameDay(value, todayDate);
+    case "week": {
+      const currentWeekStart = startOfWeek(todayDate, locale);
+      const selectedWeekStart = startOfWeek(value, locale);
+      return isSameDay(currentWeekStart, selectedWeekStart);
+    }
+    case "month":
+      return value.year === todayDate.year && value.month === todayDate.month;
+    case "quarter": {
+      const currentQuarter = Math.ceil(todayDate.month / 3);
+      const selectedQuarter = Math.ceil(value.month / 3);
+      return value.year === todayDate.year && selectedQuarter === currentQuarter;
+    }
+    default:
+      return false;
+  }
+}
+const Value = React.forwardRef(({ format, currentLabel, ...restProps }, forwardRef) => {
+  const { value, period, formatQuarterLabel } = useCalendarContext();
+  const { locale } = useLocale();
+  const strings = useCalendarStrings();
+  const yearFormatter = useMemo(
+    () => new Intl.NumberFormat(locale, { useGrouping: false }),
+    [locale]
+  );
+  const timeZone = useMemo(getLocalTimeZone, []);
+  const effectivePeriod = period != null ? period : "day";
+  const periodFormat = useMemo(() => {
+    if (format != null) return format;
+    if (period == null) return DEFAULT_FORMAT;
+    switch (period) {
+      case "day":
+        return PERIOD_DAY_FORMAT;
+      case "week":
+        return PERIOD_WEEK_FORMAT;
+      case "month":
+        return PERIOD_MONTH_FORMAT;
+      default:
+        return DEFAULT_FORMAT;
+    }
+  }, [format, period]);
+  const formatWithTimeZone = useMemo(
+    () => ({ ...periodFormat, timeZone }),
+    [periodFormat, timeZone]
+  );
+  const dateFormatter = useDateFormatter(formatWithTimeZone);
+  const dayOnlyFormat = useMemo(
+    () => ({ day: "numeric", timeZone }),
+    [timeZone]
+  );
+  const dayOnlyFormatter = useDateFormatter(dayOnlyFormat);
+  let valueToDisplay;
+  if (value == null) {
+    valueToDisplay = void 0;
+  } else if ("start" in value) {
+    valueToDisplay = formatValue(value, dateFormatter, timeZone);
+  } else {
+    switch (effectivePeriod) {
+      case "week": {
+        const calendarDate = value;
+        const weekStart = startOfWeek(calendarDate, locale);
+        const weekEnd = endOfWeek(calendarDate, locale);
+        const startStr = formatDate(weekStart, dateFormatter, timeZone);
+        if (weekStart.month === weekEnd.month) {
+          const endDay = dayOnlyFormatter.format(weekEnd.toDate(timeZone));
+          valueToDisplay = "".concat(startStr, " - ").concat(endDay);
+        } else {
+          const endStr = formatDate(weekEnd, dateFormatter, timeZone);
+          if (startStr != null && endStr != null) {
+            valueToDisplay = "".concat(startStr, " - ").concat(endStr);
+          }
+        }
+        break;
+      }
+      case "quarter": {
+        const quarter = Math.ceil(value.month / 3);
+        valueToDisplay = strings.quarterWithYear(
+          (formatQuarterLabel != null ? formatQuarterLabel : strings.quarter)(quarter),
+          yearFormatter.format(value.year)
+        );
+        break;
+      }
+      case "month": {
+        valueToDisplay = formatDate(value, dateFormatter, timeZone);
+        break;
+      }
+      default: {
+        valueToDisplay = formatDate(value, dateFormatter, timeZone);
+        break;
+      }
+    }
+    if (valueToDisplay != null && currentLabel != null && !("start" in value) && isCurrentPeriod(value, period, locale)) {
+      valueToDisplay = "".concat(valueToDisplay, " (").concat(currentLabel, ")");
+    }
+  }
+  return /* @__PURE__ */ jsx(StyledValue, { ref: forwardRef, ...restProps, children: valueToDisplay });
+});
+
 const StyledContent = styled(Content$1, {
   ...floating.css(),
   zIndex: "$calendar",
@@ -254,12 +582,54 @@ const StyledClearContent = styled(Primitive.div, {
   padding: "$200",
   borderTop: "1px solid $border-default"
 });
+const StyledGoToCurrent = styled(BaseButton, {
+  display: "flex",
+  alignItems: "center",
+  gap: "$100",
+  marginTop: "$150",
+  padding: "$100 $150",
+  borderRadius: "$calendar",
+  color: "$text-secondary",
+  fontSize: "$body-xs",
+  lineHeight: "$body-xs",
+  fontWeight: "$body-xs",
+  "& svg": {
+    width: "16px",
+    height: "16px",
+    color: "$icon-secondary"
+  },
+  _hover: {
+    backgroundColor: "$background-interactive-surface-secondary-hover"
+  },
+  ...focus.css({
+    boxShadow: "$focus",
+    outline: "1px solid transparent"
+  })
+});
 
 const StyledHeaderTitle = styled(Heading, {
   margin: 0,
   flex: "2",
   textAlign: "center"
 });
+const StyledHeaderTitleButton = styled(BaseButton, {
+  display: "inline-block",
+  textAlign: "center",
+  fontSize: "$250",
+  fontWeight: "$bold",
+  lineHeight: "$250",
+  color: "$text-interactive-primary",
+  borderRadius: "$button",
+  padding: "$50 $100",
+  ...focus.css({
+    boxShadow: "$focus",
+    outline: "1px solid transparent"
+  }),
+  _hover: {
+    color: "$text-interactive-primary-hover",
+    backgroundColor: "$background-interactive-surface-secondary-hover"
+  }
+});
 const StyledHeaderPlaceholder = styled("div", {
   height: "$8",
   // to compensate icon buttons' width and space between 2 calendars
@@ -287,25 +657,88 @@ const Header = ({
   state,
   prevButtonProps,
   nextButtonProps,
-  visibleMonths
+  visibleMonths,
+  yearFormatter,
+  onPrevOverride,
+  onNextOverride,
+  onZoomOut,
+  isPrevDisabled,
+  isNextDisabled
 }) => {
+  const { navigation, viewMode, navigationYear, formatSwitchViewLabel } = useCalendarContext();
+  const strings = useCalendarStrings();
   const monthDateFormatter = useDateFormatter({
     month: "long",
     year: "numeric",
     timeZone: state.timeZone
   });
+  const getTitleText = () => {
+    switch (viewMode) {
+      case "months":
+      case "quarters":
+        return yearFormatter.format(navigationYear);
+      case "years": {
+        const decadeStart = Math.floor(navigationYear / DECADE_SIZE) * DECADE_SIZE;
+        return "".concat(yearFormatter.format(decadeStart), "\u2013").concat(yearFormatter.format(
+          decadeStart + DECADE_SIZE - 1
+        ));
+      }
+      default:
+        return monthDateFormatter.format(
+          state.visibleRange.start.toDate(state.timeZone)
+        );
+    }
+  };
+  const getNextViewLabel = () => {
+    if (viewMode === "days") return strings.views.months;
+    if (viewMode === "months" || viewMode === "quarters") {
+      return strings.views.years;
+    }
+    return "";
+  };
+  const isTopLevel = viewMode === "years";
+  const showClickableTitle = navigation === true && !isTopLevel;
+  const isDayView = viewMode === "days";
+  const stepLabels = viewMode === "years" ? {
+    prev: strings.previousYears(DECADE_SIZE),
+    next: strings.nextYears(DECADE_SIZE)
+  } : { prev: strings.previousYear, next: strings.nextYear };
   return /* @__PURE__ */ jsxs(StyledHeader, { children: [
-    /* @__PURE__ */ jsx(HeaderButton, { ...prevButtonProps, children: /* @__PURE__ */ jsx(IconChevronLeft, {}) }),
-    /* @__PURE__ */ jsx(StyledHeaderTitle, { level: 2, styledAs: "h3", children: monthDateFormatter.format(
-      state.visibleRange.start.toDate(state.timeZone)
-    ) }),
-    visibleMonths === 2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+    isDayView ? /* @__PURE__ */ jsx(HeaderButton, { ...prevButtonProps, children: /* @__PURE__ */ jsx(IconChevronLeft, {}) }) : /* @__PURE__ */ jsx(
+      HeaderButton,
+      {
+        "aria-label": stepLabels.prev,
+        isDisabled: isPrevDisabled,
+        onClick: onPrevOverride,
+        children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(StyledHeaderTitle, { level: 2, styledAs: "h3", children: showClickableTitle ? /* @__PURE__ */ jsx(
+      StyledHeaderTitleButton,
+      {
+        onClick: onZoomOut,
+        "aria-label": (formatSwitchViewLabel != null ? formatSwitchViewLabel : strings.switchView)(
+          getTitleText(),
+          getNextViewLabel()
+        ),
+        children: getTitleText()
+      }
+    ) : getTitleText() }),
+    visibleMonths === 2 && isDayView && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(StyledHeaderPlaceholder, {}),
       /* @__PURE__ */ jsx(StyledHeaderTitle, { level: 2, styledAs: "h3", children: monthDateFormatter.format(
         state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
       ) })
     ] }),
-    /* @__PURE__ */ jsx(HeaderButton, { ...nextButtonProps, children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
+    isDayView ? /* @__PURE__ */ jsx(HeaderButton, { ...nextButtonProps, children: /* @__PURE__ */ jsx(IconChevronRight, {}) }) : /* @__PURE__ */ jsx(
+      HeaderButton,
+      {
+        "aria-label": stepLabels.next,
+        isDisabled: isNextDisabled,
+        onClick: onNextOverride,
+        children: /* @__PURE__ */ jsx(IconChevronRight, {})
+      }
+    )
   ] });
 };
 
@@ -385,13 +818,30 @@ const StyledCellContent = styled(Primitive.div, {
       true: {
         display: "none"
       }
+    },
+    outsideMonth: {
+      true: {
+        color: "$text-secondary",
+        '&[aria-disabled="true"]': {
+          textDecoration: "none"
+        }
+      }
     }
+  },
+  // Week period: the row is the week, so hovering or focusing anywhere in it
+  // highlights the whole week. Cells in the selected week carry no
+  // data-week-hover, so the selected styling is not overridden.
+  "tr:hover > td > &[data-week-hover], tr:focus-within > td > &[data-week-hover]": {
+    backgroundColor: "$background-interactive-surface-secondary-hover",
+    borderRadius: 0
   }
 });
 
 const Cell = (props) => {
   let { state, date, currentMonth } = props;
   const ref = useRef(null);
+  const { period, minDate, maxDate, onCalendarDateClick } = useCalendarContext();
+  const { locale } = useLocale();
   const { cellProps, buttonProps, isSelected, formattedDate } = useCalendarCell(
     { date },
     state,
@@ -404,15 +854,65 @@ const Cell = (props) => {
   const { focusProps } = useFocusRing();
   const isRange = isSelected && (!isSelectionStart || !isSelectionEnd);
   const rangeVariant = isRange ? isSelectionStart ? "start" : isSelectionEnd ? "end" : "middle" : void 0;
-  return /* @__PURE__ */ jsx(StyledCell, { ...cellProps, children: /* @__PURE__ */ jsx(
+  let effectiveSelected = isSelected && (isSelectionStart || isSelectionEnd);
+  let effectiveRange = rangeVariant;
+  const isWeekPeriod = period === "week";
+  if (isWeekPeriod) {
+    const selectedValue = props.state.value;
+    if (selectedValue != null) {
+      const weekStart2 = startOfWeek(selectedValue, locale);
+      const weekEnd2 = endOfWeek(selectedValue, locale);
+      const inWeek = date.compare(weekStart2) >= 0 && date.compare(weekEnd2) <= 0;
+      if (inWeek) {
+        const isStart = isSameDay(date, weekStart2);
+        const isEnd = isSameDay(date, weekEnd2);
+        effectiveSelected = isStart || isEnd;
+        effectiveRange = isStart ? "start" : isEnd ? "end" : "middle";
+      } else {
+        effectiveSelected = false;
+        effectiveRange = void 0;
+      }
+    }
+  }
+  const weekStart = isWeekPeriod ? startOfWeek(date, locale) : null;
+  const weekEnd = isWeekPeriod ? endOfWeek(date, locale) : null;
+  const isWeekOutOfBounds = minDate != null && weekStart != null && weekStart.compare(minDate) < 0 || maxDate != null && weekEnd != null && weekEnd.compare(maxDate) > 0;
+  const enableOutsideDay = isWeekPeriod && isOutsideMonth && !isWeekOutOfBounds;
+  const selectWeek = () => {
+    if (weekStart != null) {
+      onCalendarDateClick(weekStart);
+    }
+  };
+  let weekDayProps = {};
+  if (isWeekPeriod && isWeekOutOfBounds) {
+    weekDayProps = { "aria-disabled": true, tabIndex: -1 };
+  } else if (enableOutsideDay) {
+    weekDayProps = {
+      "aria-disabled": void 0,
+      tabIndex: effectiveRange === "start" ? 0 : -1,
+      onClick: selectWeek,
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          event.stopPropagation();
+          selectWeek();
+        }
+      }
+    };
+  }
+  const gridCellProps = isWeekPeriod && (enableOutsideDay || isWeekOutOfBounds) ? { ...cellProps, "aria-disabled": isWeekOutOfBounds ? true : void 0 } : cellProps;
+  return /* @__PURE__ */ jsx(StyledCell, { ...gridCellProps, children: /* @__PURE__ */ jsx(
     StyledCellContent,
     {
       ...mergeProps(buttonProps, focusProps),
+      ...weekDayProps,
       ref,
-      selected: isSelected && (isSelectionStart || isSelectionEnd),
+      selected: effectiveSelected,
       today: isToday(date, getLocalTimeZone()),
-      range: rangeVariant,
-      hidden: isOutsideMonth,
+      range: effectiveRange,
+      hidden: isOutsideMonth && !isWeekPeriod,
+      outsideMonth: isOutsideMonth && isWeekPeriod,
+      "data-week-hover": isWeekPeriod && effectiveRange == null ? "" : void 0,
       children: formattedDate
     }
   ) });
@@ -456,6 +956,507 @@ const Grid = React.forwardRef(
   }
 );
 
+const StyledPeriodGrid = styled(Primitive.div, {
+  display: "grid",
+  gap: "$50",
+  padding: "$50 0",
+  // Match the day grid width: 7 cells × $10 (40px) = 280px
+  width: "calc($10 * 7)",
+  variants: {
+    columns: {
+      2: { gridTemplateColumns: "repeat(2, 1fr)" },
+      3: { gridTemplateColumns: "repeat(3, 1fr)" },
+      4: { gridTemplateColumns: "repeat(4, 1fr)" }
+    }
+  },
+  defaultVariants: {
+    columns: 4
+  }
+});
+const StyledPeriodRow = styled(Primitive.div, {
+  display: "contents"
+});
+const StyledPeriodGridCell = styled(Primitive.div, {
+  display: "contents"
+});
+const StyledPeriodCell = styled(BaseButton, {
+  justifyContent: "center",
+  height: "$10",
+  color: "$text-default",
+  fontSize: "$200",
+  ...focus.css({
+    position: "relative",
+    zIndex: "1",
+    boxShadow: "$focus",
+    outline: "1px solid transparent"
+  }),
+  '&:not([aria-disabled="true"])': {
+    _hover: {
+      backgroundColor: "$background-interactive-surface-secondary-hover"
+    }
+  },
+  '&[aria-disabled="true"]': {
+    color: "$text-disabled"
+  },
+  variants: {
+    current: {
+      true: {
+        backgroundColor: "$background-interactive-surface-secondary-hover",
+        color: "$text-default"
+      }
+    },
+    selected: {
+      true: {
+        backgroundColor: "$background-interactive-selected",
+        color: "$text-on-interactive-primary",
+        "& span": {
+          color: "inherit"
+        },
+        '&:not([aria-disabled="true"])': {
+          _hover: {
+            backgroundColor: "$background-interactive-primary-hover",
+            color: "$text-on-interactive-primary"
+          }
+        }
+      }
+    },
+    tall: {
+      true: {
+        height: "$14",
+        flexDirection: "column",
+        gap: "$25"
+      }
+    }
+  }
+});
+const StyledPeriodCellLabel = styled(Primitive.span, {
+  fontSize: "$100",
+  color: "$text-secondary"
+});
+
+const useGridNavigation = ({
+  rows,
+  columns,
+  selectedIndex,
+  currentIndex,
+  resetKey,
+  focusOnMount
+}) => {
+  const cellRefs = useRef(/* @__PURE__ */ new Map());
+  const [focusedRow, setFocusedRow] = useState(0);
+  const [focusedCol, setFocusedCol] = useState(0);
+  const hasFocusedRef = useRef(false);
+  const key = (r, c) => "".concat(r, "-").concat(c);
+  const isEnabled = useCallback((r, c) => {
+    const el = cellRefs.current.get(key(r, c));
+    return el != null && el.getAttribute("aria-disabled") !== "true";
+  }, []);
+  const findFirstEnabled = useCallback(() => {
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < columns; c++) {
+        if (isEnabled(r, c)) {
+          return [r, c];
+        }
+      }
+    }
+    return null;
+  }, [rows, columns, isEnabled]);
+  const focusCell = useCallback(
+    (row, col) => {
+      var _a;
+      if (isEnabled(row, col)) {
+        (_a = cellRefs.current.get(key(row, col))) == null ? void 0 : _a.focus();
+      }
+    },
+    [isEnabled]
+  );
+  const resolveFocusTarget = useCallback(() => {
+    for (const index of [selectedIndex, currentIndex]) {
+      if (index == null || index < 0 || index >= rows * columns) {
+        continue;
+      }
+      const candidate = [
+        Math.floor(index / columns),
+        index % columns
+      ];
+      if (isEnabled(...candidate)) {
+        return candidate;
+      }
+    }
+    return findFirstEnabled();
+  }, [selectedIndex, currentIndex, rows, columns, isEnabled, findFirstEnabled]);
+  useLayoutEffect(() => {
+    const target = resolveFocusTarget();
+    if (target == null) {
+      return;
+    }
+    const [row, col] = target;
+    setFocusedRow(row);
+    setFocusedCol(col);
+    if (focusOnMount === true && !hasFocusedRef.current) {
+      hasFocusedRef.current = true;
+      focusCell(row, col);
+    }
+  }, [resolveFocusTarget, focusCell, focusOnMount, resetKey]);
+  const findNextEnabled = useCallback(
+    (row, col, dr, dc) => {
+      let r = row + dr;
+      let c = col + dc;
+      while (r >= 0 && r < rows && c >= 0 && c < columns) {
+        if (isEnabled(r, c)) {
+          return [r, c];
+        }
+        r += dr;
+        c += dc;
+      }
+      return [row, col];
+    },
+    [rows, columns, isEnabled]
+  );
+  const getCellProps = useCallback(
+    (row, col) => ({
+      tabIndex: row === focusedRow && col === focusedCol ? 0 : -1,
+      ref: (el) => {
+        const k = key(row, col);
+        if (el != null) {
+          cellRefs.current.set(k, el);
+        } else {
+          cellRefs.current.delete(k);
+        }
+      },
+      onFocus: () => {
+        setFocusedRow(row);
+        setFocusedCol(col);
+      },
+      onKeyDown: (e) => {
+        let nextRow = row;
+        let nextCol = col;
+        switch (e.key) {
+          case "ArrowRight":
+            if (col < columns - 1) {
+              [nextRow, nextCol] = findNextEnabled(row, col, 0, 1);
+            }
+            break;
+          case "ArrowLeft":
+            if (col > 0) {
+              [nextRow, nextCol] = findNextEnabled(row, col, 0, -1);
+            }
+            break;
+          case "ArrowDown":
+            if (row < rows - 1) {
+              [nextRow, nextCol] = findNextEnabled(row, col, 1, 0);
+            }
+            break;
+          case "ArrowUp":
+            if (row > 0) {
+              [nextRow, nextCol] = findNextEnabled(row, col, -1, 0);
+            }
+            break;
+          case "Home": {
+            for (let r = 0; r < rows; r++) {
+              for (let c = 0; c < columns; c++) {
+                if (isEnabled(r, c)) {
+                  [nextRow, nextCol] = [r, c];
+                  r = rows;
+                  break;
+                }
+              }
+            }
+            break;
+          }
+          case "End": {
+            for (let r = rows - 1; r >= 0; r--) {
+              for (let c = columns - 1; c >= 0; c--) {
+                if (isEnabled(r, c)) {
+                  [nextRow, nextCol] = [r, c];
+                  r = -1;
+                  break;
+                }
+              }
+            }
+            break;
+          }
+          default:
+            return;
+        }
+        if (nextRow !== row || nextCol !== col) {
+          e.preventDefault();
+          focusCell(nextRow, nextCol);
+        }
+      }
+    }),
+    [
+      focusedRow,
+      focusedCol,
+      rows,
+      columns,
+      focusCell,
+      findNextEnabled,
+      isEnabled
+    ]
+  );
+  return { getCellProps };
+};
+
+const ROWS$2 = 3;
+const COLUMNS$2 = 4;
+const MonthGrid = ({
+  navigationYear,
+  timeZone,
+  onMonthSelect,
+  currentMonth,
+  currentYear,
+  selectedMonth,
+  selectedYear,
+  minDate,
+  maxDate,
+  yearFormatter,
+  focusOnMount
+}) => {
+  const monthFormatter = useDateFormatter({
+    month: "short",
+    timeZone
+  });
+  const { getCellProps } = useGridNavigation({
+    rows: ROWS$2,
+    columns: COLUMNS$2,
+    selectedIndex: selectedYear === navigationYear && selectedMonth != null ? selectedMonth - 1 : -1,
+    currentIndex: currentYear === navigationYear && currentMonth != null ? currentMonth - 1 : -1,
+    resetKey: navigationYear,
+    focusOnMount
+  });
+  const isMonthDisabled = (month) => {
+    if (minDate != null) {
+      const minYear = minDate.year;
+      const minMonth = minDate.month;
+      if (navigationYear < minYear || navigationYear === minYear && month < minMonth) {
+        return true;
+      }
+    }
+    if (maxDate != null) {
+      const maxYear = maxDate.year;
+      const maxMonth = maxDate.month;
+      if (navigationYear > maxYear || navigationYear === maxYear && month > maxMonth) {
+        return true;
+      }
+    }
+    return false;
+  };
+  return /* @__PURE__ */ jsx(
+    StyledPeriodGrid,
+    {
+      columns: 4,
+      role: "grid",
+      "aria-label": yearFormatter.format(navigationYear),
+      children: Array.from({ length: ROWS$2 }, (_, row) => /* @__PURE__ */ jsx(StyledPeriodRow, { role: "row", children: Array.from({ length: COLUMNS$2 }, (_2, col) => {
+        const month = row * COLUMNS$2 + col + 1;
+        const date = new CalendarDate(navigationYear, month, 1).toDate(
+          timeZone
+        );
+        const label = monthFormatter.format(date);
+        const disabled = isMonthDisabled(month);
+        const isCurrent = navigationYear === currentYear && month === currentMonth;
+        const isSelected = navigationYear === selectedYear && month === selectedMonth;
+        const cellProps = getCellProps(row, col);
+        return /* @__PURE__ */ jsx(
+          StyledPeriodGridCell,
+          {
+            role: "gridcell",
+            "aria-selected": isSelected || void 0,
+            children: /* @__PURE__ */ jsx(
+              StyledPeriodCell,
+              {
+                ...cellProps,
+                current: isCurrent,
+                selected: isSelected,
+                "aria-current": isCurrent ? "date" : void 0,
+                "aria-disabled": disabled || void 0,
+                "aria-label": "".concat(label, " ").concat(yearFormatter.format(
+                  navigationYear
+                )),
+                onPress: () => onMonthSelect(month),
+                children: label
+              }
+            )
+          },
+          month
+        );
+      }) }, row))
+    }
+  );
+};
+
+const ROWS$1 = 2;
+const COLUMNS$1 = 2;
+const QUARTER_MONTHS = [
+  [1, 3],
+  [4, 6],
+  [7, 9],
+  [10, 12]
+];
+const QuarterGrid = ({
+  navigationYear,
+  timeZone,
+  onQuarterSelect,
+  currentQuarter,
+  currentYear,
+  selectedQuarter,
+  selectedYear,
+  minDate,
+  maxDate,
+  formatQuarterLabel,
+  yearFormatter,
+  focusOnMount
+}) => {
+  const strings = useCalendarStrings();
+  const monthFormatter = useDateFormatter({
+    month: "short",
+    timeZone
+  });
+  const { getCellProps } = useGridNavigation({
+    rows: ROWS$1,
+    columns: COLUMNS$1,
+    selectedIndex: selectedYear === navigationYear && selectedQuarter != null ? selectedQuarter - 1 : -1,
+    currentIndex: currentYear === navigationYear && currentQuarter != null ? currentQuarter - 1 : -1,
+    resetKey: navigationYear,
+    focusOnMount
+  });
+  const isQuarterDisabled = (quarter) => {
+    const [startMonth, endMonth] = QUARTER_MONTHS[quarter - 1];
+    if (minDate != null) {
+      if (navigationYear < minDate.year || navigationYear === minDate.year && endMonth < minDate.month) {
+        return true;
+      }
+    }
+    if (maxDate != null) {
+      if (navigationYear > maxDate.year || navigationYear === maxDate.year && startMonth > maxDate.month) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const formatRange = (quarter) => {
+    const [startMonth, endMonth] = QUARTER_MONTHS[quarter - 1];
+    const start = monthFormatter.format(
+      new CalendarDate(navigationYear, startMonth, 1).toDate(timeZone)
+    );
+    const end = monthFormatter.format(
+      new CalendarDate(navigationYear, endMonth, 1).toDate(timeZone)
+    );
+    return "".concat(start, " \u2013 ").concat(end);
+  };
+  return /* @__PURE__ */ jsx(
+    StyledPeriodGrid,
+    {
+      columns: 2,
+      role: "grid",
+      "aria-label": yearFormatter.format(navigationYear),
+      children: Array.from({ length: ROWS$1 }, (_, row) => /* @__PURE__ */ jsx(StyledPeriodRow, { role: "row", children: Array.from({ length: COLUMNS$1 }, (_2, col) => {
+        const quarter = row * COLUMNS$1 + col + 1;
+        const disabled = isQuarterDisabled(quarter);
+        const isCurrent = navigationYear === currentYear && quarter === currentQuarter;
+        const isSelected = navigationYear === selectedYear && quarter === selectedQuarter;
+        const cellProps = getCellProps(row, col);
+        const rangeLabel = formatRange(quarter);
+        const label = (formatQuarterLabel != null ? formatQuarterLabel : strings.quarter)(quarter);
+        return /* @__PURE__ */ jsx(
+          StyledPeriodGridCell,
+          {
+            role: "gridcell",
+            "aria-selected": isSelected || void 0,
+            children: /* @__PURE__ */ jsxs(
+              StyledPeriodCell,
+              {
+                ...cellProps,
+                current: isCurrent,
+                selected: isSelected,
+                tall: true,
+                "aria-current": isCurrent ? "date" : void 0,
+                "aria-disabled": disabled || void 0,
+                "aria-label": "".concat(label, " ").concat(yearFormatter.format(
+                  navigationYear
+                ), ", ").concat(rangeLabel),
+                onPress: () => onQuarterSelect(quarter),
+                children: [
+                  label,
+                  /* @__PURE__ */ jsx(StyledPeriodCellLabel, { children: rangeLabel })
+                ]
+              }
+            )
+          },
+          quarter
+        );
+      }) }, row))
+    }
+  );
+};
+
+const ROWS = 3;
+const COLUMNS = 4;
+const TOTAL_CELLS = ROWS * COLUMNS;
+const YearGrid = ({
+  decadeStart,
+  onYearSelect,
+  currentYear,
+  selectedYear,
+  minDate,
+  maxDate,
+  yearFormatter,
+  focusOnMount
+}) => {
+  const { getCellProps } = useGridNavigation({
+    rows: ROWS,
+    columns: COLUMNS,
+    selectedIndex: selectedYear != null ? selectedYear - decadeStart : -1,
+    currentIndex: currentYear != null ? currentYear - decadeStart : -1,
+    resetKey: decadeStart,
+    focusOnMount
+  });
+  const isYearDisabled = (year) => {
+    if (minDate != null && year < minDate.year) return true;
+    if (maxDate != null && year > maxDate.year) return true;
+    return false;
+  };
+  return /* @__PURE__ */ jsx(
+    StyledPeriodGrid,
+    {
+      columns: 4,
+      role: "grid",
+      "aria-label": "".concat(yearFormatter.format(decadeStart), "\u2013").concat(yearFormatter.format(
+        decadeStart + TOTAL_CELLS - 1
+      )),
+      children: Array.from({ length: ROWS }, (_, row) => /* @__PURE__ */ jsx(StyledPeriodRow, { role: "row", children: Array.from({ length: COLUMNS }, (_2, col) => {
+        const year = decadeStart + row * COLUMNS + col;
+        const disabled = isYearDisabled(year);
+        const isCurrent = year === currentYear;
+        const isSelected = year === selectedYear;
+        const cellProps = getCellProps(row, col);
+        return /* @__PURE__ */ jsx(
+          StyledPeriodGridCell,
+          {
+            role: "gridcell",
+            "aria-selected": isSelected || void 0,
+            children: /* @__PURE__ */ jsx(
+              StyledPeriodCell,
+              {
+                ...cellProps,
+                current: isCurrent,
+                selected: isSelected,
+                "aria-current": isCurrent ? "date" : void 0,
+                "aria-disabled": disabled || void 0,
+                "aria-label": yearFormatter.format(year),
+                onPress: () => onYearSelect(year),
+                children: yearFormatter.format(year)
+              }
+            )
+          },
+          year
+        );
+      }) }, row))
+    }
+  );
+};
+
 const StyledPredefinedRanges = styled(Primitive.div, {
   display: "flex",
   flexDirection: "column",
@@ -500,9 +1501,31 @@ const PredefinedRanges = () => {
 };
 
 const CONTENT_OFFSET = parseInt(theme.space[50]);
+const VIEW_MODE_UP = {
+  days: "months",
+  months: "years",
+  quarters: "years",
+  years: "years"
+};
 const SharedContent = React.forwardRef(
   ({ calendarProps, prevButtonProps, nextButtonProps, state }, forwardRef) => {
-    const { visibleDuration } = useCalendarContext();
+    const {
+      visibleDuration,
+      viewMode,
+      setViewMode,
+      navigationYear,
+      setNavigationYear,
+      navigation,
+      period,
+      picker,
+      minDate,
+      maxDate,
+      onCalendarDateClick,
+      formatQuarterLabel,
+      goToCurrentLabel,
+      value: selectedValue
+    } = useCalendarContext();
+    const { locale } = useLocale();
     const monthDateFormatter = useDateFormatter({
       month: "long",
       year: "numeric",
@@ -514,8 +1537,185 @@ const SharedContent = React.forwardRef(
     const nextAriaLabel = "".concat(nextButtonProps["aria-label"], ", ").concat(monthDateFormatter.format(
       state.visibleRange.start.add({ months: visibleDuration.months === 2 ? 2 : 1 }).toDate(state.timeZone)
     ));
+    const todayDate = useMemo(() => today(getLocalTimeZone()), []);
+    const currentYear = todayDate.year;
+    const currentMonth = todayDate.month;
+    const yearFormatter = useMemo(
+      () => new Intl.NumberFormat(locale, { useGrouping: false }),
+      [locale]
+    );
+    const handleZoomOut = useCallback(() => {
+      if (viewMode === "days") {
+        setNavigationYear(state.visibleRange.start.year);
+      }
+      setViewMode(VIEW_MODE_UP[viewMode]);
+    }, [
+      viewMode,
+      setViewMode,
+      setNavigationYear,
+      state.visibleRange.start.year
+    ]);
+    const handleMonthSelect = useCallback(
+      (month) => {
+        if (period === "month") {
+          const date = new CalendarDate(navigationYear, month, 1);
+          onCalendarDateClick(date);
+        } else {
+          state.setFocusedDate(new CalendarDate(navigationYear, month, 1));
+          state.setFocused(true);
+          setViewMode("days");
+        }
+      },
+      [navigationYear, state, setViewMode, period, onCalendarDateClick]
+    );
+    const handleQuarterSelect = useCallback(
+      (quarter) => {
+        const firstMonth = (quarter - 1) * 3 + 1;
+        const date = new CalendarDate(navigationYear, firstMonth, 1);
+        onCalendarDateClick(date);
+      },
+      [navigationYear, onCalendarDateClick]
+    );
+    const handleYearSelect = useCallback(
+      (year) => {
+        setNavigationYear(year);
+        setViewMode(period === "quarter" ? "quarters" : "months");
+      },
+      [setNavigationYear, setViewMode, period]
+    );
+    const handlePrevOverride = useCallback(() => {
+      if (viewMode === "years") {
+        setNavigationYear((y) => y - DECADE_SIZE);
+      } else {
+        setNavigationYear((y) => y - 1);
+      }
+    }, [viewMode, setNavigationYear]);
+    const handleNextOverride = useCallback(() => {
+      if (viewMode === "years") {
+        setNavigationYear((y) => y + DECADE_SIZE);
+      } else {
+        setNavigationYear((y) => y + 1);
+      }
+    }, [viewMode, setNavigationYear]);
+    const decadeStart = Math.floor(navigationYear / DECADE_SIZE) * DECADE_SIZE;
+    const [isPrevDisabled, isNextDisabled] = useMemo(() => {
+      if (viewMode === "days") {
+        return [void 0, void 0];
+      }
+      if (viewMode === "years") {
+        return [
+          minDate != null && decadeStart - 1 < minDate.year,
+          maxDate != null && decadeStart + DECADE_SIZE > maxDate.year
+        ];
+      }
+      return [
+        minDate != null && navigationYear - 1 < minDate.year,
+        maxDate != null && navigationYear + 1 > maxDate.year
+      ];
+    }, [viewMode, decadeStart, navigationYear, minDate, maxDate]);
+    const currentQuarter = Math.ceil(currentMonth / 3);
+    const handleGoToCurrent = useCallback(() => {
+      const now = today(getLocalTimeZone());
+      let date;
+      switch (period) {
+        case "week":
+          date = startOfWeek(now, locale);
+          break;
+        case "month":
+          date = new CalendarDate(currentYear, currentMonth, 1);
+          break;
+        case "quarter": {
+          const firstMonth = (currentQuarter - 1) * 3 + 1;
+          date = new CalendarDate(currentYear, firstMonth, 1);
+          break;
+        }
+        default:
+          date = now;
+          break;
+      }
+      onCalendarDateClick(date);
+    }, [
+      period,
+      locale,
+      currentYear,
+      currentMonth,
+      currentQuarter,
+      onCalendarDateClick
+    ]);
+    const prevViewModeRef = useRef(viewMode);
+    const shouldAutoFocus = prevViewModeRef.current !== viewMode && viewMode !== "days";
+    useEffect(() => {
+      prevViewModeRef.current = viewMode;
+    }, [viewMode]);
+    const selectedDate = selectedValue != null && !("start" in selectedValue) ? selectedValue : null;
+    const selectedYear = selectedDate == null ? void 0 : selectedDate.year;
+    const selectedMonth = selectedDate == null ? void 0 : selectedDate.month;
+    const selectedQuarter = selectedMonth != null ? Math.ceil(selectedMonth / 3) : void 0;
+    const isSelectionInCurrentPeriod = useMemo(
+      () => selectedDate != null && isCurrentPeriod(selectedDate, period, locale),
+      [selectedDate, period, locale]
+    );
+    const showGoToCurrent = goToCurrentLabel != null && picker === "single" && !isSelectionInCurrentPeriod;
+    const renderGrid = () => {
+      switch (viewMode) {
+        case "months":
+          return /* @__PURE__ */ jsx(
+            MonthGrid,
+            {
+              navigationYear,
+              timeZone: state.timeZone,
+              onMonthSelect: handleMonthSelect,
+              currentMonth,
+              currentYear,
+              selectedMonth,
+              selectedYear,
+              minDate,
+              maxDate,
+              yearFormatter,
+              focusOnMount: shouldAutoFocus
+            }
+          );
+        case "quarters":
+          return /* @__PURE__ */ jsx(
+            QuarterGrid,
+            {
+              navigationYear,
+              timeZone: state.timeZone,
+              onQuarterSelect: handleQuarterSelect,
+              currentQuarter,
+              currentYear,
+              selectedQuarter,
+              selectedYear,
+              minDate,
+              maxDate,
+              formatQuarterLabel,
+              yearFormatter,
+              focusOnMount: shouldAutoFocus
+            }
+          );
+        case "years":
+          return /* @__PURE__ */ jsx(
+            YearGrid,
+            {
+              decadeStart,
+              onYearSelect: handleYearSelect,
+              currentYear,
+              selectedYear,
+              minDate,
+              maxDate,
+              yearFormatter,
+              focusOnMount: shouldAutoFocus
+            }
+          );
+        default:
+          return /* @__PURE__ */ jsxs(StyledGridContent, { children: [
+            /* @__PURE__ */ jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsx(Grid, { state }) }),
+            visibleDuration.months === 2 && /* @__PURE__ */ jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsx(Grid, { state, offset: { months: 1 } }) })
+          ] });
+      }
+    };
     return /* @__PURE__ */ jsxs(StyledCalendarBody, { ...calendarProps, ref: forwardRef, children: [
-      /* @__PURE__ */ jsx(PredefinedRanges, {}),
+      viewMode === "days" && /* @__PURE__ */ jsx(PredefinedRanges, {}),
       /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
         /* @__PURE__ */ jsx(
           Header,
@@ -529,12 +1729,19 @@ const SharedContent = React.forwardRef(
               ...nextButtonProps,
               "aria-label": nextAriaLabel
             },
-            visibleMonths: visibleDuration.months
+            visibleMonths: visibleDuration.months,
+            yearFormatter,
+            onPrevOverride: handlePrevOverride,
+            onNextOverride: handleNextOverride,
+            isPrevDisabled,
+            isNextDisabled,
+            onZoomOut: navigation === true ? handleZoomOut : void 0
           }
         ),
-        /* @__PURE__ */ jsxs(StyledGridContent, { children: [
-          /* @__PURE__ */ jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsx(Grid, { state }) }),
-          visibleDuration.months === 2 && /* @__PURE__ */ jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsx(Grid, { state, offset: { months: 1 } }) })
+        renderGrid(),
+        showGoToCurrent && /* @__PURE__ */ jsxs(StyledGoToCurrent, { onPress: handleGoToCurrent, children: [
+          /* @__PURE__ */ jsx(IconClock, { "aria-hidden": "true" }),
+          goToCurrentLabel
         ] })
       ] })
     ] });
@@ -547,15 +1754,31 @@ const DatePickerContent = () => {
     visibleDuration,
     minDate,
     maxDate,
-    onCalendarDateClick
+    onCalendarDateClick,
+    period
   } = useCalendarContext();
+  const handleChange = useCallback(
+    (date) => {
+      if (period === "week") {
+        const weekStart = startOfWeek(date, locale);
+        const weekEnd = weekStart.add({ days: 6 });
+        if (minDate != null && weekStart.compare(minDate) < 0 || maxDate != null && weekEnd.compare(maxDate) > 0) {
+          return;
+        }
+        onCalendarDateClick(weekStart);
+      } else {
+        onCalendarDateClick(date);
+      }
+    },
+    [period, locale, minDate, maxDate, onCalendarDateClick]
+  );
   const state = useCalendarState({
     value: calendarValue,
     visibleDuration,
     minValue: minDate,
     maxValue: maxDate,
     autoFocus: true,
-    onChange: onCalendarDateClick,
+    onChange: handleChange,
     locale,
     createCalendar
   });
@@ -652,44 +1875,6 @@ const Content = React.forwardRef(
   }
 );
 
-const StyledValue = styled(Primitive.span, {});
-
-const DEFAULT_FORMAT = {
-  day: "2-digit",
-  month: "short",
-  year: "numeric"
-};
-function formatDate(date, formatter, timeZone) {
-  return formatter.format(date.toDate(timeZone));
-}
-function formatValue(value, formatter, timeZone) {
-  if (value == null || value === void 0) {
-    return void 0;
-  }
-  if ("start" in value) {
-    if (value.start == null || value.end == null) {
-      return void 0;
-    }
-    return "".concat(formatDate(value.start, formatter, timeZone), " - ").concat(formatDate(
-      value.end,
-      formatter,
-      timeZone
-    ));
-  }
-  return formatDate(value, formatter, timeZone);
-}
-const Value = React.forwardRef(({ format = DEFAULT_FORMAT, ...restProps }, forwardRef) => {
-  const { value } = useCalendarContext();
-  const timeZone = useMemo(getLocalTimeZone, [format]);
-  const formatWithTimeZone = useMemo(
-    () => ({ ...format, timeZone }),
-    [format, timeZone]
-  );
-  const dateFormatter = useDateFormatter(formatWithTimeZone);
-  const valueToDisplay = formatValue(value, dateFormatter, timeZone);
-  return /* @__PURE__ */ jsx(StyledValue, { ref: forwardRef, ...restProps, children: valueToDisplay });
-});
-
 const ClearButton = React.forwardRef(({ onClear, children, ...restProps }, forwardRef) => {
   const { value, setValue } = useCalendarContext();
   const onClearHandler = () => {
@@ -780,6 +1965,11 @@ const Calendar = React.forwardRef(
     "aria-disabled": ariaDisabled,
     children,
     predefinedValues,
+    navigation,
+    period,
+    formatQuarterLabel,
+    formatSwitchViewLabel,
+    goToCurrentLabel,
     ...props
   }, forwardRef) => {
     const providerProps = {
@@ -796,7 +1986,12 @@ const Calendar = React.forwardRef(
       onOpen,
       disabled,
       ariaDisabled,
-      predefinedValues
+      predefinedValues,
+      navigation,
+      period,
+      formatQuarterLabel,
+      formatSwitchViewLabel,
+      goToCurrentLabel
     };
     const validatedLocale = getValidLocale(locale);
     return /* @__PURE__ */ jsx(I18nProvider, { locale: validatedLocale, children: /* @__PURE__ */ jsx(CalendarProvider, { ...providerProps, children: /* @__PURE__ */ jsx(Root, { ...props, ref: forwardRef, children }) }) });
@@ -811,7 +2006,12 @@ const CalendarGrid = ({
   visibleMonths,
   minDate,
   maxDate,
-  predefinedValues
+  predefinedValues,
+  navigation,
+  period,
+  formatQuarterLabel,
+  formatSwitchViewLabel,
+  goToCurrentLabel
 }) => {
   const providerProps = {
     picker,
@@ -821,7 +2021,12 @@ const CalendarGrid = ({
     visibleMonths,
     minDate,
     maxDate,
-    predefinedValues
+    predefinedValues,
+    navigation,
+    period,
+    formatQuarterLabel,
+    formatSwitchViewLabel,
+    goToCurrentLabel
   };
   const validatedLocale = getValidLocale(locale);
   return /* @__PURE__ */ jsx(I18nProvider, { locale: validatedLocale, children: /* @__PURE__ */ jsx(CalendarProvider, { ...providerProps, children: /* @__PURE__ */ jsx(CalendarGridContent, {}) }) });