@kalyx/react 1.0.0-rc.1 → 1.0.0-rc.11

package/dist/index.js

@@ -1,8 +1,9 @@
-import { createContext, forwardRef, useState, useCallback, useContext, useId, useRef, useMemo, useEffect } from 'react';
-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';
+"use client";
+import { createContext, forwardRef, useState, useRef, useEffect, useCallback, useContext, useId, useMemo } from 'react';
+import { parseInputValue, formatTimeString, parseTimeString, getTimeInTimezone, getTime, DateFnsAdapter, DEFAULT_DATEPICKER_LABELS, civilMidnightFromUtcDay, getMonthName, getWeekdayNames, getCalendarDays, formatMonthYear, isDateDisabled, getISOWeekNumber, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, setTimeInTimezone, setTime, to12Hour, to24Hour, generateMinutes, generateHours, formatFullDate } from '@kalyx/core';
+export { DEFAULT_DATEPICKER_LABELS, DEFAULT_DATETIMEPICKER_LABELS, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, DateFnsAdapter } from '@kalyx/core';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { offset, flip, shift, useFloating, autoUpdate } from '@floating-ui/react';
 
 // src/components/DatePicker/Root.tsx
 var DatePickerContext = createContext(null);
@@ -56,10 +57,10 @@ function DatePickerRoot({
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
   const [isOpen, setIsOpen] = useState(false);
   const [viewMonth, setViewMonth] = useState(
-    currentValue ?? adapter.today(displayTimezone)
+    () => currentValue ?? adapter.today(displayTimezone)
   );
   const [focusedDate, setFocusedDate] = useState(
-    currentValue ?? adapter.today(displayTimezone)
+    () => currentValue ?? adapter.today(displayTimezone)
   );
   useChangeEffect(isOpen, onOpenChange);
   const viewMonthStart = useMemo(() => adapter.startOfMonth(viewMonth), [viewMonth, adapter]);
@@ -150,10 +151,15 @@ function DatePickerRoot({
   return /* @__PURE__ */ jsx(DatePickerContext.Provider, { value: contextValue, children });
 }
 var DatePickerInput = forwardRef(
-  function DatePickerInput2({ format: formatProp, onClick, onBlur, onKeyDown, ...props }, ref) {
+  function DatePickerInput2({ format: formatProp, name, onClick, onBlur, onKeyDown, ...props }, ref) {
     const ctx = useDatePickerContext("DatePicker.Input");
     const displayFormat = formatProp ?? ctx.displayFormat;
     const [inputText, setInputText] = useState(null);
+    const isComposingRef = useRef(false);
+    useEffect(() => {
+      if (isComposingRef.current) return;
+      setInputText(null);
+    }, [ctx.value]);
     let formattedValue = "";
     if (ctx.value) {
       try {
@@ -170,47 +176,62 @@ var DatePickerInput = forwardRef(
       },
       [ctx, onClick]
     );
+    const commitText = useCallback(
+      (text) => {
+        if (!text) {
+          ctx.selectDate(null);
+          setInputText(null);
+          return true;
+        }
+        const parsed = parseInputValue(text, ctx.adapter);
+        if (parsed) {
+          ctx.selectDate(parsed);
+          setInputText(null);
+          return true;
+        }
+        return false;
+      },
+      [ctx]
+    );
     const handleBlur = useCallback(
       (e) => {
         if (inputText !== null) {
-          const parsed = parseInputValue(inputText, ctx.adapter);
-          if (parsed) {
-            ctx.selectDate(parsed);
-          }
+          commitText(inputText);
           setInputText(null);
         }
         onBlur?.(e);
       },
-      [inputText, displayFormat, ctx, onBlur]
+      [inputText, commitText, onBlur]
     );
     const handleChange = useCallback(
       (e) => {
         const text = e.target.value;
         setInputText(text);
-        if (!text) {
-          ctx.selectDate(null);
-          setInputText(null);
-          return;
-        }
-        const parsed = parseInputValue(text, ctx.adapter);
-        if (parsed) {
-          ctx.selectDate(parsed);
-          setInputText(null);
-        }
+        if (isComposingRef.current) return;
+        commitText(text);
       },
-      [displayFormat, ctx]
+      [commitText]
+    );
+    const handleCompositionStart = useCallback(() => {
+      isComposingRef.current = true;
+    }, []);
+    const handleCompositionEnd = useCallback(
+      (e) => {
+        isComposingRef.current = false;
+        commitText(e.target.value);
+      },
+      [commitText]
     );
     const handleKeyDown = useCallback(
       (e) => {
         if (e.key === "Escape") {
           ctx.close();
         } else if (e.key === "Enter") {
+          if (ctx.isOpen) e.preventDefault();
           if (inputText !== null) {
-            const parsed = parseInputValue(inputText, ctx.adapter);
-            if (parsed) {
-              ctx.selectDate(parsed);
-              setInputText(null);
-            }
+            commitText(inputText);
+          } else if (ctx.isOpen) {
+            ctx.selectDate(ctx.focusedDate);
           }
         } else if (e.key === "ArrowDown" && !ctx.isOpen) {
           e.preventDefault();
@@ -218,36 +239,42 @@ var DatePickerInput = forwardRef(
         }
         onKeyDown?.(e);
       },
-      [ctx, inputText, displayFormat, onKeyDown]
+      [ctx, inputText, commitText, onKeyDown]
     );
     const calendarId = `${ctx.pickerId}-calendar`;
-    return /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: (node) => {
-          ctx.referenceRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        },
-        type: "text",
-        role: "combobox",
-        "aria-expanded": ctx.isOpen,
-        "aria-haspopup": "dialog",
-        "aria-controls": ctx.isOpen ? calendarId : void 0,
-        "aria-autocomplete": "none",
-        autoComplete: "off",
-        value: displayValue,
-        disabled: ctx.isDisabled || props.disabled,
-        readOnly: ctx.isReadOnly,
-        onChange: handleChange,
-        onClick: handleClick,
-        onBlur: handleBlur,
-        onKeyDown: handleKeyDown,
-        ...props
-      }
-    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: (node) => {
+            ctx.referenceRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) ref.current = node;
+          },
+          type: "text",
+          role: "combobox",
+          "aria-expanded": ctx.isOpen,
+          "aria-haspopup": "dialog",
+          "aria-controls": ctx.isOpen ? calendarId : void 0,
+          "aria-autocomplete": "none",
+          autoComplete: "off",
+          value: displayValue,
+          disabled: ctx.isDisabled || props.disabled,
+          readOnly: ctx.isReadOnly,
+          onChange: handleChange,
+          onClick: handleClick,
+          onBlur: handleBlur,
+          onKeyDown: handleKeyDown,
+          onCompositionStart: handleCompositionStart,
+          onCompositionEnd: handleCompositionEnd,
+          ...props
+        }
+      ),
+      name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: ctx.value ?? "" }) : null
+    ] });
   }
 );
