@kalyx/react 0.3.0 → 1.0.0-rc.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, forwardRef, useState, useCallback, useContext, useId, useRef, useMemo, useEffect } from 'react';
-import { parseInputValue, formatTimeString, parseTimeString, getTime, DateFnsAdapter, DEFAULT_DATEPICKER_LABELS, getMonthName, getWeekdayNames, getCalendarDays, formatMonthYear, isDateDisabled, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, setTime, to12Hour, to24Hour, generateMinutes, generateHours, formatFullDate } from '@kalyx/core';
+import { parseInputValue, formatTimeString, parseTimeString, getTimeInTimezone, getTime, DateFnsAdapter, DEFAULT_DATEPICKER_LABELS, civilMidnightFromUtcDay, getMonthName, getWeekdayNames, getCalendarDays, formatMonthYear, isDateDisabled, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, setTimeInTimezone, setTime, to12Hour, to24Hour, generateMinutes, generateHours, formatFullDate } from '@kalyx/core';
 export { DateFnsAdapter } from '@kalyx/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useFloating, autoUpdate, offset, flip, shift } from '@floating-ui/react';
@@ -20,15 +20,29 @@ function useDatePickerContext(componentName) {
   }
   return context;
 }
+function useChangeEffect(value, callback) {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  const prevRef = useRef(value);
+  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,
   displayFormat = "yyyy-MM-dd",
   locale = "en-US",
+  displayTimezone,
   adapter = DateFnsAdapter,
   labels: labelsProp,
   children
@@ -42,11 +56,14 @@ function DatePickerRoot({
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
   const [isOpen, setIsOpen] = useState(false);
   const [viewMonth, setViewMonth] = useState(
-    currentValue ?? adapter.today()
+    currentValue ?? adapter.today(displayTimezone)
   );
   const [focusedDate, setFocusedDate] = useState(
-    currentValue ?? adapter.today()
+    currentValue ?? adapter.today(displayTimezone)
   );
+  useChangeEffect(isOpen, onOpenChange);
+  const viewMonthStart = useMemo(() => adapter.startOfMonth(viewMonth), [viewMonth, adapter]);
+  useChangeEffect(viewMonthStart, onCalendarNavigate);
   const mergedLabels = useMemo(
     () => ({ ...DEFAULT_DATEPICKER_LABELS, ...labelsProp }),
     [labelsProp]
@@ -59,21 +76,22 @@ function DatePickerRoot({
   const selectDate = useCallback(
     (iso) => {
       if (isDisabled || readOnly) return;
+      const normalized = iso && displayTimezone ? civilMidnightFromUtcDay(iso, displayTimezone) : iso;
       if (!isControlled) {
-        setUncontrolledValue(iso);
+        setUncontrolledValue(normalized);
       }
-      onChange?.(iso);
+      onChange?.(normalized);
       setIsOpen(false);
     },
-    [isControlled, isDisabled, readOnly, onChange]
+    [isControlled, isDisabled, readOnly, onChange, displayTimezone]
   );
   const open = useCallback(() => {
     if (isDisabled || readOnly) return;
     setIsOpen(true);
-    const target = currentValue ?? adapter.today();
+    const target = currentValue ?? adapter.today(displayTimezone);
     setViewMonth(target);
     setFocusedDate(target);
-  }, [isDisabled, readOnly, currentValue, adapter]);
+  }, [isDisabled, readOnly, currentValue, adapter, displayTimezone]);
   const close = useCallback(() => {
     setIsOpen(false);
   }, []);
@@ -102,6 +120,7 @@ function DatePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
       pickerId,
@@ -121,6 +140,7 @@ function DatePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       readOnly,
       pickerId,
@@ -137,7 +157,7 @@ var DatePickerInput = forwardRef(
     let formattedValue = "";
     if (ctx.value) {
       try {
-        formattedValue = ctx.adapter.format(ctx.value, displayFormat);
+        formattedValue = ctx.adapter.format(ctx.value, displayFormat, ctx.displayTimezone);
       } catch {
         formattedValue = ctx.value;
       }
@@ -385,13 +405,14 @@ function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
   const ctx = useDatePickerContext("DatePicker.Calendar");
   const gridRef = useRef(null);
   const [announcement, setAnnouncement] = useState("");
-  const { adapter, viewMonth, focusedDate, weekStartsOn, disabled, locale } = ctx;
+  const { adapter, viewMonth, focusedDate, weekStartsOn, disabled, locale, displayTimezone } = ctx;
   const weekdays = getWeekdayNames(locale, weekStartsOn);
   const weeks = getCalendarDays(viewMonth, adapter, {
     weekStartsOn,
     selected: ctx.value,
     focusedDate,
-    disabled
+    disabled,
+    timezone: displayTimezone
   });
   const year = adapter.getYear(viewMonth);
   const month = adapter.getMonth(viewMonth);
@@ -772,6 +793,95 @@ function DatePickerYearGrid({
     )
   ] });
 }
+function DatePickerPresets({ classNames, children, ...props }) {
+  const ctx = useDatePickerContext("DatePicker.Presets");
+  return /* @__PURE__ */ 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 = 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__ */ 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, {
@@ -780,7 +890,9 @@ var DatePicker = Object.assign(DatePickerRoot, {
   Popover: DatePickerPopover,
   Calendar: DatePickerCalendar,
   MonthGrid: DatePickerMonthGrid,
-  YearGrid: DatePickerYearGrid
+  YearGrid: DatePickerYearGrid,
+  Presets: DatePickerPresets,
+  Preset: DatePickerPreset
 });
 var RangePickerContext = createContext(null);
 function useRangePickerContext(componentName) {
@@ -802,11 +914,14 @@ function RangePickerRoot({
   value: controlledValue,
   defaultValue,
   onChange,
+  onOpenChange,
+  onCalendarNavigate,
   disabled = false,
   readOnly = false,
   weekStartsOn = 0,
   displayFormat = "yyyy-MM-dd",
   locale = "en-US",
+  displayTimezone,
   adapter = DateFnsAdapter,
   labels: labelsProp,
   children
@@ -822,11 +937,14 @@ function RangePickerRoot({
   const [selectingTarget, setSelectingTarget] = useState("start");
   const [hoverDate, setHoverDate] = useState(null);
   const [viewMonth, setViewMonth] = useState(
-    currentValue.start ?? adapter.today()
+    currentValue.start ?? adapter.today(displayTimezone)
   );
   const [focusedDate, setFocusedDate] = useState(
-    currentValue.start ?? adapter.today()
+    currentValue.start ?? adapter.today(displayTimezone)
   );
+  useChangeEffect(isOpen, onOpenChange);
+  const viewMonthStart = useMemo(() => adapter.startOfMonth(viewMonth), [viewMonth, adapter]);
+  useChangeEffect(viewMonthStart, onCalendarNavigate);
   const mergedLabels = useMemo(
     () => ({ ...DEFAULT_RANGEPICKER_LABELS, ...labelsProp }),
     [labelsProp]
@@ -849,23 +967,24 @@ function RangePickerRoot({
   const selectDate = useCallback(
     (iso) => {
       if (isDisabled || readOnly) return;
+      const normalized = displayTimezone ? civilMidnightFromUtcDay(iso, displayTimezone) : iso;
       if (selectingTarget === "start") {
-        const newRange = { start: iso, end: null };
+        const newRange = { start: normalized, end: null };
         setRange(newRange);
         setSelectingTarget("end");
         setHoverDate(null);
       } else {
         const start = currentValue.start;
         if (!start) {
-          setRange({ start: iso, end: null });
+          setRange({ start: normalized, end: null });
           setSelectingTarget("end");
           return;
         }
         let newRange;
-        if (adapter.isBefore(iso, start)) {
-          newRange = { start: iso, end: start };
+        if (adapter.isBefore(normalized, start)) {
+          newRange = { start: normalized, end: start };
         } else {
-          newRange = { start, end: iso };
+          newRange = { start, end: normalized };
         }
         setRange(newRange);
         setSelectingTarget("start");
@@ -873,18 +992,18 @@ function RangePickerRoot({
         setIsOpen(false);
       }
     },
-    [isDisabled, readOnly, selectingTarget, currentValue.start, adapter, setRange]
+    [isDisabled, readOnly, selectingTarget, currentValue.start, adapter, setRange, displayTimezone]
   );
   const open = useCallback(() => {
     if (isDisabled || readOnly) return;
     setIsOpen(true);
-    const target = currentValue.start ?? adapter.today();
+    const target = currentValue.start ?? adapter.today(displayTimezone);
     setViewMonth(target);
     setFocusedDate(target);
     if (currentValue.start && currentValue.end) {
       setSelectingTarget("start");
     }
-  }, [isDisabled, readOnly, currentValue, adapter]);
+  }, [isDisabled, readOnly, currentValue, adapter, displayTimezone]);
   const close = useCallback(() => {
     setIsOpen(false);
     setHoverDate(null);
@@ -915,6 +1034,7 @@ function RangePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
       pickerId,
@@ -937,6 +1057,7 @@ function RangePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       readOnly,
       pickerId,
@@ -953,7 +1074,7 @@ var RangePickerInput = forwardRef(
     let displayValue = "";
     if (value) {
       try {
-        displayValue = ctx.adapter.format(value, displayFormat);
+        displayValue = ctx.adapter.format(value, displayFormat, ctx.displayTimezone);
       } catch {
         displayValue = value;
       }
@@ -1046,7 +1167,11 @@ var srOnly2 = {
   whiteSpace: "nowrap",
   border: 0
 };
-function RangePickerCalendar({ classNames, ...props }) {
+function RangePickerCalendar({
+  classNames,
+  selectionMode = "range",
+  ...props
+}) {
   const ctx = useRangePickerContext("RangePicker.Calendar");
   const gridRef = useRef(null);
   const [announcement, setAnnouncement] = useState("");
@@ -1058,7 +1183,8 @@ function RangePickerCalendar({ classNames, ...props }) {
     disabled,
     value,
     hoverDate,
-    selectingTarget
+    selectingTarget,
+    displayTimezone
   } = ctx;
   const { locale } = ctx;
   const weekdays = getWeekdayNames(locale, weekStartsOn);
@@ -1067,7 +1193,8 @@ function RangePickerCalendar({ classNames, ...props }) {
     focusedDate,
     disabled,
     range: value,
-    rangeHover: hoverDate
+    rangeHover: hoverDate,
+    timezone: displayTimezone
   });
   const year = adapter.getYear(viewMonth);
   const month = adapter.getMonth(viewMonth);
@@ -1090,21 +1217,39 @@ function RangePickerCalendar({ classNames, ...props }) {
     },
     [adapter, viewMonth, ctx, locale]
   );
+  const commitDay = 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 = useCallback(
     (day) => {
       if (day.isDisabled) return;
-      ctx.selectDate(day.isoString);
-      setAnnouncement(safeFormatFullDate2(day.isoString, locale));
+      commitDay(day.isoString);
     },
-    [ctx, locale]
+    [commitDay]
   );
   const handleDayMouseEnter = 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 = useCallback(() => {
     ctx.setHoverDate(null);
@@ -1141,7 +1286,7 @@ function RangePickerCalendar({ classNames, ...props }) {
         case " ":
           e.preventDefault();
           if (!isDateDisabled(focusedDate, disabled, adapter)) {
-            ctx.selectDate(focusedDate);
+            commitDay(focusedDate);
           }
           return;
         case "Escape":
@@ -1156,12 +1301,12 @@ 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__ */ jsxs("div", { className: classNames?.root, ...props, onMouseLeave: handleMouseLeave, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames?.header, children: [
@@ -1218,7 +1363,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__ */ jsx(
               "td",
               {
@@ -1390,6 +1535,7 @@ function TimePickerRoot({
   format = "24h",
   step = 1,
   withSeconds = false,
+  displayTimezone,
   disabled = false,
   readOnly = false,
   labels: labelsProp,
@@ -1406,17 +1552,20 @@ function TimePickerRoot({
   );
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
   const baseIso = currentValue ?? getDefaultIso();
-  const currentTime = useMemo(() => getTime(baseIso), [baseIso]);
+  const currentTime = useMemo(
+    () => displayTimezone ? getTimeInTimezone(baseIso, displayTimezone) : getTime(baseIso),
+    [baseIso, displayTimezone]
+  );
   const setTime$1 = useCallback(
     (partial) => {
       if (disabled || readOnly) return;
-      const newIso = setTime(baseIso, partial);
+      const newIso = displayTimezone ? setTimeInTimezone(baseIso, partial, displayTimezone) : setTime(baseIso, partial);
       if (!isControlled) {
         setUncontrolledValue(newIso);
       }
       onChange?.(newIso);
     },
-    [disabled, readOnly, baseIso, isControlled, onChange]
+    [disabled, readOnly, baseIso, isControlled, onChange, displayTimezone]
   );
   const contextValue = useMemo(
     () => ({
@@ -1425,13 +1574,14 @@ function TimePickerRoot({
       format,
       step,
       withSeconds,
+      displayTimezone,
       isDisabled: disabled,
       isReadOnly: readOnly,
       currentTime,
       pickerId,
       labels: mergedLabels
     }),
-    [currentValue, setTime$1, format, step, withSeconds, disabled, readOnly, currentTime, pickerId, mergedLabels]
+    [currentValue, setTime$1, format, step, withSeconds, displayTimezone, disabled, readOnly, currentTime, pickerId, mergedLabels]
   );
   return /* @__PURE__ */ jsx(TimePickerContext.Provider, { value: contextValue, children });
 }
@@ -1685,6 +1835,8 @@ function DateTimePickerRoot({
   value: controlledValue,
   defaultValue,
   onChange,
+  onOpenChange,
+  onCalendarNavigate,
   format = "24h",
   step = 1,
   disabled = false,
@@ -1692,6 +1844,7 @@ function DateTimePickerRoot({
   weekStartsOn = 0,
   displayFormat = "yyyy-MM-dd HH:mm",
   locale = "en-US",
+  displayTimezone,
   adapter = DateFnsAdapter,
   labels: labelsProp,
   children
@@ -1713,18 +1866,24 @@ function DateTimePickerRoot({
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
   const [isOpen, setIsOpen] = useState(false);
   const [viewMonth, setViewMonth] = useState(
-    currentValue ?? adapter.today()
+    currentValue ?? adapter.today(displayTimezone)
   );
   const [focusedDate, setFocusedDate] = useState(
-    currentValue ?? adapter.today()
+    currentValue ?? adapter.today(displayTimezone)
   );
+  useChangeEffect(isOpen, onOpenChange);
+  const viewMonthStart = useMemo(() => adapter.startOfMonth(viewMonth), [viewMonth, adapter]);
+  useChangeEffect(viewMonthStart, onCalendarNavigate);
   const isDisabled = typeof disabled === "boolean" ? disabled : false;
   const disabledRules = useMemo(
     () => Array.isArray(disabled) ? disabled : [],
     [disabled]
   );
   const baseIso = currentValue ?? getDefaultIso2();
-  const currentTime = useMemo(() => getTime(baseIso), [baseIso]);
+  const currentTime = useMemo(
+    () => displayTimezone ? getTimeInTimezone(baseIso, displayTimezone) : getTime(baseIso),
+    [baseIso, displayTimezone]
+  );
   const updateValue = useCallback(
     (next) => {
       if (isDisabled || readOnly) return;
@@ -1741,27 +1900,28 @@ function DateTimePickerRoot({
         updateValue(null);
         return;
       }
-      const time = currentValue ? getTime(currentValue) : currentTime;
-      const merged = setTime(newDateIso, time);
+      const normalizedDate = displayTimezone ? civilMidnightFromUtcDay(newDateIso, displayTimezone) : newDateIso;
+      const time = currentValue ? displayTimezone ? getTimeInTimezone(currentValue, displayTimezone) : getTime(currentValue) : currentTime;
+      const merged = displayTimezone ? setTimeInTimezone(normalizedDate, time, displayTimezone) : setTime(normalizedDate, time);
       updateValue(merged);
     },
-    [currentValue, currentTime, updateValue]
+    [currentValue, currentTime, updateValue, displayTimezone]
   );
   const setTime$1 = useCallback(
     (partial) => {
       const base = currentValue ?? getDefaultIso2();
-      const merged = setTime(base, partial);
+      const merged = displayTimezone ? setTimeInTimezone(base, partial, displayTimezone) : setTime(base, partial);
       updateValue(merged);
     },
-    [currentValue, updateValue]
+    [currentValue, updateValue, displayTimezone]
   );
   const open = useCallback(() => {
     if (isDisabled || readOnly) return;
     setIsOpen(true);
-    const target = currentValue ?? adapter.today();
+    const target = currentValue ?? adapter.today(displayTimezone);
     setViewMonth(target);
     setFocusedDate(target);
-  }, [isDisabled, readOnly, currentValue, adapter]);
+  }, [isDisabled, readOnly, currentValue, adapter, displayTimezone]);
   const close = useCallback(() => {
     setIsOpen(false);
   }, []);
@@ -1787,6 +1947,7 @@ function DateTimePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
       pickerId,
@@ -1806,6 +1967,7 @@ function DateTimePickerRoot({
       weekStartsOn,
       displayFormat,
       locale,
+      displayTimezone,
       isDisabled,
       readOnly,
       pickerId,
@@ -1819,13 +1981,14 @@ function DateTimePickerRoot({
       format,
       step,
       withSeconds: false,
+      displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
       currentTime,
       pickerId,
       labels: mergedTimeLabels
     }),
-    [currentValue, setTime$1, format, step, isDisabled, readOnly, currentTime, pickerId, mergedTimeLabels]
+    [currentValue, setTime$1, format, step, displayTimezone, isDisabled, readOnly, currentTime, pickerId, mergedTimeLabels]
   );
   return /* @__PURE__ */ jsx(DatePickerContext.Provider, { value: dateContext, children: /* @__PURE__ */ jsx(TimePickerContext.Provider, { value: timeContext, children }) });
 }
@@ -1835,7 +1998,9 @@ var DateTimePickerInput = forwardRef(
     let displayValue = "";
     if (ctx.value) {
       try {
-        displayValue = `${ctx.adapter.format(ctx.value, "yyyy-MM-dd")} ${formatTimeString(getTime(ctx.value))}`;
+        const datePart = ctx.adapter.format(ctx.value, "yyyy-MM-dd", ctx.displayTimezone);
+        const time = ctx.displayTimezone ? getTimeInTimezone(ctx.value, ctx.displayTimezone) : getTime(ctx.value);
+        displayValue = `${datePart} ${formatTimeString(time)}`;
       } catch {
         displayValue = ctx.value;
       }
@@ -1898,6 +2063,249 @@ var DateTimePicker = Object.assign(DateTimePickerRoot, {
   MinuteList: TimePickerMinuteList,
   AmPmToggle: TimePickerAmPmToggle
 });
+function MonthPickerRoot(props) {
+  const displayFormat = props.displayFormat ?? "yyyy-MM";
+  return /* @__PURE__ */ 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] = 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 = useCallback(
+    (direction) => {
+      ctx.setViewMonth(adapter.addYears(viewMonth, direction));
+    },
+    [adapter, viewMonth, ctx]
+  );
+  const handleMonthSelect = 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: getMonthName(i, locale),
+    isSelected: valueYear === currentYear && valueMonthZeroBased === i,
+    isCurrent: todayYear === currentYear && todayMonth === i
+  }));
+  return /* @__PURE__ */ jsxs("div", { className: classNames?.root, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: classNames?.header, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: classNames?.navButton,
+          onClick: () => navigateYear(-1),
+          "aria-label": labels.prevYear,
+          children: "<"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: classNames?.title, children: currentYear }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: classNames?.navButton,
+          onClick: () => navigateYear(1),
+          "aria-label": labels.nextYear,
+          children: ">"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "grid",
+        "aria-label": `${currentYear} months`,
+        className: classNames?.grid,
+        children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ 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__ */ 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__ */ 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 = 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 = useCallback(
+    (direction) => {
+      ctx.setViewMonth(adapter.addYears(viewMonth, direction * 12));
+    },
+    [adapter, viewMonth, ctx]
+  );
+  const handleYearSelect = 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__ */ jsxs("div", { className: classNames?.root, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: classNames?.header, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: classNames?.navButton,
+          onClick: () => navigateDecade(-1),
+          "aria-label": labels.prevDecade,
+          children: "<"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: classNames?.title, children: rangeLabel }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: classNames?.navButton,
+          onClick: () => navigateDecade(1),
+          "aria-label": labels.nextDecade,
+          children: ">"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "grid",
+        "aria-label": rangeLabel,
+        className: classNames?.grid,
+        children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ 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__ */ 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__ */ jsx(RangePickerRoot, { ...props });
+}
+function WeekPickerCalendar(props) {
+  return /* @__PURE__ */ 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,
@@ -1905,7 +2313,8 @@ function useDatePicker(options = {}) {
     onChange,
     disabled = [],
     weekStartsOn = 0,
-    adapter = DateFnsAdapter
+    adapter = DateFnsAdapter,
+    displayTimezone
   } = options;
   const pickerId = useId();
   const isControlled = useRef(controlledValue !== void 0).current;
@@ -1914,24 +2323,29 @@ function useDatePicker(options = {}) {
   );
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
   const [isOpen, setIsOpen] = useState(false);
-  const [viewMonth, setViewMonth] = useState(currentValue ?? adapter.today());
-  const [focusedDate, setFocusedDate] = useState(currentValue ?? adapter.today());
+  const [viewMonth, setViewMonth] = useState(
+    currentValue ?? adapter.today(displayTimezone)
+  );
+  const [focusedDate, setFocusedDate] = useState(
+    currentValue ?? adapter.today(displayTimezone)
+  );
   const selectDate = useCallback(
     (iso) => {
+      const normalized = iso && displayTimezone ? civilMidnightFromUtcDay(iso, displayTimezone) : iso;
       if (!isControlled) {
-        setUncontrolledValue(iso);
+        setUncontrolledValue(normalized);
       }
-      onChange?.(iso);
+      onChange?.(normalized);
       setIsOpen(false);
     },
-    [isControlled, onChange]
+    [isControlled, onChange, displayTimezone]
   );
   const open = useCallback(() => {
     setIsOpen(true);
-    const target = currentValue ?? adapter.today();
+    const target = currentValue ?? adapter.today(displayTimezone);
     setViewMonth(target);
     setFocusedDate(target);
-  }, [currentValue, adapter]);
+  }, [currentValue, adapter, displayTimezone]);
   const close = useCallback(() => {
     setIsOpen(false);
   }, []);
@@ -1953,7 +2367,8 @@ function useDatePicker(options = {}) {
     weekStartsOn,
     selected: currentValue,
     focusedDate,
-    disabled
+    disabled,
+    timezone: displayTimezone
   });
   return {
     value: currentValue,
@@ -1981,7 +2396,8 @@ function useRangePicker(options = {}) {
     onChange,
     disabled = [],
     weekStartsOn = 0,
-    adapter = DateFnsAdapter
+    adapter = DateFnsAdapter,
+    displayTimezone
   } = options;
   const pickerId = useId();
   const isControlled = useRef(controlledValue !== void 0).current;
@@ -1993,10 +2409,10 @@ function useRangePicker(options = {}) {
   const [selectingTarget, setSelectingTarget] = useState("start");
   const [hoverDate, setHoverDate] = useState(null);
   const [viewMonth, setViewMonth] = useState(
-    currentValue.start ?? adapter.today()
+    currentValue.start ?? adapter.today(displayTimezone)
   );
   const [focusedDate, setFocusedDate] = useState(
-    currentValue.start ?? adapter.today()
+    currentValue.start ?? adapter.today(displayTimezone)
   );
   const setRange = useCallback(
     (range) => {
@@ -2009,35 +2425,36 @@ function useRangePicker(options = {}) {
   );
   const selectDate = useCallback(
     (iso) => {
+      const normalized = displayTimezone ? civilMidnightFromUtcDay(iso, displayTimezone) : iso;
       if (selectingTarget === "start") {
-        setRange({ start: iso, end: null });
+        setRange({ start: normalized, end: null });
         setSelectingTarget("end");
         setHoverDate(null);
       } else {
         const start = currentValue.start;
         if (!start) {
-          setRange({ start: iso, end: null });
+          setRange({ start: normalized, end: null });
           setSelectingTarget("end");
           return;
         }
-        const newRange = adapter.isBefore(iso, start) ? { start: iso, end: start } : { start, end: iso };
+        const newRange = adapter.isBefore(normalized, start) ? { start: normalized, end: start } : { start, end: normalized };
         setRange(newRange);
         setSelectingTarget("start");
         setHoverDate(null);
         setIsOpen(false);
       }
     },
-    [selectingTarget, currentValue.start, adapter, setRange]
+    [selectingTarget, currentValue.start, adapter, setRange, displayTimezone]
   );
   const open = useCallback(() => {
     setIsOpen(true);
-    const target = currentValue.start ?? adapter.today();
+    const target = currentValue.start ?? adapter.today(displayTimezone);
     setViewMonth(target);
     setFocusedDate(target);
     if (currentValue.start && currentValue.end) {
       setSelectingTarget("start");
     }
-  }, [currentValue, adapter]);
+  }, [currentValue, adapter, displayTimezone]);
   const close = useCallback(() => {
     setIsOpen(false);
     setHoverDate(null);
@@ -2061,7 +2478,8 @@ function useRangePicker(options = {}) {
     focusedDate,
     disabled,
     range: currentValue,
-    rangeHover: hoverDate
+    rangeHover: hoverDate,
+    timezone: displayTimezone
   });
   return {
     value: currentValue,
@@ -2094,7 +2512,8 @@ function useTimePicker(options = {}) {
     defaultValue,
     onChange,
     format = "24h",
-    step = 1
+    step = 1,
+    displayTimezone
   } = options;
   const pickerId = useId();
   const isControlled = useRef(controlledValue !== void 0).current;
@@ -2103,16 +2522,19 @@ function useTimePicker(options = {}) {
   );
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
   const baseIso = currentValue ?? getDefaultIso3();
-  const currentTime = useMemo(() => getTime(baseIso), [baseIso]);
+  const currentTime = useMemo(
+    () => displayTimezone ? getTimeInTimezone(baseIso, displayTimezone) : getTime(baseIso),
+    [baseIso, displayTimezone]
+  );
   const setTime$1 = useCallback(
     (partial) => {
-      const newIso = setTime(baseIso, partial);
+      const newIso = displayTimezone ? setTimeInTimezone(baseIso, partial, displayTimezone) : setTime(baseIso, partial);
       if (!isControlled) {
         setUncontrolledValue(newIso);
       }
       onChange?.(newIso);
     },
-    [baseIso, isControlled, onChange]
+    [baseIso, isControlled, onChange, displayTimezone]
   );
   const period = format === "12h" ? to12Hour(currentTime.hours).period : null;
   const displayHour = format === "12h" ? to12Hour(currentTime.hours).hours12 : currentTime.hours;
@@ -2156,6 +2578,6 @@ function useTimePicker(options = {}) {
   };
 }
 
-export { DatePicker, DateTimePicker, RangePicker, TimePicker, useDatePicker, useRangePicker, useTimePicker };
+export { DatePicker, DateTimePicker, MonthPicker, RangePicker, TimePicker, WeekPicker, YearPicker, useDatePicker, useRangePicker, useTimePicker };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map