@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/cjs/fields/DatePicker/parts.cjs

@@ -22,8 +22,15 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var parts_exports = {};
 __export(parts_exports, {
+  CalendarChromeButton: () => CalendarChromeButton,
+  CalendarDayCell: () => CalendarDayCell,
+  CalendarDaySlot: () => CalendarDaySlot,
+  CalendarDays: () => CalendarDays,
   CalendarHeader: () => CalendarHeader,
+  CalendarPanelFrame: () => CalendarPanelFrame,
+  CalendarTextButton: () => CalendarTextButton,
   CalendarViewSwitcher: () => CalendarViewSwitcher,
+  CalendarWeekRow: () => CalendarWeekRow,
   DatePickerInputTrigger: () => DatePickerInputTrigger,
   DatePickerPopoverShell: () => DatePickerPopoverShell,
   MonthGrid: () => MonthGrid,
@@ -35,6 +42,7 @@ __export(parts_exports, {
   months: () => months,
   toWeeks: () => toWeeks,
   useCalendarData: () => useCalendarData,
+  useCalendarKnobs: () => useCalendarKnobs,
   useDateAnimation: () => useDateAnimation,
   useDateNavigation: () => useDateNavigation,
   weekdays: () => weekdays,
@@ -45,16 +53,11 @@ var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
-var import_Button = require("../../Button/index.cjs");
 var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_jsx_runtime = require("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;
@@ -135,26 +138,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 (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+}
+function CalendarPanelFrame({
+  children
+}) {
+  const {
+    knobProps
+  } = useCalendarKnobs();
+  const {
+    px
+  } = knobProps.nestedControl;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    ...box,
+    role: "button",
+    "aria-label": label,
+    cursor: "pointer",
+    alignItems: "center",
+    justifyContent: "center",
+    onPress,
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)(),
+    ...(!import_tamagui.isWeb ? {
+      hitSlop
+    } : {}),
+    ...(import_tamagui.isWeb ? {
+      tabIndex: 0,
+      onKeyDown: calendarKeyHandler(onPress)
+    } : {
+      accessible: true
+    }),
+    children
+  });
+}
+function CalendarTextButton({
+  onPress,
+  children
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    role: "button",
+    cursor: "pointer",
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+    onPress,
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)(),
+    ...(import_tamagui.isWeb ? {
+      tabIndex: 0,
+      onKeyDown: calendarKeyHandler(onPress)
+    } : {
+      accessible: true
+    }),
+    children
+  });
+}
+function CalendarDaySlot({
+  children
+}) {
+  const {
+    knobProps
+  } = useCalendarKnobs();
+  const {
+    px
+  } = knobProps.nestedControl;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    width: px,
+    height: px,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+    children
+  });
+}
+function CalendarWeekRow({
+  children
+}) {
+  const {
+    knobProps
+  } = useCalendarKnobs();
+  const {
+    px
+  } = knobProps.nestedControl;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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 = (0, import_theme.useAccentOnSurface)();
+  const {
+    px,
+    hitSlop,
+    box
+  } = splitNestedControl(knobProps.nestedControl);
+  if (!visible) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      width: px,
+      height: px
+    });
+  }
+  const showTodayMark = !!today && !selected;
+  const resolvedTabIndex = tabIndex ?? (disabled ? -1 : 0);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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: (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2
+    }),
+    "data-nested-px": px,
+    "data-calendar-day": `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`,
+    ...(!import_tamagui.isWeb ? {
+      hitSlop
+    } : {}),
+    ...(import_tamagui.isWeb ? {
+      tabIndex: resolvedTabIndex,
+      onKeyDown: e => {
+        calendarKeyHandler(onPress)(e);
+        onKeyDown?.(e);
+      }
+    } : {
+      accessible: true
+    }),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...knobProps.label,
+      ...knobProps.textWeight,
+      fontWeight: selected ? "bold" : knobProps.textWeight.fontWeight,
+      color: selected ? void 0 : today ? accentText : import_colorRamps.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] = (0, import_react.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;
+  });
+  (0, import_react.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 = (0, import_react.useCallback)((from, delta) => {
+    const idx = calendarData.days.findIndex(day => isSameDay(day, from));
+    const next = calendarData.days[idx + delta];
+    if (!next) return;
+    setFocusedDay(next);
+    if (!import_tamagui.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      transition: "medium",
+      ...animation,
+      alignSelf: "center",
+      gap: "$1",
+      width: px * 7,
+      role: "grid",
+      "aria-label": (0, import_t.t)("Calendar"),
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(WeekView, {}), weeks.map(week => {
+        const hasCurrentMonthDay = week.some(d => d.getMonth() === calendarData.month);
+        if (skipEmptyWeeks && !hasCurrentMonthDay) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            height: "$3"
+          }, week[0].toISOString());
+        }
+        return /* @__PURE__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                children: cell
+              }, key);
+            }
+            return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(CalendarDaySlot, {
+              children: [rangeStripe(day), cell]
+            }, key);
+          })
+        }, week[0].toISOString());
+      }), onToday ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarTextButton, {
+        onPress: todayOutOfRange ? () => {} : onToday,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.label,
+          ...knobProps.textWeight,
+          color: todayOutOfRange ? import_colorRamps.formCommonColors.muted : import_colorRamps.formCommonColors.text,
+          opacity: todayOutOfRange ? 0.5 : 1,
+          children: (0, import_t.t)("Today")
+        })
+      }) : null]
+    })
+  }, animationKey);
 }
 function WeekView() {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = useCalendarKnobs();
+  const {
+    px
+  } = knobProps.nestedControl;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexDirection: "row",
-    ...knobProps.gap,
-    width: "100%",
+    width: px * 7,
+    alignSelf: "center",
     children: weekdays.map(day => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      flex: 1,
+      width: px,
       textAlign: "center",
-      fontSize: knobProps.sizeToken,
       color: import_colorRamps.formCommonColors.muted,
-      ...knobProps.body,
+      ...knobProps.label,
       ...knobProps.textWeight,
       children: (0, import_t.t)(day)
     }, day))
@@ -172,62 +503,56 @@ function CalendarHeader({
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = useCalendarKnobs();
+  const {
+    px
+  } = knobProps.nestedControl;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
     flexDirection: "row",
-    width: "100%",
+    width: px * 7,
+    alignSelf: "center",
     alignItems: "center",
     justifyContent: "space-between",
-    children: [showPrev && onPrevMonth ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-      circular: true,
-      size: knobProps.sizeToken,
-      chromeless: true,
-      scaleIcon: 1.5,
+    children: [showPrev && onPrevMonth ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarChromeButton, {
       onPress: onPrevMonth,
-      "aria-label": (0, import_t.t)("Previous month"),
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Icon, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronLeft, {})
+      label: (0, import_t.t)("Previous month"),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronLeft, {
+        size: 16
       })
     }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      width: "$3"
+      width: px,
+      height: px
     }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-      flexDirection: "column",
+      flexDirection: "row",
       alignItems: "center",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        onPress: onYearPress,
-        chromeless: true,
-        padding: 0,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: knobProps.sizeToken,
-          color: import_colorRamps.formCommonColors.muted,
-          ...knobProps.body,
-          ...knobProps.textWeight,
-          children: year
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      ...knobProps.gap,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarTextButton, {
         onPress: onMonthPress,
-        chromeless: true,
-        padding: 0,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: knobProps.sizeToken,
           color: "$color",
-          ...knobProps.body,
+          ...knobProps.label,
           ...knobProps.textWeight,
+          fontWeight: "600",
           children: monthName
         })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarTextButton, {
+        onPress: onYearPress,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: import_colorRamps.formCommonColors.muted,
+          ...knobProps.label,
+          ...knobProps.textWeight,
+          children: year
+        })
       })]
-    }), showNext && onNextMonth ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-      circular: true,
-      size: knobProps.sizeToken,
-      chromeless: true,
-      scaleIcon: 1.5,
+    }), showNext && onNextMonth ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarChromeButton, {
       onPress: onNextMonth,
-      "aria-label": (0, import_t.t)("Next month"),
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Icon, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronRight, {})
+      label: (0, import_t.t)("Next month"),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronRight, {
+        size: 16
       })
     }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      width: "$3"
+      width: px,
+      height: px
     })]
   });
 }
@@ -238,31 +563,62 @@ function MonthGrid({
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = useCalendarKnobs();
   const {
     animation,
     animationKey
   } = useDateAnimation(currentYear);
+  const {
+    px,
+    hitSlop,
+    box
+  } = splitNestedControl(knobProps.nestedControl);
+  const cellW = px * 7 / 3;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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: (0, import_theme.ensureFocusVisibleRing)({
+            outlineOffset: -2
+          }),
+          "data-nested-px": px,
+          ...(!import_tamagui.isWeb ? {
+            hitSlop
+          } : {}),
+          ...(import_tamagui.isWeb ? {
+            tabIndex: 0,
+            onKeyDown: calendarKeyHandler(() => onSelectMonth(index))
+          } : {
+            accessible: true
+          }),
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
             color: isSelected ? "$color" : import_colorRamps.formCommonColors.text,
             fontWeight: isSelected ? "bold" : "400",
             children: (0, import_t.t)(name.slice(0, 3))
@@ -281,7 +637,13 @@ function YearGrid({
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = useCalendarKnobs();
+  const {
+    px,
+    hitSlop,
+    box
+  } = splitNestedControl(knobProps.nestedControl);
+  const cellW = px * 7 / 3;
   const years = (0, import_react.useMemo)(() => {
     const result = [];
     for (let i = 0; i < yearPageSize; i++) {
@@ -294,37 +656,29 @@ function YearGrid({
     animationKey
   } = useDateAnimation(yearPageStart);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-    width: "100%",
-    ...knobProps.gapLg,
+    width: px * 7,
+    alignSelf: "center",
+    ...knobProps.gap,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
       flexDirection: "row",
-      width: "100%",
+      width: px * 7,
       alignItems: "center",
       justifyContent: "space-between",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        circular: true,
-        size: knobProps.sizeToken,
-        chromeless: true,
-        scaleIcon: 1.5,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarChromeButton, {
         onPress: onPrevPage,
-        "aria-label": (0, import_t.t)("Previous years"),
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Icon, {
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronLeft, {})
+        label: (0, import_t.t)("Previous years"),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronLeft, {
+          size: 16
         })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-        fontSize: knobProps.sizeToken,
-        ...knobProps.body,
+        ...knobProps.label,
         ...knobProps.textWeight,
         children: [years[0], " \u2013 ", years[years.length - 1]]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        circular: true,
-        size: knobProps.sizeToken,
-        chromeless: true,
-        scaleIcon: 1.5,
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarChromeButton, {
         onPress: onNextPage,
-        "aria-label": (0, import_t.t)("Next years"),
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Icon, {
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronRight, {})
+        label: (0, import_t.t)("Next years"),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronRight, {
+          size: 16
         })
       })]
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
@@ -333,20 +687,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__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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: (0, import_theme.ensureFocusVisibleRing)({
+              outlineOffset: -2
+            }),
+            "data-nested-px": px,
+            ...(!import_tamagui.isWeb ? {
+              hitSlop
+            } : {}),
+            ...(import_tamagui.isWeb ? {
+              tabIndex: 0,
+              onKeyDown: calendarKeyHandler(() => onSelectYear(year))
+            } : {
+              accessible: true
+            }),
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              ...knobProps.label,
               color: isSelected ? "$color" : import_colorRamps.formCommonColors.text,
               fontWeight: isSelected ? "bold" : "400",
               children: year
@@ -357,27 +735,34 @@ function YearGrid({
     }, animationKey)]
   });
 }
-const DatePickerInputTrigger = import_InputParts.Input.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
-  } = (0, import_theme.useResolvedKnobs)();
-  const areaFocusRing = (0, import_theme.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
@@ -389,65 +774,57 @@ const DatePickerInputTrigger = import_InputParts.Input.Area.styleable((triggerPr
       alignItems: "center",
       width: "100%",
       cursor: disabled ? "not-allowed" : "pointer",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        flex: 1,
-        minWidth: 0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+        theme: error ? "red" : void 0,
+        elevation: void 0,
+        "data-testid": "date-picker-trigger",
+        id,
         onPress: import_tamagui.isWeb && !disabled ? onButtonPress : void 0,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
-          theme: error ? "red" : void 0,
-          elevation: void 0,
-          onPress: import_tamagui.isWeb && !disabled ? onButtonPress : void 0,
-          ...(disabled ? {
-            opacity: 0.5,
-            pointerEvents: "none"
-          } : void 0),
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
-              ...suppressBoxFocusRing,
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-                readOnly: true,
-                pointerEvents: "none",
-                value,
-                ref,
-                id,
-                placeholder,
-                disabled,
-                color: import_colorRamps.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__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-            children: value ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
-              "aria-label": (0, import_t.t)("Clear date"),
-              onPress: e => {
-                e.stopPropagation();
-                onReset();
-              },
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {})
-              })
-            }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-              adornment: "trailing",
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Calendar, {})
+        ...(disabled ? {
+          opacity: 0.5,
+          pointerEvents: "none"
+        } : void 0),
+        ...(import_tamagui.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__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+            readOnly: true,
+            pointerEvents: "none",
+            tabIndex: -1,
+            value,
+            placeholder,
+            disabled,
+            color: import_colorRamps.formCommonColors.text
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+          children: value ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+            "aria-label": (0, import_t.t)("Clear date"),
+            onPress: e => {
+              e.stopPropagation();
+              onReset();
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {})
             })
-          })]
-        })
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+            adornment: "trailing",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Calendar, {})
+          })
+        })]
       })
     })
   );
-});
+}
 function DatePickerPopoverShell({
   open,
   onOpenChange,
@@ -464,7 +841,7 @@ function DatePickerPopoverShell({
     triggerEnd,
     disabled,
     scrollable: true,
-    sizing: "fill",
+    sizing: "grow",
     fitContent: true,
     triggerA11y,
     children
@@ -482,7 +859,7 @@ function CalendarViewSwitcher({
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = useCalendarKnobs();
   const handleSelectMonth = (0, import_react.useCallback)(month => {
     const newDate = new Date(displayDate);
     newDate.setMonth(month);
@@ -496,16 +873,10 @@ function CalendarViewSwitcher({
     setViewMode("month");
   }, [displayDate, onSetDisplayDate, setViewMode]);
   if (viewMode === "month") {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-      flexDirection: "column",
-      alignItems: "center",
-      ...knobProps.gapLg,
-      width: "100%",
-      ...knobProps.panelPadding,
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(CalendarPanelFrame, {
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: knobProps.sizeToken,
         alignSelf: "center",
-        ...knobProps.body,
+        ...knobProps.label,
         ...knobProps.textWeight,
         children: "Select a month"
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(MonthGrid, {
@@ -516,12 +887,7 @@ function CalendarViewSwitcher({
     });
   }
   if (viewMode === "year") {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      flexDirection: "column",
-      alignItems: "center",
-      ...knobProps.gapLg,
-      width: "100%",
-      ...knobProps.panelPadding,
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarPanelFrame, {
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(YearGrid, {
         yearPageStart,
         selectedYear: calendarData.year,