+DatePickerInput.displayName = "DatePicker.Input";
 var DatePickerTrigger = forwardRef(
   function DatePickerTrigger2({ onClick, children, ...props }, ref) {
     const ctx = useDatePickerContext("DatePicker.Trigger");
@@ -271,6 +298,7 @@ var DatePickerTrigger = forwardRef(
         tabIndex: 0,
         "aria-label": ctx.isOpen ? ctx.labels.triggerClose : ctx.labels.triggerOpen,
         "aria-expanded": ctx.isOpen,
+        "aria-haspopup": "dialog",
         "aria-controls": ctx.isOpen ? calendarId : void 0,
         disabled: ctx.isDisabled || props.disabled,
         onClick: handleClick,
@@ -301,6 +329,8 @@ var DatePickerTrigger = forwardRef(
     );
   }
 );
+DatePickerTrigger.displayName = "DatePicker.Trigger";
+var POPOVER_MIDDLEWARE = [offset(4), flip(), shift({ padding: 8 })];
 function usePopover({
   isOpen,
   close,
@@ -312,7 +342,7 @@ function usePopover({
   const { refs, floatingStyles, isPositioned } = useFloating({
     open: isOpen,
     placement,
-    middleware: [offset(4), flip(), shift({ padding: 8 })],
+    middleware: POPOVER_MIDDLEWARE,
     whileElementsMounted: autoUpdate
   });
   useEffect(() => {
@@ -359,6 +389,24 @@ function usePopover({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, close]);
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleFocusOut(e) {
+      const next = e.relatedTarget;
+      const floating = floatingRef.current;
+      const reference = referenceRef.current;
+      if (!next) return;
+      const insideFloating = floating?.contains(next) ?? false;
+      const insideReference = reference?.contains(next) ?? false;
+      if (!insideFloating && !insideReference) {
+        close();
+      }
+    }
+    const node = floatingRef.current;
+    if (!node) return;
+    node.addEventListener("focusout", handleFocusOut);
+    return () => node.removeEventListener("focusout", handleFocusOut);
+  }, [isOpen, close, referenceRef]);
   const setFloatingRef = useCallback(
     (node) => {
       floatingRef.current = node;
@@ -420,20 +468,36 @@ var srOnly = {
 function DatePickerCalendar({
   classNames,
   onTitleClick,
+  showWeekNumber = false,
+  fixedWeeks = false,
   ...props
 }) {
   const ctx = useDatePickerContext("DatePicker.Calendar");
   const gridRef = useRef(null);
   const [announcement, setAnnouncement] = useState("");
   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,
-    timezone: displayTimezone
-  });
+  const weekdays = useMemo(() => getWeekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
+  const weeks = useMemo(
+    () => getCalendarDays(viewMonth, adapter, {
+      weekStartsOn,
+      selected: ctx.value,
+      focusedDate,
+      disabled,
+      timezone: displayTimezone,
+      fixedWeeks
+    }),
+    [
+      viewMonth,
+      adapter,
+      weekStartsOn,
+      ctx.value,
+      focusedDate,
+      disabled,
+      displayTimezone,
+      fixedWeeks
+    ]
+  );
+  const thursdayIndex = weekStartsOn === 0 ? 4 : 3;
   const year = adapter.getYear(viewMonth);
   const month = adapter.getMonth(viewMonth);
   const title = formatMonthYear(year, month, locale);
@@ -513,6 +577,15 @@ function DatePickerCalendar({
       }
       if (newFocused) {
         e.preventDefault();
+        const skipStep = e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "PageUp" || e.key === "Home" ? -1 : 1;
+        let attempts = 0;
+        while (isDateDisabled(newFocused, disabled, adapter) && attempts < 42) {
+          newFocused = adapter.addDays(newFocused, skipStep);
+          attempts++;
+        }
+        if (attempts >= 42) {
+          return;
+        }
         ctx.setFocusedDate(newFocused);
         if (!adapter.isSameMonth(newFocused, viewMonth)) {
           ctx.setViewMonth(newFocused);
@@ -560,62 +633,170 @@ function DatePickerCalendar({
         ref: gridRef,
         role: "grid",
         "aria-label": title,
+        "aria-rowcount": weeks.length + 1,
+        "aria-colcount": 7,
         className: classNames?.grid,
         onKeyDown: handleKeyDown,
         children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { role: "row", children: weekdays.map((day) => /* @__PURE__ */ jsx(
-            "th",
-            {
-              role: "columnheader",
-              abbr: day.full,
-              scope: "col",
-              className: classNames?.weekdayHeader,
-              children: day.short
-            },
-            day.short
-          )) }) }),
-          /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("tr", { role: "row", className: classNames?.gridRow, children: week.map((day) => {
-            const dayClasses = [
-              classNames?.day,
-              day.isSelected && classNames?.daySelected,
-              day.isToday && classNames?.dayToday,
-              day.isDisabled && classNames?.dayDisabled,
-              !day.isCurrentMonth && classNames?.dayOutsideMonth
-            ].filter(Boolean).join(" ") || void 0;
-            return /* @__PURE__ */ jsx(
-              "td",
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
+            showWeekNumber ? /* @__PURE__ */ jsx("th", { scope: "col", "aria-hidden": "true", className: classNames?.weekNumberHeader, children: "#" }) : null,
+            weekdays.map((day, colIndex) => /* @__PURE__ */ jsx(
+              "th",
               {
-                role: "gridcell",
-                "aria-selected": day.isSelected || void 0,
-                "aria-disabled": day.isDisabled || void 0,
-                "aria-current": day.isToday ? "date" : void 0,
-                className: classNames?.gridCell,
-                children: /* @__PURE__ */ jsx(
-                  "button",
+                role: "columnheader",
+                abbr: day.full,
+                scope: "col",
+                "aria-colindex": colIndex + 1,
+                className: classNames?.weekdayHeader,
+                children: day.short
+              },
+              day.short
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              role: "row",
+              "aria-rowindex": weekIndex + 2,
+              className: classNames?.gridRow,
+              children: [
+                showWeekNumber ? /* @__PURE__ */ jsx(
+                  "th",
                   {
-                    type: "button",
-                    tabIndex: day.isFocused ? 0 : -1,
-                    disabled: day.isDisabled,
-                    "data-focused": day.isFocused || void 0,
-                    "data-selected": day.isSelected || void 0,
-                    "data-today": day.isToday || void 0,
-                    "data-outside-month": !day.isCurrentMonth || void 0,
-                    className: dayClasses,
-                    onClick: () => handleDayClick(day),
-                    "aria-label": safeFormatFullDate(day.isoString, locale),
-                    children: day.dayNumber
+                    scope: "row",
+                    "aria-hidden": "true",
+                    className: classNames?.weekNumber,
+                    "data-week-number": true,
+                    children: getISOWeekNumber(week[thursdayIndex].isoString)
                   }
-                )
-              },
-              day.isoString
-            );
-          }) }, weekIndex)) })
+                ) : null,
+                week.map((day, colIndex) => {
+                  const dayClasses = [
+                    classNames?.day,
+                    day.isSelected && classNames?.daySelected,
+                    day.isToday && classNames?.dayToday,
+                    day.isDisabled && classNames?.dayDisabled,
+                    !day.isCurrentMonth && classNames?.dayOutsideMonth
+                  ].filter(Boolean).join(" ") || void 0;
+                  return /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      role: "gridcell",
+                      "aria-colindex": colIndex + 1,
+                      "aria-selected": day.isSelected || void 0,
+                      "aria-disabled": day.isDisabled || void 0,
+                      "aria-current": day.isToday ? "date" : void 0,
+                      className: classNames?.gridCell,
+                      children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          tabIndex: day.isFocused ? 0 : -1,
+                          disabled: day.isDisabled,
+                          "data-focused": day.isFocused || void 0,
+                          "data-selected": day.isSelected || void 0,
+                          "data-today": day.isToday || void 0,
+                          "data-outside-month": !day.isCurrentMonth || void 0,
+                          className: dayClasses,
+                          onClick: () => handleDayClick(day),
+                          "aria-label": safeFormatFullDate(day.isoString, locale),
+                          children: day.dayNumber
+                        }
+                      )
+                    },
+                    day.isoString
+                  );
+                })
+              ]
+            },
+            weekIndex
+          )) })
         ]
       }
     ),
     /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: srOnly, children: announcement })
   ] });
 }
