@kalyx/react 1.0.0-rc.0 → 1.0.0-rc.2

package/dist/index.js

@@ -1,8 +1,9 @@
-import { createContext, forwardRef, useState, useCallback, useContext, useId, useRef, useMemo, useEffect } from 'react';
+"use client";
+import { createContext, forwardRef, useState, useRef, useCallback, useContext, useId, 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';
+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,11 @@ 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);
     let formattedValue = "";
     if (ctx.value) {
       try {
@@ -170,47 +172,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 +235,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 +294,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,13 +325,20 @@ var DatePickerTrigger = forwardRef(
     );
   }
 );
-function usePopover({ isOpen, close, referenceRef, placement = "bottom-start" }) {
+DatePickerTrigger.displayName = "DatePicker.Trigger";
+var POPOVER_MIDDLEWARE = [offset(4), flip(), shift({ padding: 8 })];
+function usePopover({
+  isOpen,
+  close,
+  referenceRef,
+  placement = "bottom-start"
+}) {
   const floatingRef = useRef(null);
   const previousFocusRef = useRef(null);
-  const { refs, floatingStyles } = useFloating({
+  const { refs, floatingStyles, isPositioned } = useFloating({
     open: isOpen,
     placement,
-    middleware: [offset(4), flip(), shift({ padding: 8 })],
+    middleware: POPOVER_MIDDLEWARE,
     whileElementsMounted: autoUpdate
   });
   useEffect(() => {
@@ -354,21 +385,46 @@ function usePopover({ isOpen, close, referenceRef, placement = "bottom-start" })
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, close]);
-  const setFloatingRef = (node) => {
-    floatingRef.current = node;
-    refs.setFloating(node);
-  };
-  return { floatingStyles, setFloatingRef };
+  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;
+      refs.setFloating(node);
+      if (node && referenceRef.current) {
+        refs.setReference(referenceRef.current);
+      }
+    },
+    [refs, referenceRef]
+  );
+  return { floatingStyles, setFloatingRef, isPositioned };
 }
 function DatePickerPopover({ children, ...props }) {
   const ctx = useDatePickerContext("DatePicker.Popover");
   const calendarId = `${ctx.pickerId}-calendar`;
-  const { floatingStyles, setFloatingRef } = usePopover({
+  const { floatingStyles, setFloatingRef, isPositioned } = usePopover({
     isOpen: ctx.isOpen,
     close: ctx.close,
     referenceRef: ctx.referenceRef
   });
   if (!ctx.isOpen) return null;
+  const { style: userStyle, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -377,8 +433,12 @@ function DatePickerPopover({ children, ...props }) {
       role: "dialog",
       "aria-label": ctx.labels.popoverLabel,
       "aria-modal": "false",
-      style: floatingStyles,
-      ...props,
+      ...rest,
+      style: {
+        ...userStyle,
+        ...floatingStyles,
+        visibility: isPositioned ? void 0 : "hidden"
+      },
       children
     }
   );
@@ -401,27 +461,32 @@ var srOnly = {
   whiteSpace: "nowrap",
   border: 0
 };
-function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
+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, 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
+    }),
+    [viewMonth, adapter, weekStartsOn, ctx.value, focusedDate, disabled, displayTimezone]
+  );
   const year = adapter.getYear(viewMonth);
   const month = adapter.getMonth(viewMonth);
   const title = formatMonthYear(year, month, locale);
   useEffect(() => {
     if (!ctx.isOpen || !gridRef.current) return;
-    const focusedButton = gridRef.current.querySelector(
-      '[data-focused="true"]'
-    );
+    const focusedButton = gridRef.current.querySelector('[data-focused="true"]');
     focusedButton?.focus({ preventScroll: true });
   }, [focusedDate, ctx.isOpen]);
   const navigateMonth = useCallback(
@@ -495,6 +560,15 @@ function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
       }
       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);
@@ -542,56 +616,69 @@ function DatePickerCalendar({ classNames, onTitleClick, ...props }) {
         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(
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { role: "row", "aria-rowindex": 1, children: weekdays.map((day, colIndex) => /* @__PURE__ */ jsx(
             "th",
             {
               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__ */ 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",
-              {
-                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",
+          /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx(
+            "tr",
+            {
+              role: "row",
+              "aria-rowindex": weekIndex + 2,
+              className: classNames?.gridRow,
+              children: 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",
                   {
-                    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)) })
+                    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
+          )) })
         ]
       }
     ),
@@ -644,15 +731,7 @@ function DatePickerMonthGrid({
           children: "<"
         }
       ),
-      onTitleClick ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: classNames?.title,
-          onClick: onTitleClick,
-          children: currentYear
-        }
-      ) : /* @__PURE__ */ jsx("span", { className: classNames?.title, children: currentYear }),
+      onTitleClick ? /* @__PURE__ */ jsx("button", { type: "button", className: classNames?.title, onClick: onTitleClick, children: currentYear }) : /* @__PURE__ */ jsx("span", { className: classNames?.title, children: currentYear }),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -697,11 +776,7 @@ function DatePickerMonthGrid({
     )
   ] });
 }
