@kalyx/react 0.4.0 → 1.0.0-rc.1

package/dist/index.cjs

@@ -21,10 +21,23 @@ function useDatePickerContext(componentName) {
   }
   return context;
 }
+function useChangeEffect(value, callback) {
+  const callbackRef = react.useRef(callback);
+  callbackRef.current = callback;
+  const prevRef = react.useRef(value);
+  react.useEffect(() => {
+    if (prevRef.current !== value) {
+      prevRef.current = value;
+      callbackRef.current?.(value);
+    }
+  }, [value]);
+}
 function DatePickerRoot({
   value: controlledValue,
   defaultValue,
   onChange,
+  onOpenChange,
+  onCalendarNavigate,
   disabled = false,
   readOnly = false,
   weekStartsOn = 0,
@@ -49,6 +62,9 @@ function DatePickerRoot({
   const [focusedDate, setFocusedDate] = react.useState(
     currentValue ?? adapter.today(displayTimezone)
   );
+  useChangeEffect(isOpen, onOpenChange);
+  const viewMonthStart = react.useMemo(() => adapter.startOfMonth(viewMonth), [viewMonth, adapter]);
+  useChangeEffect(viewMonthStart, onCalendarNavigate);
   const mergedLabels = react.useMemo(
     () => ({ ...core.DEFAULT_DATEPICKER_LABELS, ...labelsProp }),
     [labelsProp]
@@ -286,10 +302,15 @@ var DatePickerTrigger = react.forwardRef(
     );
   }
 );
-function usePopover({ isOpen, close, referenceRef, placement = "bottom-start" }) {
+function usePopover({
+  isOpen,
+  close,
+  referenceRef,
+  placement = "bottom-start"
+}) {
   const floatingRef = react.useRef(null);
   const previousFocusRef = react.useRef(null);
-  const { refs, floatingStyles } = react$1.useFloating({
+  const { refs, floatingStyles, isPositioned } = react$1.useFloating({
     open: isOpen,
     placement,
     middleware: [react$1.offset(4), react$1.flip(), react$1.shift({ padding: 8 })],
@@ -339,21 +360,28 @@ function usePopover({ isOpen, close, referenceRef, placement = "bottom-start" })
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, close]);
-  const setFloatingRef = (node) => {
-    floatingRef.current = node;
-    refs.setFloating(node);
-  };
-  return { floatingStyles, setFloatingRef };
+  const setFloatingRef = react.useCallback(
+    (node) => {
+      floatingRef.current = node;
+      refs.setFloating(node);
+      if (node && referenceRef.current) {
+        refs.setReference(referenceRef.current);
+      }
+    },
+    [refs, referenceRef]
+  );
+  return { floatingStyles, setFloatingRef, isPositioned };
 }
 function DatePickerPopover({ children, ...props }) {
   const ctx = useDatePickerContext("DatePicker.Popover");
   const calendarId = `${ctx.pickerId}-calendar`;
-  const { floatingStyles, setFloatingRef } = usePopover({
+  const { floatingStyles, setFloatingRef, isPositioned } = usePopover({
     isOpen: ctx.isOpen,
     close: ctx.close,
     referenceRef: ctx.referenceRef
   });
   if (!ctx.isOpen) return null;
+  const { style: userStyle, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -362,8 +390,12 @@ function DatePickerPopover({ children, ...props }) {
       role: "dialog",
       "aria-label": ctx.labels.popoverLabel,
       "aria-modal": "false",
-      style: floatingStyles,
-      ...props,
+      ...rest,
+      style: {
+        ...userStyle,
+        ...floatingStyles,
+        visibility: isPositioned ? void 0 : "hidden"
+      },
       children
     }
   );
@@ -386,7 +418,11 @@ var srOnly = {
   whiteSpace: "nowrap",
   border: 0
 };
-function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
+function DatePickerCalendar({
+  classNames,
+  onTitleClick,
+  ...props
+}) {
   const ctx = useDatePickerContext("DatePicker.Calendar");
   const gridRef = react.useRef(null);
   const [announcement, setAnnouncement] = react.useState("");
@@ -404,9 +440,7 @@ function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
   const title = core.formatMonthYear(year, month, locale);
   react.useEffect(() => {
     if (!ctx.isOpen || !gridRef.current) return;
-    const focusedButton = gridRef.current.querySelector(
-      '[data-focused="true"]'
-    );
+    const focusedButton = gridRef.current.querySelector('[data-focused="true"]');
     focusedButton?.focus({ preventScroll: true });
   }, [focusedDate, ctx.isOpen]);
   const navigateMonth = react.useCallback(
@@ -629,15 +663,7 @@ function DatePickerMonthGrid({
           children: "<"
         }
       ),
-      onTitleClick ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: classNames?.title,
-          onClick: onTitleClick,
-          children: currentYear
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: classNames?.title, children: currentYear }),
+      onTitleClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: classNames?.title, onClick: onTitleClick, children: currentYear }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: classNames?.title, children: currentYear }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -682,11 +708,7 @@ function DatePickerMonthGrid({
     )
   ] });
 }
-function DatePickerYearGrid({
-  classNames,
-  onSelect,
-  ...props
-}) {
+function DatePickerYearGrid({ classNames, onSelect, ...props }) {
   const ctx = useDatePickerContext("DatePicker.YearGrid");
   const { adapter, viewMonth } = ctx;
   const currentYear = adapter.getYear(viewMonth);
@@ -778,6 +800,82 @@ function DatePickerYearGrid({
     )
   ] });
 }
+function DatePickerPresets({ classNames, children, ...props }) {
+  const ctx = useDatePickerContext("DatePicker.Presets");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", "aria-label": ctx.labels.popoverLabel, className: classNames?.root, ...props, children });
+}
+function resolveDatePreset(key, today, adapter) {
+  switch (key) {
+    case "today":
+      return today;
+    case "tomorrow":
+      return adapter.addDays(today, 1);
+    case "yesterday":
+      return adapter.addDays(today, -1);
+    case "startOfMonth":
+      return adapter.startOfMonth(today);
+    case "endOfMonth":
+      return adapter.startOfDay(adapter.endOfMonth(today));
+    case "startOfYear": {
+      const currentMonth = adapter.getMonth(today);
+      return adapter.startOfMonth(adapter.addMonths(today, -currentMonth));
+    }
+  }
+}
+function DatePickerPreset({
+  value: presetKey,
+  date: directDate,
+  children,
+  onClick,
+  ...props
+}) {
+  const ctx = useDatePickerContext("DatePicker.Preset");
+  const handleClick = react.useCallback(
+    (e) => {
+      if (ctx.isDisabled || ctx.isReadOnly) return;
+      let resolved;
+      if (directDate) {
+        resolved = directDate;
+      } else if (presetKey) {
+        resolved = resolveDatePreset(
+          presetKey,
+          ctx.adapter.today(ctx.displayTimezone),
+          ctx.adapter
+        );
+      } else {
+        return;
+      }
+      ctx.selectDate(resolved);
+      onClick?.(e);
+    },
+    [ctx, presetKey, directDate, onClick]
+  );
+  const isActive = (() => {
+    if (!ctx.value) return false;
+    let target;
+    if (directDate) {
+      target = directDate;
+    } else if (presetKey) {
+      target = resolveDatePreset(presetKey, ctx.adapter.today(ctx.displayTimezone), ctx.adapter);
+    } else {
+      return false;
+    }
+    return ctx.adapter.isSameDay(ctx.value, target, ctx.displayTimezone);
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": isActive,
+      "data-active": isActive || void 0,
+      disabled: ctx.isDisabled,
+      onClick: handleClick,
+      ...props,
+      children
+    }
+  );
+}
 
 // src/components/DatePicker/index.ts
 var DatePicker = Object.assign(DatePickerRoot, {
@@ -786,7 +884,9 @@ var DatePicker = Object.assign(DatePickerRoot, {
   Popover: DatePickerPopover,
   Calendar: DatePickerCalendar,
   MonthGrid: DatePickerMonthGrid,
-  YearGrid: DatePickerYearGrid
+  YearGrid: DatePickerYearGrid,
+  Presets: DatePickerPresets,
+  Preset: DatePickerPreset
 });
 var RangePickerContext = react.createContext(null);
 function useRangePickerContext(componentName) {
@@ -808,6 +908,8 @@ function RangePickerRoot({
   value: controlledValue,
   defaultValue,
   onChange,
+  onOpenChange,
+  onCalendarNavigate,
   disabled = false,
   readOnly = false,
   weekStartsOn = 0,
@@ -834,6 +936,9 @@ function RangePickerRoot({
   const [focusedDate, setFocusedDate] = react.useState(
     currentValue.start ?? adapter.today(displayTimezone)
   );
+  useChangeEffect(isOpen, onOpenChange);
+  const viewMonthStart = react.useMemo(() => adapter.startOfMonth(viewMonth), [viewMonth, adapter]);
+  useChangeEffect(viewMonthStart, onCalendarNavigate);
   const mergedLabels = react.useMemo(
     () => ({ ...core.DEFAULT_RANGEPICKER_LABELS, ...labelsProp }),
     [labelsProp]
@@ -1018,12 +1123,13 @@ var RangePickerInput = react.forwardRef(
 function RangePickerPopover({ children, ...props }) {
   const ctx = useRangePickerContext("RangePicker.Popover");
   const calendarId = `${ctx.pickerId}-calendar`;
-  const { floatingStyles, setFloatingRef } = usePopover({
+  const { floatingStyles, setFloatingRef, isPositioned } = usePopover({
     isOpen: ctx.isOpen,
     close: ctx.close,
     referenceRef: ctx.referenceRef
   });
   if (!ctx.isOpen) return null;
+  const { style: userStyle, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1032,8 +1138,12 @@ function RangePickerPopover({ children, ...props }) {
       role: "dialog",
       "aria-label": ctx.labels.popoverLabel,
       "aria-modal": "false",
-      style: floatingStyles,
-      ...props,
+      ...rest,
+      style: {
+        ...userStyle,
+        ...floatingStyles,
+        visibility: isPositioned ? void 0 : "hidden"
+      },
       children
     }
   );
@@ -1056,7 +1166,11 @@ var srOnly2 = {
   whiteSpace: "nowrap",
   border: 0
 };
-function RangePickerCalendar({ classNames, ...props }) {
+function RangePickerCalendar({
+  classNames,
+  selectionMode = "range",
+  ...props
+}) {
   const ctx = useRangePickerContext("RangePicker.Calendar");
   const gridRef = react.useRef(null);
   const [announcement, setAnnouncement] = react.useState("");
@@ -1086,9 +1200,7 @@ function RangePickerCalendar({ classNames, ...props }) {
   const title = core.formatMonthYear(year, month, locale);
   react.useEffect(() => {
     if (!ctx.isOpen || !gridRef.current) return;
-    const focusedButton = gridRef.current.querySelector(
-      '[data-focused="true"]'
-    );
+    const focusedButton = gridRef.current.querySelector('[data-focused="true"]');
     focusedButton?.focus({ preventScroll: true });
   }, [focusedDate, ctx.isOpen]);
   const navigateMonth = react.useCallback(
@@ -1102,21 +1214,39 @@ function RangePickerCalendar({ classNames, ...props }) {
     },
     [adapter, viewMonth, ctx, locale]
   );
+  const commitDay = react.useCallback(
+    (iso) => {
+      if (selectionMode === "week") {
+        const weekStart = adapter.startOfWeek(iso, weekStartsOn);
+        const weekEnd = adapter.startOfDay(adapter.endOfWeek(iso, weekStartsOn));
+        const range = { start: weekStart, end: weekEnd };
+        ctx.setRange(range);
+        ctx.close();
+        setAnnouncement(
+          `${safeFormatFullDate2(weekStart, locale)} \u2013 ${safeFormatFullDate2(weekEnd, locale)}`
+        );
+      } else {
+        ctx.selectDate(iso);
+        setAnnouncement(safeFormatFullDate2(iso, locale));
+      }
+    },
+    [selectionMode, adapter, weekStartsOn, ctx, locale]
+  );
   const handleDayClick = react.useCallback(
     (day) => {
       if (day.isDisabled) return;
-      ctx.selectDate(day.isoString);
-      setAnnouncement(safeFormatFullDate2(day.isoString, locale));
+      commitDay(day.isoString);
     },
-    [ctx, locale]
+    [commitDay]
   );
   const handleDayMouseEnter = react.useCallback(
     (day) => {
+      if (selectionMode === "week") return;
       if (selectingTarget === "end" && value.start && !day.isDisabled) {
         ctx.setHoverDate(day.isoString);
       }
     },
-    [selectingTarget, value.start, ctx]
+    [selectionMode, selectingTarget, value.start, ctx]
   );
   const handleMouseLeave = react.useCallback(() => {
     ctx.setHoverDate(null);
@@ -1153,7 +1283,7 @@ function RangePickerCalendar({ classNames, ...props }) {
         case " ":
           e.preventDefault();
           if (!core.isDateDisabled(focusedDate, disabled, adapter)) {
-            ctx.selectDate(focusedDate);
+            commitDay(focusedDate);
           }
           return;
         case "Escape":
@@ -1168,12 +1298,23 @@ function RangePickerCalendar({ classNames, ...props }) {
         if (!adapter.isSameMonth(newFocused, viewMonth)) {
           ctx.setViewMonth(newFocused);
         }
-        if (selectingTarget === "end" && value.start) {
+        if (selectionMode === "range" && selectingTarget === "end" && value.start) {
           ctx.setHoverDate(newFocused);
         }
       }
     },
-    [adapter, focusedDate, viewMonth, weekStartsOn, disabled, ctx, selectingTarget, value.start]
+    [
+      adapter,
+      focusedDate,
+      viewMonth,
+      weekStartsOn,
+      disabled,
+      ctx,
+      selectionMode,
+      selectingTarget,
+      value.start,
+      commitDay
+    ]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.root, ...props, onMouseLeave: handleMouseLeave, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.header, children: [
@@ -1230,7 +1371,7 @@ function RangePickerCalendar({ classNames, ...props }) {
               day.isDisabled && classNames?.dayDisabled,
               !day.isCurrentMonth && classNames?.dayOutsideMonth
             ].filter(Boolean).join(" ") || void 0;
-            const isSelected = day.isRangeStart || day.isRangeEnd;
+            const isSelected = selectionMode === "week" ? day.isRangeStart || day.isRangeEnd || day.isInRange : day.isRangeStart || day.isRangeEnd;
             return /* @__PURE__ */ jsxRuntime.jsx(
               "td",
               {
@@ -1310,9 +1451,7 @@ function resolvePreset(key, today, adapter) {
     }
     case "thisYear": {
       const currentMonth = new Date(today).getUTCMonth();
-      const yearStart = adapter.startOfMonth(
-        adapter.addMonths(today, -currentMonth)
-      );
+      const yearStart = adapter.startOfMonth(adapter.addMonths(today, -currentMonth));
       return { start: yearStart, end: today };
     }
   }
@@ -1448,7 +1587,19 @@ function TimePickerRoot({
       pickerId,
       labels: mergedLabels
     }),
-    [currentValue, setTime, format, step, withSeconds, displayTimezone, disabled, readOnly, currentTime, pickerId, mergedLabels]
+    [
+      currentValue,
+      setTime,
+      format,
+      step,
+      withSeconds,
+      displayTimezone,
+      disabled,
+      readOnly,
+      currentTime,
+      pickerId,
+      mergedLabels
+    ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(TimePickerContext.Provider, { value: contextValue, children });
 }
@@ -1465,12 +1616,9 @@ var TimePickerInput = react.forwardRef(
       }
       setInputText(null);
     }, [inputText, ctx]);
-    const handleChange = react.useCallback(
-      (e) => {
-        setInputText(e.target.value);
-      },
-      []
-    );
+    const handleChange = react.useCallback((e) => {
+      setInputText(e.target.value);
+    }, []);
     const handleBlur = react.useCallback(
       (e) => {
         commitInput();
@@ -1543,9 +1691,7 @@ function useListboxNavigation({
         onSelect(target);
         cancelAnimationFrame(rafIdRef.current);
         rafIdRef.current = requestAnimationFrame(() => {
-          const next = listRef.current?.querySelector(
-            '[data-selected="true"]'
-          );
+          const next = listRef.current?.querySelector('[data-selected="true"]');
           next?.focus();
         });
       }
@@ -1682,10 +1828,19 @@ function TimePickerAmPmToggle({ classNames, ...props }) {
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "radiogroup", "aria-label": ctx.labels.amPmToggle, className: classNames?.root, ...props, children: [
-    renderButton("AM"),
-    renderButton("PM")
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ctx.labels.amPmToggle,
+      className: classNames?.root,
+      ...props,
+      children: [
+        renderButton("AM"),
+        renderButton("PM")
+      ]
+    }
+  );
 }
 
 // src/components/TimePicker/index.ts
@@ -1702,6 +1857,8 @@ function DateTimePickerRoot({
   value: controlledValue,
   defaultValue,
   onChange,
+  onOpenChange,
+  onCalendarNavigate,
   format = "24h",
   step = 1,
   disabled = false,
@@ -1736,6 +1893,9 @@ function DateTimePickerRoot({
   const [focusedDate, setFocusedDate] = react.useState(
     currentValue ?? adapter.today(displayTimezone)
   );
+  useChangeEffect(isOpen, onOpenChange);
+  const viewMonthStart = react.useMemo(() => adapter.startOfMonth(viewMonth), [viewMonth, adapter]);
+  useChangeEffect(viewMonthStart, onCalendarNavigate);
   const isDisabled = typeof disabled === "boolean" ? disabled : false;
   const disabledRules = react.useMemo(
     () => Array.isArray(disabled) ? disabled : [],
@@ -1850,7 +2010,18 @@ function DateTimePickerRoot({
       pickerId,
       labels: mergedTimeLabels
     }),
-    [currentValue, setTime, format, step, displayTimezone, isDisabled, readOnly, currentTime, pickerId, mergedTimeLabels]
+    [
+      currentValue,
+      setTime,
+      format,
+      step,
+      displayTimezone,
+      isDisabled,
+      readOnly,
+      currentTime,
+      pickerId,
+      mergedTimeLabels
+    ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(DatePickerContext.Provider, { value: dateContext, children: /* @__PURE__ */ jsxRuntime.jsx(TimePickerContext.Provider, { value: timeContext, children }) });
 }
@@ -1925,6 +2096,228 @@ var DateTimePicker = Object.assign(DateTimePickerRoot, {
   MinuteList: TimePickerMinuteList,
   AmPmToggle: TimePickerAmPmToggle
 });
+function MonthPickerRoot(props) {
+  const displayFormat = props.displayFormat ?? "yyyy-MM";
+  return /* @__PURE__ */ jsxRuntime.jsx(DatePickerRoot, { ...props, displayFormat });
+}
+function MonthPickerGrid({ classNames, ...props }) {
+  const ctx = useDatePickerContext("MonthPicker.Grid");
+  const { adapter, viewMonth, locale, value, displayTimezone, labels } = ctx;
+  const currentYear = adapter.getYear(viewMonth);
+  const [valueYear, valueMonthZeroBased] = react.useMemo(() => {
+    if (!value) return [null, null];
+    try {
+      const [y, m] = adapter.format(value, "yyyy-MM", displayTimezone).split("-").map(Number);
+      return [y, m - 1];
+    } catch {
+      return [null, null];
+    }
+  }, [value, adapter, displayTimezone]);
+  const today = adapter.today(displayTimezone);
+  const todayYear = adapter.getYear(today);
+  const todayMonth = adapter.getMonth(today);
+  const navigateYear = react.useCallback(
+    (direction) => {
+      ctx.setViewMonth(adapter.addYears(viewMonth, direction));
+    },
+    [adapter, viewMonth, ctx]
+  );
+  const handleMonthSelect = react.useCallback(
+    (monthIndex) => {
+      const target = new Date(Date.UTC(currentYear, monthIndex, 1)).toISOString();
+      ctx.selectDate(target);
+    },
+    [currentYear, ctx]
+  );
+  const months = Array.from({ length: 12 }, (_, i) => ({
+    index: i,
+    name: core.getMonthName(i, locale),
+    isSelected: valueYear === currentYear && valueMonthZeroBased === i,
+    isCurrent: todayYear === currentYear && todayMonth === i
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.root, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: classNames?.navButton,
+          onClick: () => navigateYear(-1),
+          "aria-label": labels.prevYear,
+          children: "<"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: classNames?.title, children: currentYear }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: classNames?.navButton,
+          onClick: () => navigateYear(1),
+          "aria-label": labels.nextYear,
+          children: ">"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "grid", "aria-label": `${currentYear} months`, className: classNames?.grid, children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "row",
+        className: classNames?.gridRow,
+        style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
+        children: months.slice(rowIndex * 3, rowIndex * 3 + 3).map((m) => {
+          const monthClass = [
+            classNames?.month,
+            m.isSelected && classNames?.monthSelected,
+            m.isCurrent && classNames?.monthCurrent
+          ].filter(Boolean).join(" ") || void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "gridcell",
+              "aria-selected": m.isSelected || void 0,
+              "aria-current": m.isCurrent ? "date" : void 0,
+              "data-selected": m.isSelected || void 0,
+              "data-current": m.isCurrent || void 0,
+              className: monthClass,
+              onClick: () => handleMonthSelect(m.index),
+              children: m.name
+            },
+            m.index
+          );
+        })
+      },
+      rowIndex
+    )) })
+  ] });
+}
+
+// src/components/MonthPicker/index.ts
+var MonthPicker = Object.assign(MonthPickerRoot, {
+  Input: DatePickerInput,
+  Trigger: DatePickerTrigger,
+  Popover: DatePickerPopover,
+  Grid: MonthPickerGrid
+});
+function YearPickerRoot(props) {
+  const displayFormat = props.displayFormat ?? "yyyy";
+  return /* @__PURE__ */ jsxRuntime.jsx(DatePickerRoot, { ...props, displayFormat });
+}
+function YearPickerGrid({ classNames, ...props }) {
+  const ctx = useDatePickerContext("YearPicker.Grid");
+  const { adapter, viewMonth, value, displayTimezone, labels } = ctx;
+  const currentYear = adapter.getYear(viewMonth);
+  const decadeStart = currentYear - currentYear % 12;
+  const valueYear = react.useMemo(() => {
+    if (!value) return null;
+    try {
+      return Number(adapter.format(value, "yyyy", displayTimezone));
+    } catch {
+      return null;
+    }
+  }, [value, adapter, displayTimezone]);
+  const todayYear = adapter.getYear(adapter.today(displayTimezone));
+  const navigateDecade = react.useCallback(
+    (direction) => {
+      ctx.setViewMonth(adapter.addYears(viewMonth, direction * 12));
+    },
+    [adapter, viewMonth, ctx]
+  );
+  const handleYearSelect = react.useCallback(
+    (year) => {
+      const target = new Date(Date.UTC(year, 0, 1)).toISOString();
+      ctx.selectDate(target);
+    },
+    [ctx]
+  );
+  const years = Array.from({ length: 12 }, (_, i) => {
+    const year = decadeStart + i;
+    return {
+      value: year,
+      isSelected: year === valueYear,
+      isCurrent: year === todayYear
+    };
+  });
+  const rangeLabel = `${decadeStart}\u2013${decadeStart + 11}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.root, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: classNames?.navButton,
+          onClick: () => navigateDecade(-1),
+          "aria-label": labels.prevDecade,
+          children: "<"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: classNames?.title, children: rangeLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: classNames?.navButton,
+          onClick: () => navigateDecade(1),
+          "aria-label": labels.nextDecade,
+          children: ">"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "grid", "aria-label": rangeLabel, className: classNames?.grid, children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "row",
+        className: classNames?.gridRow,
+        style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
+        children: years.slice(rowIndex * 3, rowIndex * 3 + 3).map((y) => {
+          const yearClass = [
+            classNames?.year,
+            y.isSelected && classNames?.yearSelected,
+            y.isCurrent && classNames?.yearCurrent
+          ].filter(Boolean).join(" ") || void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "gridcell",
+              "aria-selected": y.isSelected || void 0,
+              "aria-current": y.isCurrent ? "date" : void 0,
+              "data-selected": y.isSelected || void 0,
+              "data-current": y.isCurrent || void 0,
+              className: yearClass,
+              onClick: () => handleYearSelect(y.value),
+              children: y.value
+            },
+            y.value
+          );
+        })
+      },
+      rowIndex
+    )) })
+  ] });
+}
+
+// src/components/YearPicker/index.ts
+var YearPicker = Object.assign(YearPickerRoot, {
+  Input: DatePickerInput,
+  Trigger: DatePickerTrigger,
+  Popover: DatePickerPopover,
+  Grid: YearPickerGrid
+});
+function WeekPickerRoot(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(RangePickerRoot, { ...props });
+}
+function WeekPickerCalendar(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(RangePickerCalendar, { ...props, selectionMode: "week" });
+}
+
+// src/components/WeekPicker/index.ts
+var WeekPicker = Object.assign(WeekPickerRoot, {
+  Input: RangePickerInput,
+  Popover: RangePickerPopover,
+  Calendar: WeekPickerCalendar
+});
 function useDatePicker(options = {}) {
   const {
     value: controlledValue,
@@ -2164,14 +2557,8 @@ function useTimePicker(options = {}) {
     },
     [format, period, setTime]
   );
-  const setMinute = react.useCallback(
-    (minute) => setTime({ minutes: minute }),
-    [setTime]
-  );
-  const setSecond = react.useCallback(
-    (second) => setTime({ seconds: second }),
-    [setTime]
-  );
+  const setMinute = react.useCallback((minute) => setTime({ minutes: minute }), [setTime]);
+  const setSecond = react.useCallback((second) => setTime({ seconds: second }), [setTime]);
   const setPeriod = react.useCallback(
     (newPeriod) => {
       if (format !== "12h") return;
@@ -2203,8 +2590,11 @@ Object.defineProperty(exports, "DateFnsAdapter", {
 });
 exports.DatePicker = DatePicker;
 exports.DateTimePicker = DateTimePicker;
+exports.MonthPicker = MonthPicker;
 exports.RangePicker = RangePicker;
 exports.TimePicker = TimePicker;
+exports.WeekPicker = WeekPicker;
+exports.YearPicker = YearPicker;
 exports.useDatePicker = useDatePicker;
 exports.useRangePicker = useRangePicker;
 exports.useTimePicker = useTimePicker;