+function isRangeFullyDisabled(start, end, rules, adapter) {
+  for (const rule of rules) {
+    if ("before" in rule && adapter.isBefore(end, rule.before)) return true;
+    if ("after" in rule && adapter.isAfter(start, rule.after)) return true;
+  }
+  return false;
+}
+function useGridState(opts) {
+  const { initialIndex, disabledFlags, onSelect, onPageUp, onPageDown, onEscape } = opts;
+  const gridRef = useRef(null);
+  const [focusedIndex, setFocusedIndex] = useState(initialIndex);
+  const handleKeyDown = (e) => {
+    let next = null;
+    let step = 1;
+    switch (e.key) {
+      case "ArrowLeft":
+        next = Math.max(0, focusedIndex - 1);
+        step = -1;
+        break;
+      case "ArrowRight":
+        next = Math.min(11, focusedIndex + 1);
+        break;
+      case "ArrowUp":
+        next = Math.max(0, focusedIndex - 3);
+        step = -1;
+        break;
+      case "ArrowDown":
+        next = Math.min(11, focusedIndex + 3);
+        break;
+      case "Home":
+        next = focusedIndex - focusedIndex % 3;
+        step = -1;
+        break;
+      case "End":
+        next = focusedIndex - focusedIndex % 3 + 2;
+        break;
+      case "PageUp":
+        e.preventDefault();
+        onPageUp();
+        return;
+      case "PageDown":
+        e.preventDefault();
+        onPageDown();
+        return;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        onSelect(focusedIndex);
+        return;
+      case "Escape":
+        onEscape();
+        return;
+      default:
+        return;
+    }
+    if (next === null) return;
+    e.preventDefault();
+    if (disabledFlags) {
+      let attempts = 0;
+      while (next >= 0 && next < 12 && disabledFlags[next] && attempts < 12) {
+        next += step;
+        attempts++;
+      }
+      if (next < 0 || next >= 12 || disabledFlags[next]) return;
+    }
+    if (next !== focusedIndex) setFocusedIndex(next);
+  };
+  useEffect(() => {
+    if (!disabledFlags || !disabledFlags[focusedIndex]) return;
+    const firstEnabled = disabledFlags.findIndex((d) => !d);
+    if (firstEnabled !== -1 && firstEnabled !== focusedIndex) {
+      setFocusedIndex(firstEnabled);
+    }
+  }, [disabledFlags, focusedIndex]);
+  useEffect(() => {
+    const btn = gridRef.current?.querySelector('[data-focused="true"]');
+    btn?.focus({ preventScroll: true });
+  }, [focusedIndex]);
+  return { gridRef, focusedIndex, handleKeyDown };
+}
 function DatePickerMonthGrid({
   classNames,
   onSelect,
@@ -623,15 +804,18 @@ function DatePickerMonthGrid({
   ...props
 }) {
   const ctx = useDatePickerContext("DatePicker.MonthGrid");
-  const { adapter, viewMonth, locale } = ctx;
+  const { adapter, viewMonth, locale, displayTimezone } = ctx;
   const currentYear = adapter.getYear(viewMonth);
   const currentMonth = adapter.getMonth(viewMonth);
-  const todayMonth = adapter.getMonth(adapter.today());
-  const todayYear = adapter.getYear(adapter.today());
+  const [today, setToday] = useState(null);
+  useEffect(() => {
+    setToday(adapter.today(displayTimezone));
+  }, [adapter, displayTimezone]);
+  const todayMonth = today !== null ? adapter.getMonth(today) : -1;
+  const todayYear = today !== null ? adapter.getYear(today) : -1;
   const navigateYear = useCallback(
     (direction) => {
-      const newDate = adapter.addYears(viewMonth, direction);
-      ctx.setViewMonth(newDate);
+      ctx.setViewMonth(adapter.addYears(viewMonth, direction));
     },
     [adapter, viewMonth, ctx]
   );
@@ -644,12 +828,13 @@ function DatePickerMonthGrid({
     },
     [currentYear, ctx, onSelect]
   );
-  const months = Array.from({ length: 12 }, (_, i) => ({
-    index: i,
-    name: getMonthName(i, locale),
-    isSelected: i === currentMonth,
-    isCurrent: i === todayMonth && currentYear === todayYear
-  }));
+  const { gridRef, focusedIndex, handleKeyDown } = useGridState({
+    initialIndex: currentMonth,
+    onSelect: handleMonthSelect,
+    onPageUp: () => navigateYear(-1),
+    onPageDown: () => navigateYear(1),
+    onEscape: ctx.close
+  });
   return /* @__PURE__ */ jsxs("div", { className: classNames?.root, ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames?.header, children: [
       /* @__PURE__ */ jsx(
@@ -677,30 +862,37 @@ function DatePickerMonthGrid({
     /* @__PURE__ */ jsx(
       "div",
       {
+        ref: gridRef,
         role: "grid",
         "aria-label": `${currentYear} months`,
         className: classNames?.grid,
         style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
-        children: months.map((m) => {
-          const monthClass = [
+        onKeyDown: handleKeyDown,
+        children: Array.from({ length: 12 }, (_, i) => {
+          const isSelected = i === currentMonth;
+          const isCurrent = i === todayMonth && currentYear === todayYear;
+          const isFocused = i === focusedIndex;
+          const cls = [
             classNames?.month,
-            m.isSelected && classNames?.monthSelected,
-            m.isCurrent && classNames?.monthCurrent
+            isSelected && classNames?.monthSelected,
+            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
+              tabIndex: isFocused ? 0 : -1,
+              "aria-selected": isSelected || void 0,
+              "aria-current": isCurrent ? "date" : void 0,
+              "data-selected": isSelected || void 0,
+              "data-current": isCurrent || void 0,
+              "data-focused": isFocused || void 0,
+              className: cls,
+              onClick: () => handleMonthSelect(i),
+              children: getMonthName(i, locale)
             },
-            m.index
+            i
           );
         })
       }
@@ -709,38 +901,38 @@ function DatePickerMonthGrid({
 }
 function DatePickerYearGrid({ classNames, onSelect, ...props }) {
   const ctx = useDatePickerContext("DatePicker.YearGrid");
-  const { adapter, viewMonth } = ctx;
+  const { adapter, viewMonth, displayTimezone } = ctx;
   const currentYear = adapter.getYear(viewMonth);
-  const todayYear = adapter.getYear(adapter.today());
+  const [today, setToday] = useState(null);
+  useEffect(() => {
+    setToday(adapter.today(displayTimezone));
+  }, [adapter, displayTimezone]);
+  const todayYear = today !== null ? adapter.getYear(today) : -1;
   const decadeStart = currentYear - currentYear % 12;
   const navigateDecade = useCallback(
     (direction) => {
-      const newDate = adapter.addYears(viewMonth, direction * 12);
-      ctx.setViewMonth(newDate);
+      ctx.setViewMonth(adapter.addYears(viewMonth, direction * 12));
     },
     [adapter, viewMonth, ctx]
   );
   const handleYearSelect = useCallback(
-    (year) => {
+    (indexInDecade) => {
+      const year = decadeStart + indexInDecade;
       const currentMonth = adapter.getMonth(viewMonth);
       const target = new Date(Date.UTC(year, currentMonth, 1)).toISOString();
       ctx.setViewMonth(target);
       ctx.setFocusedDate(target);
       onSelect?.();
     },
-    [adapter, viewMonth, ctx, onSelect]
-  );
-  const years = useMemo(
-    () => Array.from({ length: 12 }, (_, i) => {
-      const year = decadeStart + i;
-      return {
-        value: year,
-        isSelected: year === currentYear,
-        isCurrent: year === todayYear
-      };
-    }),
-    [decadeStart, currentYear, todayYear]
-  );
+    [adapter, viewMonth, ctx, onSelect, decadeStart]
+  );
+  const { gridRef, focusedIndex, handleKeyDown } = useGridState({
+    initialIndex: currentYear - decadeStart,
+    onSelect: handleYearSelect,
+    onPageUp: () => navigateDecade(-1),
+    onPageDown: () => navigateDecade(1),
+    onEscape: ctx.close
+  });
   const rangeLabel = `${decadeStart}\u2013${decadeStart + 11}`;
   return /* @__PURE__ */ jsxs("div", { className: classNames?.root, ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames?.header, children: [
@@ -769,30 +961,38 @@ function DatePickerYearGrid({ classNames, onSelect, ...props }) {
     /* @__PURE__ */ jsx(
       "div",
       {
+        ref: gridRef,
         role: "grid",
         "aria-label": rangeLabel,
         className: classNames?.grid,
         style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
-        children: years.map((y) => {
-          const yearClass = [
+        onKeyDown: handleKeyDown,
+        children: Array.from({ length: 12 }, (_, i) => {
+          const year = decadeStart + i;
+          const isSelected = year === currentYear;
+          const isCurrent = year === todayYear;
+          const isFocused = i === focusedIndex;
+          const cls = [
             classNames?.year,
-            y.isSelected && classNames?.yearSelected,
-            y.isCurrent && classNames?.yearCurrent
+            isSelected && classNames?.yearSelected,
+            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
+              tabIndex: isFocused ? 0 : -1,
+              "aria-selected": isSelected || void 0,
+              "aria-current": isCurrent ? "date" : void 0,
+              "data-selected": isSelected || void 0,
+              "data-current": isCurrent || void 0,
+              "data-focused": isFocused || void 0,
+              className: cls,
+              onClick: () => handleYearSelect(i),
+              children: year
             },
-            y.value
+            i
           );
         })
       }
@@ -865,8 +1065,7 @@ function DatePickerPreset({
     "button",
     {
       type: "button",
-      role: "option",
-      "aria-selected": isActive,
+      "aria-pressed": isActive,
       "data-active": isActive || void 0,
       disabled: ctx.isDisabled,
       onClick: handleClick,
@@ -903,6 +1102,17 @@ function useRangePickerContext(componentName) {
   return context;
 }
 var EMPTY_RANGE = { start: null, end: null };
+var SR_ONLY = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
 function RangePickerRoot({
   value: controlledValue,
   defaultValue,
@@ -929,11 +1139,13 @@ function RangePickerRoot({
   const [isOpen, setIsOpen] = useState(false);
   const [selectingTarget, setSelectingTarget] = useState("start");
   const [hoverDate, setHoverDate] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const announce = useCallback((message) => setAnnouncement(message), []);
   const [viewMonth, setViewMonth] = useState(
-    currentValue.start ?? adapter.today(displayTimezone)
+    () => currentValue.start ?? adapter.today(displayTimezone)
   );
   const [focusedDate, setFocusedDate] = useState(
-    currentValue.start ?? adapter.today(displayTimezone)
+    () => currentValue.start ?? adapter.today(displayTimezone)
   );
   useChangeEffect(isOpen, onOpenChange);
   const viewMonthStart = useMemo(() => adapter.startOfMonth(viewMonth), [viewMonth, adapter]);
@@ -1031,7 +1243,8 @@ function RangePickerRoot({
       isDisabled,
       isReadOnly: readOnly,
       pickerId,
-      labels: mergedLabels
+      labels: mergedLabels,
+      announce
     }),
     [
       currentValue,
@@ -1054,10 +1267,14 @@ function RangePickerRoot({
       isDisabled,
       readOnly,
       pickerId,
-      mergedLabels
+      mergedLabels,
+      announce
     ]
   );
-  return /* @__PURE__ */ jsx(RangePickerContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsxs(RangePickerContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: SR_ONLY, children: announcement })
+  ] });
 }
 var RangePickerInput = forwardRef(
   function RangePickerInput2({ part, format: formatProp, onClick, onKeyDown, ...props }, ref) {
@@ -1083,6 +1300,8 @@ var RangePickerInput = forwardRef(
       (e) => {
         if (e.key === "Escape") {
           ctx.close();
+        } else if (e.key === "Enter" && ctx.isOpen) {
+          e.preventDefault();
         } else if (e.key === "ArrowDown" && !ctx.isOpen) {
           e.preventDefault();
           ctx.open();
@@ -1119,6 +1338,7 @@ var RangePickerInput = forwardRef(
     );
   }
 );
+RangePickerInput.displayName = "RangePicker.Input";
 function RangePickerPopover({ children, ...props }) {
   const ctx = useRangePickerContext("RangePicker.Popover");
   const calendarId = `${ctx.pickerId}-calendar`;
@@ -1154,25 +1374,15 @@ function safeFormatFullDate2(iso, locale) {
     return iso;
   }
 }
-var srOnly2 = {
-  position: "absolute",
-  width: "1px",
-  height: "1px",
-  padding: 0,
-  margin: "-1px",
-  overflow: "hidden",
-  clip: "rect(0, 0, 0, 0)",
-  whiteSpace: "nowrap",
-  border: 0
-};
 function RangePickerCalendar({
   classNames,
   selectionMode = "range",
+  showWeekNumber = false,
+  fixedWeeks = false,
   ...props
 }) {
   const ctx = useRangePickerContext("RangePicker.Calendar");
   const gridRef = useRef(null);
-  const [announcement, setAnnouncement] = useState("");
   const {
     adapter,
     viewMonth,
@@ -1185,15 +1395,30 @@ function RangePickerCalendar({
     displayTimezone
   } = ctx;
   const { locale } = ctx;
-  const weekdays = getWeekdayNames(locale, weekStartsOn);
-  const weeks = getCalendarDays(viewMonth, adapter, {
-    weekStartsOn,
-    focusedDate,
-    disabled,
-    range: value,
-    rangeHover: hoverDate,
-    timezone: displayTimezone
-  });
+  const weekdays = useMemo(() => getWeekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
+  const weeks = useMemo(
+    () => getCalendarDays(viewMonth, adapter, {
+      weekStartsOn,
+      focusedDate,
+      disabled,
+      range: value,
+      rangeHover: hoverDate,
+      timezone: displayTimezone,
+      fixedWeeks
+    }),
+    [
+      viewMonth,
+      adapter,
+      weekStartsOn,
+      focusedDate,
+      disabled,
+      value,
+      hoverDate,
+      displayTimezone,
+      fixedWeeks
+    ]
+  );
+  const thursdayIndex = weekStartsOn === 0 ? 4 : 3;
   const year = adapter.getYear(viewMonth);
   const month = adapter.getMonth(viewMonth);
   const title = formatMonthYear(year, month, locale);
@@ -1209,7 +1434,7 @@ function RangePickerCalendar({
       ctx.setFocusedDate(adapter.startOfMonth(newMonth));
       const y = adapter.getYear(newMonth);
       const m = adapter.getMonth(newMonth);
-      setAnnouncement(formatMonthYear(y, m, locale));
+      ctx.announce(formatMonthYear(y, m, locale));
     },
     [adapter, viewMonth, ctx, locale]
   );
@@ -1221,15 +1446,27 @@ function RangePickerCalendar({
         const range = { start: weekStart, end: weekEnd };
         ctx.setRange(range);
         ctx.close();
-        setAnnouncement(
-          `${safeFormatFullDate2(weekStart, locale)} \u2013 ${safeFormatFullDate2(weekEnd, locale)}`
+        ctx.announce(
+          `${ctx.labels.rangeSelected}: ${safeFormatFullDate2(weekStart, locale)} \u2013 ${safeFormatFullDate2(weekEnd, locale)}`
         );
       } else {
+        const wasPickingStart = selectingTarget === "start";
+        const previousStart = value.start;
         ctx.selectDate(iso);
-        setAnnouncement(safeFormatFullDate2(iso, locale));
+        const formatted = safeFormatFullDate2(iso, locale);
+        if (wasPickingStart) {
+          ctx.announce(`${formatted}. ${ctx.labels.selectingEnd}`);
+        } else if (previousStart) {
+          const [start, end] = adapter.isBefore(iso, previousStart) ? [iso, previousStart] : [previousStart, iso];
+          ctx.announce(
+            `${ctx.labels.rangeSelected}: ${safeFormatFullDate2(start, locale)} \u2013 ${safeFormatFullDate2(end, locale)}`
+          );
+        } else {
+          ctx.announce(formatted);
+        }
       }
     },
-    [selectionMode, adapter, weekStartsOn, ctx, locale]
+    [selectionMode, adapter, weekStartsOn, ctx, locale, selectingTarget, value.start]
   );
   const handleDayClick = useCallback(
     (day) => {
@@ -1293,6 +1530,13 @@ function RangePickerCalendar({
       }
       if (newFocused) {
         e.preventDefault();
+        const skipStep = e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "PageUp" || e.key === "Home" ? -1 : 1;
+        let attempts = 0;
+        while (isDateDisabled(newFocused, disabled, adapter) && attempts < 42) {
+          newFocused = adapter.addDays(newFocused, skipStep);
+          attempts++;
+        }
+        if (attempts >= 42) return;
         ctx.setFocusedDate(newFocused);
         if (!adapter.isSameMonth(newFocused, viewMonth)) {
           ctx.setViewMonth(newFocused);
@@ -1345,67 +1589,93 @@ function RangePickerCalendar({
         ref: gridRef,
         role: "grid",
         "aria-label": title,
-        "aria-multiselectable": "true",
+        "aria-rowcount": weeks.length + 1,
+        "aria-colcount": 7,
         className: classNames?.grid,
         onKeyDown: handleKeyDown,
         children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { role: "row", children: weekdays.map((day) => /* @__PURE__ */ jsx(
-            "th",
-            {
-              role: "columnheader",
-              abbr: day.full,
-              scope: "col",
-              className: classNames?.weekdayHeader,
-              children: day.short
-            },
-            day.short
-          )) }) }),
-          /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("tr", { role: "row", className: classNames?.gridRow, children: week.map((day) => {
-            const dayClasses = [
-              classNames?.day,
-              day.isRangeStart && classNames?.dayRangeStart,
-              day.isRangeEnd && classNames?.dayRangeEnd,
-              day.isInRange && classNames?.dayInRange,
-              day.isToday && classNames?.dayToday,
-              day.isDisabled && classNames?.dayDisabled,
-              !day.isCurrentMonth && classNames?.dayOutsideMonth
-            ].filter(Boolean).join(" ") || void 0;
-            const isSelected = selectionMode === "week" ? day.isRangeStart || day.isRangeEnd || day.isInRange : day.isRangeStart || day.isRangeEnd;
-            return /* @__PURE__ */ jsx(
-              "td",
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
+            showWeekNumber ? /* @__PURE__ */ jsx("th", { scope: "col", "aria-hidden": "true", className: classNames?.weekNumberHeader, children: "#" }) : null,
+            weekdays.map((day, colIndex) => /* @__PURE__ */ jsx(
+              "th",
               {
-                role: "gridcell",
-                "aria-selected": isSelected || void 0,
-                "aria-disabled": day.isDisabled || void 0,
-                "aria-current": day.isToday ? "date" : void 0,
-                className: classNames?.gridCell,
-                children: /* @__PURE__ */ jsx(
-                  "button",
+                role: "columnheader",
+                abbr: day.full,
+                scope: "col",
+                "aria-colindex": colIndex + 1,
+                className: classNames?.weekdayHeader,
+                children: day.short
+              },
+              day.short
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              role: "row",
+              "aria-rowindex": weekIndex + 2,
+              className: classNames?.gridRow,
+              children: [
+                showWeekNumber ? /* @__PURE__ */ jsx(
+                  "th",
                   {
-                    type: "button",
-                    tabIndex: day.isFocused ? 0 : -1,
-                    disabled: day.isDisabled,
-                    "data-focused": day.isFocused || void 0,
-                    "data-range-start": day.isRangeStart || void 0,
-                    "data-range-end": day.isRangeEnd || void 0,
-                    "data-in-range": day.isInRange || void 0,
-                    "data-today": day.isToday || void 0,
-                    "data-outside-month": !day.isCurrentMonth || void 0,
-                    className: dayClasses,
-                    onClick: () => handleDayClick(day),
-                    onMouseEnter: () => handleDayMouseEnter(day),
-                    "aria-label": safeFormatFullDate2(day.isoString, locale),
-                    children: day.dayNumber
+                    scope: "row",
+                    "aria-hidden": "true",
+                    className: classNames?.weekNumber,
+                    "data-week-number": true,
+                    children: getISOWeekNumber(week[thursdayIndex].isoString)
                   }
-                )
-              },
-              day.isoString
-            );
-          }) }, weekIndex)) })
+                ) : null,
+                week.map((day, colIndex) => {
+                  const dayClasses = [
+                    classNames?.day,
+                    day.isRangeStart && classNames?.dayRangeStart,
+                    day.isRangeEnd && classNames?.dayRangeEnd,
+                    day.isInRange && classNames?.dayInRange,
+                    day.isToday && classNames?.dayToday,
+                    day.isDisabled && classNames?.dayDisabled,
+                    !day.isCurrentMonth && classNames?.dayOutsideMonth
+                  ].filter(Boolean).join(" ") || void 0;
+                  const isSelected = selectionMode === "week" ? day.isRangeStart || day.isRangeEnd || day.isInRange : day.isRangeStart || day.isRangeEnd;
+                  return /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      role: "gridcell",
+                      "aria-colindex": colIndex + 1,
+                      "aria-selected": isSelected || void 0,
+                      "aria-disabled": day.isDisabled || void 0,
+                      "aria-current": day.isToday ? "date" : void 0,
+                      className: classNames?.gridCell,
+                      children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          tabIndex: day.isFocused ? 0 : -1,
+                          disabled: day.isDisabled,
+                          "data-focused": day.isFocused || void 0,
+                          "data-range-start": day.isRangeStart || void 0,
+                          "data-range-end": day.isRangeEnd || void 0,
+                          "data-in-range": day.isInRange || void 0,
+                          "data-today": day.isToday || void 0,
+                          "data-outside-month": !day.isCurrentMonth || void 0,
+                          className: dayClasses,
+                          onClick: () => handleDayClick(day),
+                          onMouseEnter: () => handleDayMouseEnter(day),
+                          "aria-label": safeFormatFullDate2(day.isoString, locale),
+                          children: day.dayNumber
+                        }
+                      )
+                    },
+                    day.isoString
+                  );
+                })
+              ]
+            },
+            weekIndex
+          )) })
         ]
       }
-    ),
-    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: srOnly2, children: announcement })
+    )
   ] });
 }
 function RangePickerPresets({ classNames, children, ...props }) {
@@ -1463,41 +1733,33 @@ function RangePickerPreset({
   ...props
 }) {
   const ctx = useRangePickerContext("RangePicker.Preset");
+  const resolved = useMemo(() => {
+    if (directRange) return directRange;
+    if (presetKey)
+      return resolvePreset(presetKey, ctx.adapter.today(ctx.displayTimezone), ctx.adapter);
+    return null;
+  }, [directRange, presetKey, ctx.adapter, ctx.displayTimezone]);
   const handleClick = useCallback(
     (e) => {
       if (ctx.isDisabled || ctx.isReadOnly) return;
-      let resolved;
-      if (directRange) {
-        resolved = directRange;
-      } else if (presetKey) {
-        resolved = resolvePreset(presetKey, ctx.adapter.today(), ctx.adapter);
-      } else {
-        return;
-      }
+      if (!resolved) return;
       ctx.setRange(resolved);
       ctx.close();
       onClick?.(e);
     },
-    [ctx, presetKey, directRange, onClick]
+    [ctx, resolved, onClick]
   );
-  const isActive = (() => {
-    if (!ctx.value.start || !ctx.value.end) return false;
-    let target;
-    if (directRange) {
-      target = directRange;
-    } else if (presetKey) {
-      target = resolvePreset(presetKey, ctx.adapter.today(), ctx.adapter);
-    } else {
+  const isActive = useMemo(() => {
+    if (!ctx.value.start || !ctx.value.end || !resolved || !resolved.start || !resolved.end) {
       return false;
     }
-    return target.start !== null && target.end !== null && ctx.adapter.isSameDay(ctx.value.start, target.start) && ctx.adapter.isSameDay(ctx.value.end, target.end);
-  })();
+    return ctx.adapter.isSameDay(ctx.value.start, resolved.start) && ctx.adapter.isSameDay(ctx.value.end, resolved.end);
+  }, [ctx.value.start, ctx.value.end, ctx.adapter, resolved]);
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
-      role: "option",
-      "aria-selected": isActive,
+      "aria-pressed": isActive,
       "data-active": isActive || void 0,
       disabled: ctx.isDisabled,
       onClick: handleClick,
@@ -1530,9 +1792,6 @@ function useTimePickerContext(componentName) {
   }
   return context;
 }
-function getDefaultIso() {
-  return DateFnsAdapter.today();
-}
 function TimePickerRoot({
   value: controlledValue,
   defaultValue,
@@ -1543,6 +1802,7 @@ function TimePickerRoot({
   displayTimezone,
   disabled = false,
   readOnly = false,
+  filterTime,
   labels: labelsProp,
   children
 }) {
@@ -1556,21 +1816,21 @@ function TimePickerRoot({
     defaultValue ?? null
   );
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
-  const baseIso = currentValue ?? getDefaultIso();
-  const currentTime = useMemo(
-    () => displayTimezone ? getTimeInTimezone(baseIso, displayTimezone) : getTime(baseIso),
-    [baseIso, displayTimezone]
-  );
+  const currentTime = useMemo(() => {
+    if (!currentValue) return { hours: 0, minutes: 0, seconds: 0 };
+    return displayTimezone ? getTimeInTimezone(currentValue, displayTimezone) : getTime(currentValue);
+  }, [currentValue, displayTimezone]);
   const setTime$1 = useCallback(
     (partial) => {
       if (disabled || readOnly) return;
-      const newIso = displayTimezone ? setTimeInTimezone(baseIso, partial, displayTimezone) : setTime(baseIso, partial);
+      const base = currentValue ?? DateFnsAdapter.today(displayTimezone);
+      const newIso = displayTimezone ? setTimeInTimezone(base, partial, displayTimezone) : setTime(base, partial);
       if (!isControlled) {
         setUncontrolledValue(newIso);
       }
       onChange?.(newIso);
     },
-    [disabled, readOnly, baseIso, isControlled, onChange, displayTimezone]
+    [disabled, readOnly, currentValue, displayTimezone, isControlled, onChange]
   );
   const contextValue = useMemo(
     () => ({
@@ -1584,7 +1844,8 @@ function TimePickerRoot({
       isReadOnly: readOnly,
       currentTime,
       pickerId,
-      labels: mergedLabels
+      labels: mergedLabels,
+      filterTime
     }),
     [
       currentValue,
@@ -1597,7 +1858,8 @@ function TimePickerRoot({
       readOnly,
       currentTime,
       pickerId,
-      mergedLabels
+      mergedLabels,
+      filterTime
     ]
   );
   return /* @__PURE__ */ jsx(TimePickerContext.Provider, { value: contextValue, children });
@@ -1606,6 +1868,9 @@ var TimePickerInput = forwardRef(
   function TimePickerInput2({ onBlur, onKeyDown, ...props }, ref) {
     const ctx = useTimePickerContext("TimePicker.Input");
     const [inputText, setInputText] = useState(null);
+    useEffect(() => {
+      setInputText(null);
+    }, [ctx.value]);
     const displayValue = inputText !== null ? inputText : formatTimeString(ctx.currentTime, ctx.withSeconds);
     const commitInput = useCallback(() => {
       if (inputText === null) return;
@@ -1654,6 +1919,7 @@ var TimePickerInput = forwardRef(
     );
   }
 );
+TimePickerInput.displayName = "TimePicker.Input";
 function useListboxNavigation({
   items,
   onSelect,
@@ -1701,17 +1967,41 @@ function useListboxNavigation({
 }
 function TimePickerHourList({ classNames, ...props }) {
   const ctx = useTimePickerContext("TimePicker.HourList");
-  const { format, currentTime, isDisabled, isReadOnly } = ctx;
-  const hours = generateHours(format);
+  const { format, step, currentTime, isDisabled, isReadOnly, filterTime } = ctx;
+  const hours = useMemo(() => generateHours(format), [format]);
   const selectedHourDisplay = format === "12h" ? to12Hour(currentTime.hours).hours12 : currentTime.hours;
   const currentPeriod = format === "12h" ? to12Hour(currentTime.hours).period : null;
+  const fullyDisabledHours24 = useMemo(() => {
+    if (!filterTime) return null;
+    const disabled = /* @__PURE__ */ new Set();
+    for (let h = 0; h < 24; h++) {
+      let allRejected = true;
+      for (let m = 0; m < 60; m += step) {
+        if (!filterTime(h, m)) {
+          allRejected = false;
+          break;
+        }
+      }
+      if (allRejected) disabled.add(h);
+    }
+    return disabled;
+  }, [filterTime, step]);
+  const isHourDisabled = useCallback(
+    (hourDisplay) => {
+      if (!fullyDisabledHours24) return false;
+      const hours24 = format === "12h" && currentPeriod ? to24Hour(hourDisplay, currentPeriod) : hourDisplay;
+      return fullyDisabledHours24.has(hours24);
+    },
+    [fullyDisabledHours24, format, currentPeriod]
+  );
   const handleSelect = useCallback(
     (hourDisplay) => {
       if (isDisabled || isReadOnly) return;
+      if (isHourDisabled(hourDisplay)) return;
       const hours24 = format === "12h" && currentPeriod ? to24Hour(hourDisplay, currentPeriod) : hourDisplay;
       ctx.setTime({ hours: hours24 });
     },
-    [format, currentPeriod, ctx, isDisabled, isReadOnly]
+    [format, currentPeriod, ctx, isDisabled, isReadOnly, isHourDisabled]
   );
   const { listRef, handleKeyDown } = useListboxNavigation({
     items: hours,
@@ -1729,13 +2019,14 @@ function TimePickerHourList({ classNames, ...props }) {
       ...props,
       children: hours.map((hour) => {
         const isSelected = hour === selectedHourDisplay;
+        const isHourFullyDisabled = isHourDisabled(hour);
         const optionClass = [classNames?.option, isSelected && classNames?.optionSelected].filter(Boolean).join(" ") || void 0;
         return /* @__PURE__ */ jsx(
           "li",
           {
             role: "option",
             "aria-selected": isSelected,
-            "aria-disabled": isDisabled || void 0,
+            "aria-disabled": isDisabled || isHourFullyDisabled || void 0,
             "aria-label": ctx.labels.hourOption(hour),
             "data-selected": isSelected || void 0,
             tabIndex: isSelected ? 0 : -1,
@@ -1752,14 +2043,22 @@ function TimePickerHourList({ classNames, ...props }) {
 }
 function TimePickerMinuteList({ classNames, ...props }) {
   const ctx = useTimePickerContext("TimePicker.MinuteList");
-  const { step, currentTime, isDisabled, isReadOnly } = ctx;
-  const minutes = generateMinutes(step);
+  const { step, currentTime, isDisabled, isReadOnly, filterTime } = ctx;
+  const minutes = useMemo(() => generateMinutes(step), [step]);
+  const isMinuteDisabled = useCallback(
+    (minute) => {
+      if (!filterTime) return false;
+      return filterTime(currentTime.hours, minute);
+    },
+    [filterTime, currentTime.hours]
+  );
   const handleSelect = useCallback(
     (minute) => {
       if (isDisabled || isReadOnly) return;
+      if (isMinuteDisabled(minute)) return;
       ctx.setTime({ minutes: minute });
     },
-    [ctx, isDisabled, isReadOnly]
+    [ctx, isDisabled, isReadOnly, isMinuteDisabled]
   );
   const { listRef, handleKeyDown } = useListboxNavigation({
     items: minutes,
@@ -1777,13 +2076,14 @@ function TimePickerMinuteList({ classNames, ...props }) {
       ...props,
       children: minutes.map((minute) => {
         const isSelected = minute === currentTime.minutes;
+        const isMinuteFullyDisabled = isMinuteDisabled(minute);
         const optionClass = [classNames?.option, isSelected && classNames?.optionSelected].filter(Boolean).join(" ") || void 0;
         return /* @__PURE__ */ jsx(
           "li",
           {
             role: "option",
             "aria-selected": isSelected,
-            "aria-disabled": isDisabled || void 0,
+            "aria-disabled": isDisabled || isMinuteFullyDisabled || void 0,
             "aria-label": ctx.labels.minuteOption(minute),
             "data-selected": isSelected || void 0,
             tabIndex: isSelected ? 0 : -1,
@@ -1800,29 +2100,70 @@ function TimePickerMinuteList({ classNames, ...props }) {
 }
 function TimePickerAmPmToggle({ classNames, ...props }) {
   const ctx = useTimePickerContext("TimePicker.AmPmToggle");
-  if (ctx.format !== "12h") return null;
-  const { period, hours12 } = to12Hour(ctx.currentTime.hours);
+  const amRef = useRef(null);
+  const pmRef = useRef(null);
   const setPeriod = useCallback(
     (newPeriod) => {
       if (ctx.isDisabled || ctx.isReadOnly) return;
+      const { hours12 } = to12Hour(ctx.currentTime.hours);
       const newHours24 = to24Hour(hours12, newPeriod);
       ctx.setTime({ hours: newHours24 });
     },
-    [hours12, ctx]
+    [ctx]
   );
+  if (ctx.format !== "12h") return null;
+  const { period } = to12Hour(ctx.currentTime.hours);
+  const focusOther = (target) => {
+    (target === "AM" ? amRef : pmRef).current?.focus();
+  };
+  const handleKeyDown = (e, target) => {
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+      case "ArrowLeft":
+      case "ArrowUp": {
+        e.preventDefault();
+        const next = target === "AM" ? "PM" : "AM";
+        setPeriod(next);
+        focusOther(next);
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        setPeriod("AM");
+        focusOther("AM");
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        setPeriod("PM");
+        focusOther("PM");
+        break;
+      }
+      case " ":
+      case "Enter": {
+        e.preventDefault();
+        setPeriod(target);
+        break;
+      }
+    }
+  };
   const renderButton = (target) => {
     const isSelected = period === target;
     const optionClass = [classNames?.option, isSelected && classNames?.optionSelected].filter(Boolean).join(" ") || void 0;
     return /* @__PURE__ */ jsx(
       "button",
       {
+        ref: target === "AM" ? amRef : pmRef,
         type: "button",
         role: "radio",
         "aria-checked": isSelected,
+        tabIndex: isSelected ? 0 : -1,
         "data-selected": isSelected || void 0,
         disabled: ctx.isDisabled,
         className: optionClass,
         onClick: () => setPeriod(target),
+        onKeyDown: (e) => handleKeyDown(e, target),
         children: target
       }
     );
@@ -1849,9 +2190,6 @@ var TimePicker = Object.assign(TimePickerRoot, {
   MinuteList: TimePickerMinuteList,
   AmPmToggle: TimePickerAmPmToggle
 });
-function getDefaultIso2() {
-  return DateFnsAdapter.today();
-}
 function DateTimePickerRoot({
   value: controlledValue,
   defaultValue,
@@ -1860,6 +2198,8 @@ function DateTimePickerRoot({
   onCalendarNavigate,
   format = "24h",
   step = 1,
+  withSeconds = false,
+  filterTime,
   disabled = false,
   readOnly = false,
   weekStartsOn = 0,
@@ -1887,10 +2227,10 @@ function DateTimePickerRoot({
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
   const [isOpen, setIsOpen] = useState(false);
   const [viewMonth, setViewMonth] = useState(
-    currentValue ?? adapter.today(displayTimezone)
+    () => currentValue ?? adapter.today(displayTimezone)
   );
   const [focusedDate, setFocusedDate] = useState(
-    currentValue ?? adapter.today(displayTimezone)
+    () => currentValue ?? adapter.today(displayTimezone)
   );
   useChangeEffect(isOpen, onOpenChange);
   const viewMonthStart = useMemo(() => adapter.startOfMonth(viewMonth), [viewMonth, adapter]);
@@ -1900,11 +2240,10 @@ function DateTimePickerRoot({
     () => Array.isArray(disabled) ? disabled : [],
     [disabled]
   );
-  const baseIso = currentValue ?? getDefaultIso2();
-  const currentTime = useMemo(
-    () => displayTimezone ? getTimeInTimezone(baseIso, displayTimezone) : getTime(baseIso),
-    [baseIso, displayTimezone]
-  );
+  const currentTime = useMemo(() => {
+    if (!currentValue) return { hours: 0, minutes: 0, seconds: 0 };
+    return displayTimezone ? getTimeInTimezone(currentValue, displayTimezone) : getTime(currentValue);
+  }, [currentValue, displayTimezone]);
   const updateValue = useCallback(
     (next) => {
       if (isDisabled || readOnly) return;
@@ -1930,11 +2269,11 @@ function DateTimePickerRoot({
   );
   const setTime$1 = useCallback(
     (partial) => {
-      const base = currentValue ?? getDefaultIso2();
+      const base = currentValue ?? adapter.today(displayTimezone);
       const merged = displayTimezone ? setTimeInTimezone(base, partial, displayTimezone) : setTime(base, partial);
       updateValue(merged);
     },
-    [currentValue, updateValue, displayTimezone]
+    [currentValue, updateValue, displayTimezone, adapter]
   );
   const open = useCallback(() => {
     if (isDisabled || readOnly) return;
@@ -2001,25 +2340,28 @@ function DateTimePickerRoot({
       setTime: setTime$1,
       format,
       step,
-      withSeconds: false,
+      withSeconds,
       displayTimezone,
       isDisabled,
       isReadOnly: readOnly,
       currentTime,
       pickerId,
-      labels: mergedTimeLabels
+      labels: mergedTimeLabels,
+      filterTime
     }),
     [
       currentValue,
       setTime$1,
       format,
       step,
+      withSeconds,
       displayTimezone,
       isDisabled,
       readOnly,
       currentTime,
       pickerId,
-      mergedTimeLabels
+      mergedTimeLabels,
+      filterTime
     ]
   );
   return /* @__PURE__ */ jsx(DatePickerContext.Provider, { value: dateContext, children: /* @__PURE__ */ jsx(TimePickerContext.Provider, { value: timeContext, children }) });
@@ -2048,6 +2390,8 @@ var DateTimePickerInput = forwardRef(
       (e) => {
         if (e.key === "Escape") {
           ctx.close();
+        } else if (e.key === "Enter" && ctx.isOpen) {
+          e.preventDefault();
         } else if (e.key === "ArrowDown" && !ctx.isOpen) {
           e.preventDefault();
           ctx.open();
@@ -2083,6 +2427,7 @@ var DateTimePickerInput = forwardRef(
     );
   }
 );
+DateTimePickerInput.displayName = "DateTimePicker.Input";
 
 // src/components/DateTimePicker/index.ts
 var DateTimePicker = Object.assign(DateTimePickerRoot, {
@@ -2101,7 +2446,7 @@ function MonthPickerRoot(props) {
 }
 function MonthPickerGrid({ classNames, ...props }) {
   const ctx = useDatePickerContext("MonthPicker.Grid");
-  const { adapter, viewMonth, locale, value, displayTimezone, labels } = ctx;
+  const { adapter, viewMonth, locale, value, displayTimezone, labels, disabled } = ctx;
   const currentYear = adapter.getYear(viewMonth);
   const [valueYear, valueMonthZeroBased] = useMemo(() => {
     if (!value) return [null, null];
@@ -2112,9 +2457,19 @@ function MonthPickerGrid({ classNames, ...props }) {
       return [null, null];
     }
   }, [value, adapter, displayTimezone]);
-  const today = adapter.today(displayTimezone);
-  const todayYear = adapter.getYear(today);
-  const todayMonth = adapter.getMonth(today);
+  const [today, setToday] = useState(null);
+  useEffect(() => {
+    setToday(adapter.today(displayTimezone));
+  }, [adapter, displayTimezone]);
+  const todayYear = today !== null ? adapter.getYear(today) : -1;
+  const todayMonth = today !== null ? adapter.getMonth(today) : -1;
+  const monthDisabledFlags = useMemo(
+    () => Array.from({ length: 12 }, (_, i) => {
+      const monthStart = new Date(Date.UTC(currentYear, i, 1)).toISOString();
+      return isRangeFullyDisabled(monthStart, adapter.endOfMonth(monthStart), disabled, adapter);
+    }),
+    [currentYear, disabled, adapter]
+  );
   const navigateYear = useCallback(
     (direction) => {
       ctx.setViewMonth(adapter.addYears(viewMonth, direction));
@@ -2123,17 +2478,23 @@ function MonthPickerGrid({ classNames, ...props }) {
   );
   const handleMonthSelect = useCallback(
     (monthIndex) => {
+      if (monthDisabledFlags[monthIndex]) return;
       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
-  }));
+    [currentYear, ctx, monthDisabledFlags]
+  );
+  const naturalIndex = valueYear === currentYear && valueMonthZeroBased !== null ? valueMonthZeroBased : adapter.getMonth(viewMonth);
+  const firstEnabled = monthDisabledFlags.findIndex((d) => !d);
+  const initialIndex = monthDisabledFlags[naturalIndex] ? firstEnabled === -1 ? naturalIndex : firstEnabled : naturalIndex;
+  const { gridRef, focusedIndex, handleKeyDown } = useGridState({
+    initialIndex,
+    disabledFlags: monthDisabledFlags,
+    onSelect: handleMonthSelect,
+    onPageUp: () => navigateYear(-1),
+    onPageDown: () => navigateYear(1),
+    onEscape: ctx.close
+  });
   return /* @__PURE__ */ jsxs("div", { className: classNames?.root, ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames?.header, children: [
       /* @__PURE__ */ jsx(
@@ -2158,37 +2519,57 @@ function MonthPickerGrid({ classNames, ...props }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": `${currentYear} months`, className: classNames?.grid, children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsx(
+    /* @__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
-    )) })
+        ref: gridRef,
+        role: "grid",
+        "aria-label": `${currentYear} months`,
+        className: classNames?.grid,
+        onKeyDown: handleKeyDown,
+        children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "row",
+            className: classNames?.gridRow,
+            style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
+            children: Array.from({ length: 3 }, (_2, col) => {
+              const i = rowIndex * 3 + col;
+              const isSelected = valueYear === currentYear && valueMonthZeroBased === i;
+              const isCurrent = todayYear === currentYear && todayMonth === i;
+              const isFocused = i === focusedIndex;
+              const isDisabled = monthDisabledFlags[i] ?? false;
+              const cls = [
+                classNames?.month,
+                isSelected && classNames?.monthSelected,
+                isCurrent && classNames?.monthCurrent,
+                isDisabled && classNames?.monthDisabled
+              ].filter(Boolean).join(" ") || void 0;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "gridcell",
+                  tabIndex: isFocused ? 0 : -1,
+                  disabled: isDisabled,
+                  "aria-selected": isSelected || void 0,
+                  "aria-disabled": isDisabled || void 0,
+                  "aria-current": isCurrent ? "date" : void 0,
+                  "data-selected": isSelected || void 0,
+                  "data-current": isCurrent || void 0,
+                  "data-focused": isFocused || void 0,
+                  className: cls,
+                  onClick: () => handleMonthSelect(i),
+                  children: getMonthName(i, locale)
+                },
+                i
+              );
+            })
+          },
+          rowIndex
+        ))
+      }
+    )
   ] });
 }
 
@@ -2205,7 +2586,7 @@ function YearPickerRoot(props) {
 }
 function YearPickerGrid({ classNames, ...props }) {
   const ctx = useDatePickerContext("YearPicker.Grid");
-  const { adapter, viewMonth, value, displayTimezone, labels } = ctx;
+  const { adapter, viewMonth, value, displayTimezone, labels, disabled } = ctx;
   const currentYear = adapter.getYear(viewMonth);
   const decadeStart = currentYear - currentYear % 12;
   const valueYear = useMemo(() => {
@@ -2216,7 +2597,20 @@ function YearPickerGrid({ classNames, ...props }) {
       return null;
     }
   }, [value, adapter, displayTimezone]);
-  const todayYear = adapter.getYear(adapter.today(displayTimezone));
+  const [today, setToday] = useState(null);
+  useEffect(() => {
+    setToday(adapter.today(displayTimezone));
+  }, [adapter, displayTimezone]);
+  const todayYear = today !== null ? adapter.getYear(today) : -1;
+  const yearDisabledFlags = useMemo(
+    () => Array.from({ length: 12 }, (_, i) => {
+      const year = decadeStart + i;
+      const yearStart = new Date(Date.UTC(year, 0, 1)).toISOString();
+      const yearEnd = new Date(Date.UTC(year, 11, 31, 23, 59, 59, 999)).toISOString();
+      return isRangeFullyDisabled(yearStart, yearEnd, disabled, adapter);
+    }),
+    [decadeStart, disabled, adapter]
+  );
   const navigateDecade = useCallback(
     (direction) => {
       ctx.setViewMonth(adapter.addYears(viewMonth, direction * 12));
@@ -2224,19 +2618,24 @@ function YearPickerGrid({ classNames, ...props }) {
     [adapter, viewMonth, ctx]
   );
   const handleYearSelect = useCallback(
-    (year) => {
+    (indexInDecade) => {
+      if (yearDisabledFlags[indexInDecade]) return;
+      const year = decadeStart + indexInDecade;
       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
-    };
+    [ctx, decadeStart, yearDisabledFlags]
+  );
+  const naturalIndex = valueYear !== null && valueYear >= decadeStart && valueYear <= decadeStart + 11 ? valueYear - decadeStart : currentYear - decadeStart;
+  const firstEnabled = yearDisabledFlags.findIndex((d) => !d);
+  const initialIndex = yearDisabledFlags[naturalIndex] ? firstEnabled === -1 ? naturalIndex : firstEnabled : naturalIndex;
+  const { gridRef, focusedIndex, handleKeyDown } = useGridState({
+    initialIndex,
+    disabledFlags: yearDisabledFlags,
+    onSelect: handleYearSelect,
+    onPageUp: () => navigateDecade(-1),
+    onPageDown: () => navigateDecade(1),
+    onEscape: ctx.close
   });
   const rangeLabel = `${decadeStart}\u2013${decadeStart + 11}`;
   return /* @__PURE__ */ jsxs("div", { className: classNames?.root, ...props, children: [
@@ -2263,37 +2662,58 @@ function YearPickerGrid({ classNames, ...props }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": rangeLabel, className: classNames?.grid, children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsx(
+    /* @__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
-    )) })
+        ref: gridRef,
+        role: "grid",
+        "aria-label": rangeLabel,
+        className: classNames?.grid,
+        onKeyDown: handleKeyDown,
+        children: Array.from({ length: 4 }, (_, rowIndex) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "row",
+            className: classNames?.gridRow,
+            style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" },
+            children: Array.from({ length: 3 }, (_2, col) => {
+              const i = rowIndex * 3 + col;
+              const year = decadeStart + i;
+              const isSelected = year === valueYear;
+              const isCurrent = year === todayYear;
+              const isFocused = i === focusedIndex;
+              const isDisabled = yearDisabledFlags[i] ?? false;
+              const cls = [
+                classNames?.year,
+                isSelected && classNames?.yearSelected,
+                isCurrent && classNames?.yearCurrent,
+                isDisabled && classNames?.yearDisabled
+              ].filter(Boolean).join(" ") || void 0;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "gridcell",
+                  tabIndex: isFocused ? 0 : -1,
+                  disabled: isDisabled,
+                  "aria-selected": isSelected || void 0,
+                  "aria-disabled": isDisabled || void 0,
+                  "aria-current": isCurrent ? "date" : void 0,
+                  "data-selected": isSelected || void 0,
+                  "data-current": isCurrent || void 0,
+                  "data-focused": isFocused || void 0,
+                  className: cls,
+                  onClick: () => handleYearSelect(i),
+                  children: year
+                },
+                i
+              );
+            })
+          },
+          rowIndex
+        ))
+      }
+    )
   ] });
 }
 
@@ -2514,7 +2934,7 @@ function useRangePicker(options = {}) {
     adapter
   };
 }
-function getDefaultIso3() {
+function getDefaultIso() {
   return DateFnsAdapter.today();
 }
 function useTimePicker(options = {}) {
@@ -2532,7 +2952,7 @@ function useTimePicker(options = {}) {
     defaultValue ?? null
   );
   const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
-  const baseIso = currentValue ?? getDefaultIso3();
+  const baseIso = currentValue ?? getDefaultIso();
   const currentTime = useMemo(
     () => displayTimezone ? getTimeInTimezone(baseIso, displayTimezone) : getTime(baseIso),
     [baseIso, displayTimezone]