-function DatePickerYearGrid({
-  classNames,
-  onSelect,
-  ...props
-}) {
+function DatePickerYearGrid({ classNames, onSelect, ...props }) {
   const ctx = useDatePickerContext("DatePicker.YearGrid");
   const { adapter, viewMonth } = ctx;
   const currentYear = adapter.getYear(viewMonth);
@@ -795,16 +870,7 @@ 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
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": ctx.labels.popoverLabel, className: classNames?.root, ...props, children });
 }
 function resolveDatePreset(key, today, adapter) {
   switch (key) {
@@ -858,11 +924,7 @@ function DatePickerPreset({
     if (directDate) {
       target = directDate;
     } else if (presetKey) {
-      target = resolveDatePreset(
-        presetKey,
-        ctx.adapter.today(ctx.displayTimezone),
-        ctx.adapter
-      );
+      target = resolveDatePreset(presetKey, ctx.adapter.today(ctx.displayTimezone), ctx.adapter);
     } else {
       return false;
     }
@@ -937,10 +999,10 @@ function RangePickerRoot({
   const [selectingTarget, setSelectingTarget] = useState("start");
   const [hoverDate, setHoverDate] = useState(null);
   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]);
@@ -1090,6 +1152,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();
@@ -1126,15 +1190,17 @@ var RangePickerInput = forwardRef(
     );
   }
 );
+RangePickerInput.displayName = "RangePicker.Input";
 function RangePickerPopover({ children, ...props }) {
   const ctx = useRangePickerContext("RangePicker.Popover");
   const calendarId = `${ctx.pickerId}-calendar`;
-  const { floatingStyles, setFloatingRef } = usePopover({
+  const { floatingStyles, setFloatingRef, isPositioned } = usePopover({
     isOpen: ctx.isOpen,
     close: ctx.close,
     referenceRef: ctx.referenceRef
   });
   if (!ctx.isOpen) return null;
+  const { style: userStyle, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1143,8 +1209,12 @@ function RangePickerPopover({ children, ...props }) {
       role: "dialog",
       "aria-label": ctx.labels.popoverLabel,
       "aria-modal": "false",
-      style: floatingStyles,
-      ...props,
+      ...rest,
+      style: {
+        ...userStyle,
+        ...floatingStyles,
+        visibility: isPositioned ? void 0 : "hidden"
+      },
       children
     }
   );
@@ -1187,23 +1257,24 @@ 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
+    }),
+    [viewMonth, adapter, weekStartsOn, focusedDate, disabled, value, hoverDate, displayTimezone]
+  );
   const year = adapter.getYear(viewMonth);
   const month = adapter.getMonth(viewMonth);
   const title = formatMonthYear(year, month, locale);
   useEffect(() => {
     if (!ctx.isOpen || !gridRef.current) return;
-    const focusedButton = gridRef.current.querySelector(
-      '[data-focused="true"]'
-    );
+    const focusedButton = gridRef.current.querySelector('[data-focused="true"]');
     focusedButton?.focus({ preventScroll: true });
   }, [focusedDate, ctx.isOpen]);
   const navigateMonth = useCallback(
@@ -1297,6 +1368,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);
@@ -1306,7 +1384,18 @@ function RangePickerCalendar({
         }
       }
     },
-    [adapter, focusedDate, viewMonth, weekStartsOn, disabled, ctx, selectionMode, selectingTarget, value.start, commitDay]
+    [
+      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: [
@@ -1339,62 +1428,75 @@ function RangePickerCalendar({
         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(
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { role: "row", "aria-rowindex": 1, children: weekdays.map((day, colIndex) => /* @__PURE__ */ jsx(
             "th",
             {
               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__ */ 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",
-              {
-                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",
+          /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx(
+            "tr",
+            {
+              role: "row",
+              "aria-rowindex": weekIndex + 2,
+              className: classNames?.gridRow,
+              children: 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",
                   {
-                    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)) })
+                    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
+          )) })
         ]
       }
     ),
@@ -1443,9 +1545,7 @@ function resolvePreset(key, today, adapter) {
     }
     case "thisYear": {
       const currentMonth = new Date(today).getUTCMonth();
-      const yearStart = adapter.startOfMonth(
-        adapter.addMonths(today, -currentMonth)
-      );
+      const yearStart = adapter.startOfMonth(adapter.addMonths(today, -currentMonth));
       return { start: yearStart, end: today };
     }
   }
@@ -1581,7 +1681,19 @@ function TimePickerRoot({
       pickerId,
       labels: mergedLabels
     }),
-    [currentValue, setTime$1, format, step, withSeconds, displayTimezone, 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 });
 }
@@ -1598,12 +1710,9 @@ var TimePickerInput = forwardRef(
       }
       setInputText(null);
     }, [inputText, ctx]);
-    const handleChange = useCallback(
-      (e) => {
-        setInputText(e.target.value);
-      },
-      []
-    );
+    const handleChange = useCallback((e) => {
+      setInputText(e.target.value);
+    }, []);
     const handleBlur = useCallback(
       (e) => {
         commitInput();
@@ -1640,6 +1749,7 @@ var TimePickerInput = forwardRef(
     );
   }
 );
