@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/esm/fields/DatePicker/parts.mjs

@@ -1,17 +1,12 @@
 import { Calendar, ChevronLeft, ChevronRight, X } from "@tamagui/lucide-icons-2";
-import { ensureFocusVisibleRing, formatAbsoluteDate, getMonthNames, useResolvedKnobs } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, formatAbsoluteDate, getMonthNames, useAccentOnSurface, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AnimatePresence, Text, View, isWeb } from "tamagui";
-import { Button } from "../../Button/index.mjs";
 import { FloatingPanel } from "../../FloatingPanel/index.mjs";
-import { FocusContext, Input as InputParts } from "../../InputParts/index.mjs";
+import { Input as InputParts } from "../../InputParts/index.mjs";
 import { formCommonColors } from "../../shared/colorRamps.mjs";
 import { t } from "../../shared/t.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-const suppressBoxFocusRing = {
-  focused: false,
-  setFocused: _val => {}
-};
 const weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 const yearPageSize = 12;
@@ -92,26 +87,354 @@ function isSameDay(a, b) {
   return a.toDateString() === b.toDateString();
 }
 function dayCellRadius(knobProps) {
-  return knobProps.pointy ? {
+  return {
     style: {
-      borderRadius: 0
+      borderRadius: knobProps.pointy ? 0 : 9999
+    }
+  };
+}
+function useCalendarKnobs() {
+  return useResolvedKnobs({
+    compact: true
+  });
+}
+function CalendarPanelFrame({
+  children
+}) {
+  const {
+    knobProps
+  } = useCalendarKnobs();
+  const {
+    px
+  } = knobProps.nestedControl;
+  return /* @__PURE__ */jsx(View, {
+    flexDirection: "column",
+    alignItems: "center",
+    ...knobProps.gap,
+    width: px * 7,
+    alignSelf: "center",
+    ...knobProps.panelPadding,
+    "data-testid": "date-picker-calendar",
+    children
+  });
+}
+function splitNestedControl(nested) {
+  const {
+    px,
+    hitSlop,
+    ...box
+  } = nested;
+  return {
+    px,
+    hitSlop,
+    box
+  };
+}
+function calendarKeyHandler(onPress) {
+  return e => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault?.();
+      onPress();
     }
-  } : void 0;
+  };
+}
+function CalendarChromeButton({
+  onPress,
+  label,
+  children
+}) {
+  const {
+    knobProps
+  } = useCalendarKnobs();
+  const {
+    hitSlop,
+    box
+  } = splitNestedControl(knobProps.nestedControl);
+  return /* @__PURE__ */jsx(View, {
+    ...box,
+    role: "button",
+    "aria-label": label,
+    cursor: "pointer",
+    alignItems: "center",
+    justifyContent: "center",
+    onPress,
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: ensureFocusVisibleRing(),
+    ...(!isWeb ? {
+      hitSlop
+    } : {}),
+    ...(isWeb ? {
+      tabIndex: 0,
+      onKeyDown: calendarKeyHandler(onPress)
+    } : {
+      accessible: true
+    }),
+    children
+  });
+}
+function CalendarTextButton({
+  onPress,
+  children
+}) {
+  return /* @__PURE__ */jsx(View, {
+    role: "button",
+    cursor: "pointer",
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+    onPress,
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: ensureFocusVisibleRing(),
+    ...(isWeb ? {
+      tabIndex: 0,
+      onKeyDown: calendarKeyHandler(onPress)
+    } : {
+      accessible: true
+    }),
+    children
+  });
+}
+function CalendarDaySlot({
+  children
+}) {
+  const {
+    knobProps
+  } = useCalendarKnobs();
+  const {
+    px
+  } = knobProps.nestedControl;
+  return /* @__PURE__ */jsx(View, {
+    width: px,
+    height: px,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+    children
+  });
+}
+function CalendarWeekRow({
+  children
+}) {
+  const {
+    knobProps
+  } = useCalendarKnobs();
+  const {
+    px
+  } = knobProps.nestedControl;
+  return /* @__PURE__ */jsx(View, {
+    flexDirection: "row",
+    width: px * 7,
+    children
+  });
+}
+function CalendarDayCell({
+  day,
+  selected,
+  today,
+  disabled,
+  visible = true,
+  dimmed,
+  tabIndex,
+  onPress,
+  onKeyDown,
+  selectedBackground
+}) {
+  const {
+    knobProps
+  } = useCalendarKnobs();
+  const accentText = useAccentOnSurface();
+  const {
+    px,
+    hitSlop,
+    box
+  } = splitNestedControl(knobProps.nestedControl);
+  if (!visible) {
+    return /* @__PURE__ */jsx(View, {
+      width: px,
+      height: px
+    });
+  }
+  const showTodayMark = !!today && !selected;
+  const resolvedTabIndex = tabIndex ?? (disabled ? -1 : 0);
+  return /* @__PURE__ */jsx(View, {
+    ...box,
+    ...dayCellRadius(knobProps),
+    role: "button",
+    "aria-label": String(day.getDate()),
+    "aria-disabled": disabled || void 0,
+    "aria-pressed": selected || void 0,
+    "aria-current": today ? "date" : void 0,
+    cursor: disabled ? "default" : "pointer",
+    alignItems: "center",
+    justifyContent: "center",
+    onPress: () => {
+      if (!disabled) onPress();
+    },
+    opacity: dimmed ? 0.45 : 1,
+    pointerEvents: disabled ? "none" : "auto",
+    backgroundColor: selected ? selectedBackground ?? "$background" : "transparent",
+    theme: selected ? "accent" : void 0,
+    borderWidth: showTodayMark ? 2 : 0,
+    borderColor: showTodayMark ? accentText : "transparent",
+    zIndex: 1,
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: ensureFocusVisibleRing({
+      outlineOffset: -2
+    }),
+    "data-nested-px": px,
+    "data-calendar-day": `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`,
+    ...(!isWeb ? {
+      hitSlop
+    } : {}),
+    ...(isWeb ? {
+      tabIndex: resolvedTabIndex,
+      onKeyDown: e => {
+        calendarKeyHandler(onPress)(e);
+        onKeyDown?.(e);
+      }
+    } : {
+      accessible: true
+    }),
+    children: /* @__PURE__ */jsx(Text, {
+      ...knobProps.label,
+      ...knobProps.textWeight,
+      fontWeight: selected ? "bold" : knobProps.textWeight.fontWeight,
+      color: selected ? void 0 : today ? accentText : formCommonColors.text,
+      children: day.getDate()
+    })
+  });
+}
+function CalendarDays({
+  calendarData,
+  minDate,
+  maxDate,
+  isSelected,
+  onSelect,
+  selectedBackground,
+  skipEmptyWeeks,
+  rangeStripe,
+  onToday
+}) {
+  const {
+    knobProps
+  } = useCalendarKnobs();
+  const {
+    animation,
+    animationKey
+  } = useDateAnimation(`${calendarData.year}-${calendarData.month}`);
+  const weeks = toWeeks(calendarData.days);
+  const {
+    px
+  } = knobProps.nestedControl;
+  const [focusedDay, setFocusedDay] = useState(() => {
+    const selected = calendarData.days.find(day => day.getMonth() === calendarData.month && isSelected(day));
+    const today = calendarData.days.find(day => day.getMonth() === calendarData.month && isSameDay(calendarData.today, day));
+    return selected ?? today ?? calendarData.days.find(day => day.getMonth() === calendarData.month) ?? null;
+  });
+  useEffect(() => {
+    const selected = calendarData.days.find(day => day.getMonth() === calendarData.month && isSelected(day));
+    const today = calendarData.days.find(day => day.getMonth() === calendarData.month && isSameDay(calendarData.today, day));
+    setFocusedDay(selected ?? today ?? calendarData.days.find(day => day.getMonth() === calendarData.month) ?? null);
+  }, [calendarData.year, calendarData.month]);
+  const moveFocus = useCallback((from, delta) => {
+    const idx = calendarData.days.findIndex(day => isSameDay(day, from));
+    const next = calendarData.days[idx + delta];
+    if (!next) return;
+    setFocusedDay(next);
+    if (!isWeb) return;
+    const key = `${next.getFullYear()}-${next.getMonth()}-${next.getDate()}`;
+    requestAnimationFrame(() => {
+      document.querySelector(`[data-calendar-day="${key}"]`)?.focus?.();
+    });
+  }, [calendarData.days]);
+  const todayOutOfRange = minDate != null && calendarData.today < minDate || maxDate != null && calendarData.today > maxDate;
+  return /* @__PURE__ */jsx(AnimatePresence, {
+    children: /* @__PURE__ */jsxs(View, {
+      transition: "medium",
+      ...animation,
+      alignSelf: "center",
+      gap: "$1",
+      width: px * 7,
+      role: "grid",
+      "aria-label": t("Calendar"),
+      children: [/* @__PURE__ */jsx(WeekView, {}), weeks.map(week => {
+        const hasCurrentMonthDay = week.some(d => d.getMonth() === calendarData.month);
+        if (skipEmptyWeeks && !hasCurrentMonthDay) {
+          return /* @__PURE__ */jsx(View, {
+            height: "$3"
+          }, week[0].toISOString());
+        }
+        return /* @__PURE__ */jsx(CalendarWeekRow, {
+          children: week.map(day => {
+            const key = day.toISOString();
+            const isCurrentMonth = day.getMonth() === calendarData.month;
+            const isToday = isSameDay(calendarData.today, day);
+            const isOutOfRange = minDate != null && day < minDate || maxDate != null && day > maxDate;
+            const isDisabled = isOutOfRange;
+            const cell = /* @__PURE__ */jsx(CalendarDayCell, {
+              day,
+              selected: isCurrentMonth && isSelected(day),
+              today: isToday,
+              disabled: isDisabled,
+              visible: true,
+              dimmed: !isCurrentMonth,
+              tabIndex: isSameDay(focusedDay, day) ? 0 : -1,
+              onPress: () => onSelect(day),
+              onKeyDown: e => {
+                const delta = e.key === "ArrowLeft" ? -1 : e.key === "ArrowRight" ? 1 : e.key === "ArrowUp" ? -7 : e.key === "ArrowDown" ? 7 : 0;
+                if (!delta) return;
+                e.preventDefault?.();
+                moveFocus(day, delta);
+              },
+              selectedBackground
+            });
+            if (!rangeStripe) {
+              return /* @__PURE__ */jsx(View, {
+                children: cell
+              }, key);
+            }
+            return /* @__PURE__ */jsxs(CalendarDaySlot, {
+              children: [rangeStripe(day), cell]
+            }, key);
+          })
+        }, week[0].toISOString());
+      }), onToday ? /* @__PURE__ */jsx(CalendarTextButton, {
+        onPress: todayOutOfRange ? () => {} : onToday,
+        children: /* @__PURE__ */jsx(Text, {
+          ...knobProps.label,
+          ...knobProps.textWeight,
+          color: todayOutOfRange ? formCommonColors.muted : formCommonColors.text,
+          opacity: todayOutOfRange ? 0.5 : 1,
+          children: t("Today")
+        })
+      }) : null]
+    })
+  }, animationKey);
 }
 function WeekView() {
   const {
     knobProps
-  } = useResolvedKnobs();
+  } = useCalendarKnobs();
+  const {
+    px
+  } = knobProps.nestedControl;
   return /* @__PURE__ */jsx(View, {
     flexDirection: "row",
-    ...knobProps.gap,
-    width: "100%",
+    width: px * 7,
+    alignSelf: "center",
     children: weekdays.map(day => /* @__PURE__ */jsx(Text, {
-      flex: 1,
+      width: px,
       textAlign: "center",
-      fontSize: knobProps.sizeToken,
       color: formCommonColors.muted,
-      ...knobProps.body,
+      ...knobProps.label,
       ...knobProps.textWeight,
       children: t(day)
     }, day))
@@ -129,62 +452,56 @@ function CalendarHeader({
 }) {
   const {
     knobProps
-  } = useResolvedKnobs();
+  } = useCalendarKnobs();
+  const {
+    px
+  } = knobProps.nestedControl;
   return /* @__PURE__ */jsxs(View, {
     flexDirection: "row",
-    width: "100%",
+    width: px * 7,
+    alignSelf: "center",
     alignItems: "center",
     justifyContent: "space-between",
-    children: [showPrev && onPrevMonth ? /* @__PURE__ */jsx(Button, {
-      circular: true,
-      size: knobProps.sizeToken,
-      chromeless: true,
-      scaleIcon: 1.5,
+    children: [showPrev && onPrevMonth ? /* @__PURE__ */jsx(CalendarChromeButton, {
       onPress: onPrevMonth,
-      "aria-label": t("Previous month"),
-      children: /* @__PURE__ */jsx(Button.Icon, {
-        children: /* @__PURE__ */jsx(ChevronLeft, {})
+      label: t("Previous month"),
+      children: /* @__PURE__ */jsx(ChevronLeft, {
+        size: 16
       })
     }) : /* @__PURE__ */jsx(View, {
-      width: "$3"
+      width: px,
+      height: px
     }), /* @__PURE__ */jsxs(View, {
-      flexDirection: "column",
+      flexDirection: "row",
       alignItems: "center",
-      children: [/* @__PURE__ */jsx(Button, {
-        onPress: onYearPress,
-        chromeless: true,
-        padding: 0,
-        children: /* @__PURE__ */jsx(Text, {
-          fontSize: knobProps.sizeToken,
-          color: formCommonColors.muted,
-          ...knobProps.body,
-          ...knobProps.textWeight,
-          children: year
-        })
-      }), /* @__PURE__ */jsx(Button, {
+      ...knobProps.gap,
+      children: [/* @__PURE__ */jsx(CalendarTextButton, {
         onPress: onMonthPress,
-        chromeless: true,
-        padding: 0,
         children: /* @__PURE__ */jsx(Text, {
-          fontSize: knobProps.sizeToken,
           color: "$color",
-          ...knobProps.body,
+          ...knobProps.label,
           ...knobProps.textWeight,
+          fontWeight: "600",
           children: monthName
         })
+      }), /* @__PURE__ */jsx(CalendarTextButton, {
+        onPress: onYearPress,
+        children: /* @__PURE__ */jsx(Text, {
+          color: formCommonColors.muted,
+          ...knobProps.label,
+          ...knobProps.textWeight,
+          children: year
+        })
       })]
-    }), showNext && onNextMonth ? /* @__PURE__ */jsx(Button, {
-      circular: true,
-      size: knobProps.sizeToken,
-      chromeless: true,
-      scaleIcon: 1.5,
+    }), showNext && onNextMonth ? /* @__PURE__ */jsx(CalendarChromeButton, {
       onPress: onNextMonth,
-      "aria-label": t("Next month"),
-      children: /* @__PURE__ */jsx(Button.Icon, {
-        children: /* @__PURE__ */jsx(ChevronRight, {})
+      label: t("Next month"),
+      children: /* @__PURE__ */jsx(ChevronRight, {
+        size: 16
       })
     }) : /* @__PURE__ */jsx(View, {
-      width: "$3"
+      width: px,
+      height: px
     })]
   });
 }
@@ -195,31 +512,62 @@ function MonthGrid({
 }) {
   const {
     knobProps
-  } = useResolvedKnobs();
+  } = useCalendarKnobs();
   const {
     animation,
     animationKey
   } = useDateAnimation(currentYear);
+  const {
+    px,
+    hitSlop,
+    box
+  } = splitNestedControl(knobProps.nestedControl);
+  const cellW = px * 7 / 3;
   return /* @__PURE__ */jsx(AnimatePresence, {
     children: /* @__PURE__ */jsx(View, {
       ...animation,
       transition: "quick",
       flexDirection: "row",
       flexWrap: "wrap",
-      ...knobProps.gap,
-      width: "100%",
+      width: px * 7,
+      alignSelf: "center",
       children: months.map((name, index) => {
         const isSelected = selectedMonth === index;
-        return /* @__PURE__ */jsx(Button, {
+        return /* @__PURE__ */jsx(View, {
+          ...box,
+          width: cellW,
+          maxWidth: cellW,
+          minWidth: cellW,
+          height: px,
+          minHeight: px,
+          maxHeight: px,
+          role: "button",
+          "aria-pressed": isSelected || void 0,
+          cursor: "pointer",
+          alignItems: "center",
+          justifyContent: "center",
           theme: isSelected ? "accent" : void 0,
-          borderRadius: knobProps.borderRadius.borderRadius,
-          flexBasis: "30%",
-          flexGrow: 1,
           backgroundColor: isSelected ? "$background" : "transparent",
-          chromeless: true,
-          padding: 0,
           onPress: () => onSelectMonth(index),
+          outlineWidth: 0,
+          focusStyle: {
+            outlineWidth: 0
+          },
+          focusVisibleStyle: ensureFocusVisibleRing({
+            outlineOffset: -2
+          }),
+          "data-nested-px": px,
+          ...(!isWeb ? {
+            hitSlop
+          } : {}),
+          ...(isWeb ? {
+            tabIndex: 0,
+            onKeyDown: calendarKeyHandler(() => onSelectMonth(index))
+          } : {
+            accessible: true
+          }),
           children: /* @__PURE__ */jsx(Text, {
+            ...knobProps.label,
             color: isSelected ? "$color" : formCommonColors.text,
             fontWeight: isSelected ? "bold" : "400",
             children: t(name.slice(0, 3))
@@ -238,7 +586,13 @@ function YearGrid({
 }) {
   const {
     knobProps
-  } = useResolvedKnobs();
+  } = useCalendarKnobs();
+  const {
+    px,
+    hitSlop,
+    box
+  } = splitNestedControl(knobProps.nestedControl);
+  const cellW = px * 7 / 3;
   const years = useMemo(() => {
     const result = [];
     for (let i = 0; i < yearPageSize; i++) {
@@ -251,37 +605,29 @@ function YearGrid({
     animationKey
   } = useDateAnimation(yearPageStart);
   return /* @__PURE__ */jsxs(View, {
-    width: "100%",
-    ...knobProps.gapLg,
+    width: px * 7,
+    alignSelf: "center",
+    ...knobProps.gap,
     children: [/* @__PURE__ */jsxs(View, {
       flexDirection: "row",
-      width: "100%",
+      width: px * 7,
       alignItems: "center",
       justifyContent: "space-between",
-      children: [/* @__PURE__ */jsx(Button, {
-        circular: true,
-        size: knobProps.sizeToken,
-        chromeless: true,
-        scaleIcon: 1.5,
+      children: [/* @__PURE__ */jsx(CalendarChromeButton, {
         onPress: onPrevPage,
-        "aria-label": t("Previous years"),
-        children: /* @__PURE__ */jsx(Button.Icon, {
-          children: /* @__PURE__ */jsx(ChevronLeft, {})
+        label: t("Previous years"),
+        children: /* @__PURE__ */jsx(ChevronLeft, {
+          size: 16
         })
       }), /* @__PURE__ */jsxs(Text, {
-        fontSize: knobProps.sizeToken,
-        ...knobProps.body,
+        ...knobProps.label,
         ...knobProps.textWeight,
         children: [years[0], " \u2013 ", years[years.length - 1]]
-      }), /* @__PURE__ */jsx(Button, {
-        circular: true,
-        size: knobProps.sizeToken,
-        chromeless: true,
-        scaleIcon: 1.5,
+      }), /* @__PURE__ */jsx(CalendarChromeButton, {
         onPress: onNextPage,
-        "aria-label": t("Next years"),
-        children: /* @__PURE__ */jsx(Button.Icon, {
-          children: /* @__PURE__ */jsx(ChevronRight, {})
+        label: t("Next years"),
+        children: /* @__PURE__ */jsx(ChevronRight, {
+          size: 16
         })
       })]
     }), /* @__PURE__ */jsx(AnimatePresence, {
@@ -290,20 +636,44 @@ function YearGrid({
         transition: "quick",
         flexDirection: "row",
         flexWrap: "wrap",
-        ...knobProps.gap,
-        width: "100%",
+        width: px * 7,
         children: years.map(year => {
           const isSelected = year === selectedYear;
-          return /* @__PURE__ */jsx(Button, {
+          return /* @__PURE__ */jsx(View, {
+            ...box,
+            width: cellW,
+            maxWidth: cellW,
+            minWidth: cellW,
+            height: px,
+            minHeight: px,
+            maxHeight: px,
+            role: "button",
+            "aria-pressed": isSelected || void 0,
+            cursor: "pointer",
+            alignItems: "center",
+            justifyContent: "center",
             theme: isSelected ? "accent" : void 0,
-            borderRadius: knobProps.borderRadius.borderRadius,
-            flexBasis: "30%",
-            flexGrow: 1,
             backgroundColor: isSelected ? "$background" : "transparent",
-            chromeless: true,
-            padding: 0,
             onPress: () => onSelectYear(year),
+            outlineWidth: 0,
+            focusStyle: {
+              outlineWidth: 0
+            },
+            focusVisibleStyle: ensureFocusVisibleRing({
+              outlineOffset: -2
+            }),
+            "data-nested-px": px,
+            ...(!isWeb ? {
+              hitSlop
+            } : {}),
+            ...(isWeb ? {
+              tabIndex: 0,
+              onKeyDown: calendarKeyHandler(() => onSelectYear(year))
+            } : {
+              accessible: true
+            }),
             children: /* @__PURE__ */jsx(Text, {
+              ...knobProps.label,
               color: isSelected ? "$color" : formCommonColors.text,
               fontWeight: isSelected ? "bold" : "400",
               children: year
@@ -314,27 +684,34 @@ function YearGrid({
     }, animationKey)]
   });
 }
-const DatePickerInputTrigger = InputParts.Area.styleable((triggerProps, ref) => {
-  const {
-    value,
-    onButtonPress,
-    onReset,
-    disabled,
-    placeholder,
-    error,
-    id,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    ...props
-  } = triggerProps;
-  const {
-    control
-  } = useResolvedKnobs();
-  const areaFocusRing = ensureFocusVisibleRing({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2
-  });
+function DatePickerInputTrigger({
+  value,
+  onButtonPress,
+  onReset,
+  disabled,
+  placeholder,
+  error,
+  id,
+  open,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-required": ariaRequired,
+  "aria-invalid": ariaInvalid
+}) {
+  const handleTriggerKey = e => {
+    if (disabled) return;
+    const key = e.key;
+    if (key === "Enter" || key === " " || key === "ArrowDown" || e.code === "Space") {
+      e.preventDefault?.();
+      onButtonPress();
+      return;
+    }
+    if ((key === "Backspace" || key === "Delete") && value) {
+      e.preventDefault?.();
+      onReset();
+    }
+  };
   return (
     // LC-40: the disabled Box below is pointerEvents-none, so the cursor
     // affordance must ride this wrapper — the fragment's not-allowed never
@@ -346,65 +723,57 @@ const DatePickerInputTrigger = InputParts.Area.styleable((triggerProps, ref) =>
       alignItems: "center",
       width: "100%",
       cursor: disabled ? "not-allowed" : "pointer",
-      children: /* @__PURE__ */jsx(View, {
-        flex: 1,
-        minWidth: 0,
+      children: /* @__PURE__ */jsxs(InputParts.Box, {
+        theme: error ? "red" : void 0,
+        elevation: void 0,
+        "data-testid": "date-picker-trigger",
+        id,
         onPress: isWeb && !disabled ? onButtonPress : void 0,
-        children: /* @__PURE__ */jsxs(InputParts.Box, {
-          theme: error ? "red" : void 0,
-          elevation: void 0,
-          onPress: isWeb && !disabled ? onButtonPress : void 0,
-          ...(disabled ? {
-            opacity: 0.5,
-            pointerEvents: "none"
-          } : void 0),
-          children: [/* @__PURE__ */jsx(InputParts.Section, {
-            children: /* @__PURE__ */jsx(FocusContext.Provider, {
-              ...suppressBoxFocusRing,
-              children: /* @__PURE__ */jsx(InputParts.Area, {
-                readOnly: true,
-                pointerEvents: "none",
-                value,
-                ref,
-                id,
-                placeholder,
-                disabled,
-                color: formCommonColors.text,
-                focusStyle: areaFocusRing,
-                focusVisibleStyle: areaFocusRing,
-                "aria-label": ariaLabel,
-                "aria-labelledby": ariaLabelledBy,
-                "aria-describedby": ariaDescribedBy,
-                onKeyPress: disabled ? void 0 : e => {
-                  const key = e?.nativeEvent?.key ?? e?.key;
-                  if (key === "Enter" || key === " " || key === "Spacebar") {
-                    e?.preventDefault?.();
-                    onButtonPress();
-                  }
-                },
-                ...props
-              })
-            })
-          }), /* @__PURE__ */jsx(InputParts.Section, {
-            children: value ? /* @__PURE__ */jsx(InputParts.Button, {
-              "aria-label": t("Clear date"),
-              onPress: e => {
-                e.stopPropagation();
-                onReset();
-              },
-              children: /* @__PURE__ */jsx(InputParts.Icon, {
-                children: /* @__PURE__ */jsx(X, {})
-              })
-            }) : /* @__PURE__ */jsx(InputParts.Icon, {
-              adornment: "trailing",
-              children: /* @__PURE__ */jsx(Calendar, {})
+        ...(disabled ? {
+          opacity: 0.5,
+          pointerEvents: "none"
+        } : void 0),
+        ...(isWeb ? {
+          role: "combobox",
+          "aria-haspopup": "dialog",
+          "aria-expanded": !!open,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-required": ariaRequired,
+          "aria-invalid": ariaInvalid,
+          tabIndex: disabled ? -1 : 0,
+          onKeyDown: handleTriggerKey
+        } : void 0),
+        children: [/* @__PURE__ */jsx(InputParts.Section, {
+          children: /* @__PURE__ */jsx(InputParts.Area, {
+            readOnly: true,
+            pointerEvents: "none",
+            tabIndex: -1,
+            value,
+            placeholder,
+            disabled,
+            color: formCommonColors.text
+          })
+        }), /* @__PURE__ */jsx(InputParts.Section, {
+          children: value ? /* @__PURE__ */jsx(InputParts.Button, {
+            "aria-label": t("Clear date"),
+            onPress: e => {
+              e.stopPropagation();
+              onReset();
+            },
+            children: /* @__PURE__ */jsx(InputParts.Icon, {
+              children: /* @__PURE__ */jsx(X, {})
             })
-          })]
-        })
+          }) : /* @__PURE__ */jsx(InputParts.Icon, {
+            adornment: "trailing",
+            children: /* @__PURE__ */jsx(Calendar, {})
+          })
+        })]
       })
     })
   );
-});
+}
 function DatePickerPopoverShell({
   open,
   onOpenChange,
@@ -421,7 +790,7 @@ function DatePickerPopoverShell({
     triggerEnd,
     disabled,
     scrollable: true,
-    sizing: "fill",
+    sizing: "grow",
     fitContent: true,
     triggerA11y,
     children
@@ -439,7 +808,7 @@ function CalendarViewSwitcher({
 }) {
   const {
     knobProps
-  } = useResolvedKnobs();
+  } = useCalendarKnobs();
   const handleSelectMonth = useCallback(month => {
     const newDate = new Date(displayDate);
     newDate.setMonth(month);
@@ -453,16 +822,10 @@ function CalendarViewSwitcher({
     setViewMode("month");
   }, [displayDate, onSetDisplayDate, setViewMode]);
   if (viewMode === "month") {
-    return /* @__PURE__ */jsxs(View, {
-      flexDirection: "column",
-      alignItems: "center",
-      ...knobProps.gapLg,
-      width: "100%",
-      ...knobProps.panelPadding,
+    return /* @__PURE__ */jsxs(CalendarPanelFrame, {
       children: [/* @__PURE__ */jsx(Text, {
-        fontSize: knobProps.sizeToken,
         alignSelf: "center",
-        ...knobProps.body,
+        ...knobProps.label,
         ...knobProps.textWeight,
         children: "Select a month"
       }), /* @__PURE__ */jsx(MonthGrid, {
@@ -473,12 +836,7 @@ function CalendarViewSwitcher({
     });
   }
   if (viewMode === "year") {
-    return /* @__PURE__ */jsx(View, {
-      flexDirection: "column",
-      alignItems: "center",
-      ...knobProps.gapLg,
-      width: "100%",
-      ...knobProps.panelPadding,
+    return /* @__PURE__ */jsx(CalendarPanelFrame, {
       children: /* @__PURE__ */jsx(YearGrid, {
         yearPageStart,
         selectedYear: calendarData.year,
@@ -498,5 +856,5 @@ function formatDateDisplay(date) {
     year: "always"
   });
 }
-export { CalendarHeader, CalendarViewSwitcher, DatePickerInputTrigger, DatePickerPopoverShell, MonthGrid, WeekView, YearGrid, dayCellRadius, formatDateDisplay, isSameDay, months, toWeeks, useCalendarData, useDateAnimation, useDateNavigation, weekdays, yearPageSize };
+export { CalendarChromeButton, CalendarDayCell, CalendarDaySlot, CalendarDays, CalendarHeader, CalendarPanelFrame, CalendarTextButton, CalendarViewSwitcher, CalendarWeekRow, DatePickerInputTrigger, DatePickerPopoverShell, MonthGrid, WeekView, YearGrid, dayCellRadius, formatDateDisplay, isSameDay, months, toWeeks, useCalendarData, useCalendarKnobs, useDateAnimation, useDateNavigation, weekdays, yearPageSize };
 //# sourceMappingURL=parts.mjs.map