+TimePickerInput.displayName = "TimePicker.Input";
 function useListboxNavigation({
   items,
   onSelect,
@@ -1676,9 +1786,7 @@ function useListboxNavigation({
         onSelect(target);
         cancelAnimationFrame(rafIdRef.current);
         rafIdRef.current = requestAnimationFrame(() => {
-          const next = listRef.current?.querySelector(
-            '[data-selected="true"]'
-          );
+          const next = listRef.current?.querySelector('[data-selected="true"]');
           next?.focus();
         });
       }
@@ -1690,7 +1798,7 @@ function useListboxNavigation({
 function TimePickerHourList({ classNames, ...props }) {
   const ctx = useTimePickerContext("TimePicker.HourList");
   const { format, currentTime, isDisabled, isReadOnly } = ctx;
-  const hours = generateHours(format);
+  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 handleSelect = useCallback(
@@ -1741,7 +1849,7 @@ function TimePickerHourList({ classNames, ...props }) {
 function TimePickerMinuteList({ classNames, ...props }) {
   const ctx = useTimePickerContext("TimePicker.MinuteList");
   const { step, currentTime, isDisabled, isReadOnly } = ctx;
-  const minutes = generateMinutes(step);
+  const minutes = useMemo(() => generateMinutes(step), [step]);
   const handleSelect = useCallback(
     (minute) => {
       if (isDisabled || isReadOnly) return;
@@ -1815,10 +1923,19 @@ function TimePickerAmPmToggle({ classNames, ...props }) {
       }
     );
   };
-  return /* @__PURE__ */ jsxs("div", { role: "radiogroup", "aria-label": ctx.labels.amPmToggle, className: classNames?.root, ...props, children: [
-    renderButton("AM"),
-    renderButton("PM")
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ctx.labels.amPmToggle,
+      className: classNames?.root,
+      ...props,
+      children: [
+        renderButton("AM"),
+        renderButton("PM")
+      ]
+    }
+  );
 }
 
 // src/components/TimePicker/index.ts
@@ -1866,10 +1983,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]);
@@ -1988,7 +2105,18 @@ function DateTimePickerRoot({
       pickerId,
       labels: mergedTimeLabels
     }),
-    [currentValue, setTime$1, format, step, displayTimezone, 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 }) });
 }
@@ -2016,6 +2144,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();
@@ -2051,6 +2181,7 @@ var DateTimePickerInput = forwardRef(
     );
   }
 );
+DateTimePickerInput.displayName = "DateTimePicker.Input";
 
 // src/components/DateTimePicker/index.ts
 var DateTimePicker = Object.assign(DateTimePickerRoot, {
@@ -2067,10 +2198,7 @@ function MonthPickerRoot(props) {
   const displayFormat = props.displayFormat ?? "yyyy-MM";
   return /* @__PURE__ */ jsx(DatePickerRoot, { ...props, displayFormat });
 }
-function MonthPickerGrid({
-  classNames,
-  ...props
-}) {
+function MonthPickerGrid({ classNames, ...props }) {
   const ctx = useDatePickerContext("MonthPicker.Grid");
   const { adapter, viewMonth, locale, value, displayTimezone, labels } = ctx;
   const currentYear = adapter.getYear(viewMonth);
@@ -2094,9 +2222,7 @@ function MonthPickerGrid({
   );
   const handleMonthSelect = useCallback(
     (monthIndex) => {
-      const target = new Date(
-        Date.UTC(currentYear, monthIndex, 1)
-      ).toISOString();
+      const target = new Date(Date.UTC(currentYear, monthIndex, 1)).toISOString();
       ctx.selectDate(target);
     },
     [currentYear, ctx]
@@ -2131,45 +2257,37 @@ function MonthPickerGrid({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": `${currentYear} months`, className: classNames?.grid, children: Array.from({ length: 4 }, (_, rowIndex) => /* @__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
-        ))
-      }
-    )
+        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
+    )) })
   ] });
 }
 
@@ -2244,45 +2362,37 @@ function YearPickerGrid({ classNames, ...props }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": rangeLabel, className: classNames?.grid, children: Array.from({ length: 4 }, (_, rowIndex) => /* @__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
-        ))
-      }
-    )
+        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
+    )) })
   ] });
 }
 
@@ -2545,14 +2655,8 @@ function useTimePicker(options = {}) {
     },
     [format, period, setTime$1]
   );
-  const setMinute = useCallback(
-    (minute) => setTime$1({ minutes: minute }),
-    [setTime$1]
-  );
-  const setSecond = useCallback(
-    (second) => setTime$1({ seconds: second }),
-    [setTime$1]
-  );
+  const setMinute = useCallback((minute) => setTime$1({ minutes: minute }), [setTime$1]);
+  const setSecond = useCallback((second) => setTime$1({ seconds: second }), [setTime$1]);
   const setPeriod = useCallback(
     (newPeriod) => {
       if (format !== "12h") return;