@butternutbox/pawprint-native 2.1.0 → 2.3.0

package/dist/index.d.cts

@@ -2130,7 +2130,9 @@ type DatePickerOwnProps = {
     getMonthLabel?: (year: number, month: number, locale?: Locale) => string;
     weekDayLabels?: [string, string, string, string, string, string, string];
     getDateState?: (date: Date) => DateItemState;
+    getDateAccessibilityLabel?: (date: Date, state: DateItemState, monthLabel: string) => string;
     isDateDisabled?: (date: Date) => boolean;
+    focusDate?: Date | null;
     minDate?: Date;
     maxDate?: Date;
 };
@@ -2157,6 +2159,10 @@ type DatePickerProps = DatePickerOwnProps & Omit<ViewProps, keyof DatePickerOwnP
  * @param {[string,string,string,string,string,string,string]} [weekDayLabels] - Day-column labels Mon→Sun.
  * @param {(date: Date) => DateItemState} [getDateState] - Returns the visual state for a date.
  *   Defaults to: past="previous", today="current", future="default".
+ * @param {(date: Date, state: DateItemState, monthLabel: string) => string} [getDateAccessibilityLabel] - Returns the screen-reader label for a date,
+ *   e.g. to announce delivery states. Defaults to "{day} {monthLabel}".
+ * @param {Date | null} [focusDate] - Moves screen-reader focus to this date's cell when it is set or
+ *   changes, e.g. to return focus to a picked date after a confirmation sheet closes.
  * @param {(date: Date) => boolean} [isDateDisabled] - Returns true to disable a date.
  * @param {Date} [minDate] - Dates before this (exclusive of time) will be disabled.
  * @param {Date} [maxDate] - Dates after this (exclusive of time) will be disabled.

package/dist/index.d.ts

@@ -2130,7 +2130,9 @@ type DatePickerOwnProps = {
     getMonthLabel?: (year: number, month: number, locale?: Locale) => string;
     weekDayLabels?: [string, string, string, string, string, string, string];
     getDateState?: (date: Date) => DateItemState;
+    getDateAccessibilityLabel?: (date: Date, state: DateItemState, monthLabel: string) => string;
     isDateDisabled?: (date: Date) => boolean;
+    focusDate?: Date | null;
     minDate?: Date;
     maxDate?: Date;
 };
@@ -2157,6 +2159,10 @@ type DatePickerProps = DatePickerOwnProps & Omit<ViewProps, keyof DatePickerOwnP
  * @param {[string,string,string,string,string,string,string]} [weekDayLabels] - Day-column labels Mon→Sun.
  * @param {(date: Date) => DateItemState} [getDateState] - Returns the visual state for a date.
  *   Defaults to: past="previous", today="current", future="default".
+ * @param {(date: Date, state: DateItemState, monthLabel: string) => string} [getDateAccessibilityLabel] - Returns the screen-reader label for a date,
+ *   e.g. to announce delivery states. Defaults to "{day} {monthLabel}".
+ * @param {Date | null} [focusDate] - Moves screen-reader focus to this date's cell when it is set or
+ *   changes, e.g. to return focus to a picked date after a confirmation sheet closes.
  * @param {(date: Date) => boolean} [isDateDisabled] - Returns true to disable a date.
  * @param {Date} [minDate] - Dates before this (exclusive of time) will be disabled.
  * @param {Date} [maxDate] - Dates after this (exclusive of time) will be disabled.

package/dist/index.js

@@ -8,10 +8,10 @@ export * from '@butternutbox/pawprint-fonts';
 import React65, { createContext, forwardRef, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@rn-primitives/avatar';
-import { Text, View, Animated, Pressable, TextInput, Easing, useWindowDimensions, StyleSheet, Platform, Keyboard, PanResponder, Image, ScrollView, ActionSheetIOS, TouchableOpacity, Modal, TouchableWithoutFeedback, FlatList, Linking, Clipboard, Alert } from 'react-native';
+import { Text, View, Animated, Pressable, TextInput, Easing, useWindowDimensions, StyleSheet, Platform, Keyboard, PanResponder, Image, ActionSheetIOS, TouchableOpacity, Modal, TouchableWithoutFeedback, FlatList, AccessibilityInfo, ScrollView, Linking, Clipboard, Alert } from 'react-native';
 import Svg72, { Path, Defs, LinearGradient, Stop, Rect, G, ClipPath } from 'react-native-svg';
 import * as SwitchPrimitive from '@rn-primitives/switch';
-import Animated9, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useReducedMotion, useSharedValue, withTiming, useAnimatedStyle, ComplexAnimationBuilder, withSpring, withDelay, withRepeat, withSequence } from 'react-native-reanimated';
+import Animated10, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useReducedMotion, useSharedValue, withTiming, useAnimatedStyle, ComplexAnimationBuilder, withSpring, withDelay, withRepeat, withSequence } from 'react-native-reanimated';
 import { Slot } from '@rn-primitives/slot';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as ProgressPrimitive from '@rn-primitives/progress';
@@ -20,7 +20,7 @@ import * as SliderPrimitive from '@rn-primitives/slider';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { scheduleOnRN } from 'react-native-worklets';
 import * as TooltipPrimitive from '@rn-primitives/tooltip';
-import { isSameDay, isToday, isBefore, format } from 'date-fns';
+import { isSameDay, format, isToday, isBefore } from 'date-fns';
 import * as TabsPrimitive from '@rn-primitives/tabs';
 
 var __defProp = Object.defineProperty;
@@ -1464,6 +1464,7 @@ var IconButton = React65.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         disabled: isDisabled,
+        accessibilityRole: "button",
         accessibilityLabel: ariaLabel,
         accessibilityState: { disabled: isDisabled, busy: loading },
         onPressIn: () => setPressed(true),
@@ -5627,7 +5628,7 @@ var Animated5 = React65.forwardRef(
     const delayMs = delay !== void 0 && delay > 0 ? Math.round(delay * 1e3) : 0;
     const entering = delayMs > 0 ? buildDelayedEntering(variant, delayMs) : ENTERING[variant];
     return /* @__PURE__ */ jsx(
-      Animated9.View,
+      Animated10.View,
       __spreadProps(__spreadValues({
         ref,
         entering,
@@ -5706,6 +5707,10 @@ var DrawerBodyMaxContext = createContext(null);
 var useDrawerBodyMax = () => useContext(DrawerBodyMaxContext);
 var DrawerFooterContext = React65.createContext(false);
 var useDrawerFooterContext = () => React65.useContext(DrawerFooterContext);
+var DrawerKeyboardInsetContext = createContext(
+  null
+);
+var useDrawerKeyboardInset = () => useContext(DrawerKeyboardInsetContext);
 var DrawerHeaderContext = React65.createContext(null);
 var useDrawerHeaderContext = () => React65.useContext(DrawerHeaderContext);
 var KEYBOARD_DURATION = 250;
@@ -5713,6 +5718,7 @@ var OPEN_DURATION = 320;
 var CLOSE_DURATION = 220;
 var DISMISS_THRESHOLD = 80;
 var parseTokenValue23 = (value) => parseFloat(value);
+var claimTouch = () => true;
 var StyledPanel2 = styled52(View)(
   ({
     panelBorderRadius,
@@ -5753,9 +5759,8 @@ var DrawerContent = React65.forwardRef(
     const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext();
     const { height: windowHeight } = useWindowDimensions();
-    const [keyboardHeight, setKeyboardHeight] = useState(0);
     const keyboardSpacer = useRef(new Animated.Value(0)).current;
-    const maxHeight = (windowHeight - keyboardHeight) * 0.9;
+    const maxHeight = windowHeight * 0.9;
     const topBorder = parseTokenValue23(dimensions3.borderWidth.sm);
     const noFooterBodyPadding = parseTokenValue23(dimensions3.spacing["2xl"]);
     const closeDrawerRef = useRef(closeDrawer);
@@ -5793,11 +5798,9 @@ var DrawerContent = React65.forwardRef(
         }).start();
       };
       const shown = Keyboard.addListener(showEvent, (event) => {
-        setKeyboardHeight(event.endCoordinates.height);
         lift(event.endCoordinates.height, event.duration);
       });
       const hidden = Keyboard.addListener(hideEvent, (event) => {
-        setKeyboardHeight(0);
         lift(0, event.duration);
       });
       return () => {
@@ -5997,18 +6000,18 @@ var DrawerContent = React65.forwardRef(
             panelBorderRadius: parseTokenValue23(drawer.borderRadius.top),
             panelBgColor: colour.background.container.default,
             panelMaxWidth: parseTokenValue23(drawer.size.maxWidth),
-            panelMaxHeight: maxHeight + keyboardHeight,
+            panelMaxHeight: maxHeight,
             panelBorderWidth: parseTokenValue23(dimensions3.borderWidth.sm),
             panelBorderColor: colour.border.default,
             panelShadowColor: modal.shadow.color,
             panelShadowOffsetY: parseTokenValue23(modal.shadow.offsetY),
             panelShadowBlur: parseTokenValue23(modal.shadow.blur),
-            accessible: true,
-            accessibilityRole: "none",
-            accessibilityViewIsModal: true
+            accessibilityViewIsModal: true,
+            onAccessibilityEscape: closeDrawer,
+            onStartShouldSetResponder: claimTouch
           }, props), {
             children: [
-              /* @__PURE__ */ jsx(DrawerBodyMaxContext.Provider, { value: bodyMax, children }),
+              /* @__PURE__ */ jsx(DrawerBodyMaxContext.Provider, { value: bodyMax, children: /* @__PURE__ */ jsx(DrawerKeyboardInsetContext.Provider, { value: keyboardSpacer, children }) }),
               /* @__PURE__ */ jsx(Animated.View, { style: { height: keyboardSpacer } })
             ]
           })
@@ -6321,27 +6324,36 @@ var DrawerDescription = React65.forwardRef(
 );
 DrawerDescription.displayName = "Drawer.Description";
 var parseTokenValue27 = (value) => parseFloat(value);
-var StyledScrollView = styled52(ScrollView)(
-  ({
-    bodyPaddingHorizontal,
-    bodyPaddingRight,
-    bodyMaxHeight,
-    bodyPaddingBottom
-  }) => ({
-    // No `flex: 1`: the ScrollView self-sizes to its content (up to
-    // `maxHeight`), so the panel wraps tight around short content and scrolls
-    // only when content exceeds the chrome-aware cap.
-    flexGrow: 0,
-    flexShrink: 1,
-    paddingLeft: bodyPaddingHorizontal,
-    paddingRight: bodyPaddingRight,
-    maxHeight: bodyMaxHeight,
-    paddingBottom: bodyPaddingBottom
-  })
-);
+var StyledScrollView = styled52(Animated.ScrollView)(({ bodyPaddingHorizontal, bodyPaddingRight, bodyPaddingBottom }) => ({
+  // No `flex: 1`: the ScrollView self-sizes to its content (up to
+  // `maxHeight`), so the panel wraps tight around short content and scrolls
+  // only when content exceeds the chrome-aware cap.
+  flexGrow: 0,
+  flexShrink: 1,
+  paddingLeft: bodyPaddingHorizontal,
+  paddingRight: bodyPaddingRight,
+  paddingBottom: bodyPaddingBottom
+}));
 var DrawerBody = React65.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, contentContainerStyle } = _b, props = __objRest(_b, ["children", "contentContainerStyle"]);
+    var _b = _a, {
+      children,
+      contentContainerStyle,
+      keyboardShouldPersistTaps = "handled",
+      scrollEventThrottle = 16,
+      onScroll,
+      onLayout,
+      style
+    } = _b, props = __objRest(_b, [
+      "children",
+      "contentContainerStyle",
+      "keyboardShouldPersistTaps",
+      "scrollEventThrottle",
+      "onScroll",
+      "onLayout",
+      "style"
+    ]);
+    var _a2;
     const theme2 = useTheme();
     const { spacing } = theme2.tokens.components.drawer;
     const { buttons } = theme2.tokens.components;
@@ -6349,12 +6361,83 @@ var DrawerBody = React65.forwardRef(
     const headerContext = useDrawerHeaderContext();
     const footerContext = useDrawerFooterContext();
     const providedMaxHeight = useDrawerBodyMax();
+    const keyboardInset = useDrawerKeyboardInset();
     const { height: windowHeight } = useWindowDimensions();
     const insets = useSafeAreaInsets();
     const gap = parseTokenValue27(content.slot.gap);
     const horizontalPadding = parseTokenValue27(content.slot.horizontalPadding);
     const topPadding = parseTokenValue27(content.slot.verticalPadding);
     const bodyMaxHeight = providedMaxHeight != null ? providedMaxHeight : windowHeight - 300;
+    const _b2 = (_a2 = StyleSheet.flatten(style)) != null ? _a2 : {}, { maxHeight: styleMaxHeight } = _b2, restStyle = __objRest(_b2, ["maxHeight"]);
+    const cap = typeof styleMaxHeight === "number" ? Math.min(styleMaxHeight, bodyMaxHeight) : bodyMaxHeight;
+    const maxHeight = useMemo(() => {
+      if (!keyboardInset || bodyMaxHeight <= 0) return cap;
+      const slack = bodyMaxHeight - cap;
+      return keyboardInset.interpolate({
+        inputRange: slack > 0 ? [0, slack, bodyMaxHeight] : [0, bodyMaxHeight],
+        outputRange: slack > 0 ? [cap, cap, 0] : [cap, 0],
+        extrapolate: "clamp"
+      });
+    }, [keyboardInset, bodyMaxHeight, cap]);
+    const scrollRef = useRef(null);
+    const contentRef = useRef(null);
+    const scrollOffsetRef = useRef(0);
+    const viewportHeightRef = useRef(0);
+    const combinedRef = useCallback(
+      (node) => {
+        scrollRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const handleScroll = useCallback(
+      (event) => {
+        scrollOffsetRef.current = event.nativeEvent.contentOffset.y;
+        onScroll == null ? void 0 : onScroll(event);
+      },
+      [onScroll]
+    );
+    const handleLayout = useCallback(
+      (event) => {
+        viewportHeightRef.current = event.nativeEvent.layout.height;
+        onLayout == null ? void 0 : onLayout(event);
+      },
+      [onLayout]
+    );
+    useEffect(() => {
+      const subscription = Keyboard.addListener("keyboardDidShow", () => {
+        const scrollView = scrollRef.current;
+        const focusedInput = TextInput.State.currentlyFocusedInput();
+        const contentView = contentRef.current;
+        if (!scrollView || !focusedInput || !contentView) return;
+        focusedInput.measureLayout(
+          contentView,
+          (_left, inputTop, _width, inputHeight) => {
+            const viewportHeight = viewportHeightRef.current;
+            if (viewportHeight <= 0) return;
+            const visibleTop = scrollOffsetRef.current;
+            const visibleBottom = visibleTop + viewportHeight;
+            const wantedTop = inputTop - gap;
+            const wantedBottom = inputTop + inputHeight + gap;
+            if (wantedTop < visibleTop) {
+              scrollView.scrollTo({ y: Math.max(0, wantedTop), animated: true });
+            } else if (wantedBottom > visibleBottom) {
+              scrollView.scrollTo({
+                y: Math.min(wantedTop, wantedBottom - viewportHeight),
+                animated: true
+              });
+            }
+          },
+          () => {
+          }
+        );
+      });
+      return () => subscription.remove();
+    }, [gap]);
     const paddingRight = headerContext === null ? parseTokenValue27(spacing.close.right.md) + parseTokenValue27(buttons.size.sm.minHeight) : horizontalPadding;
     const bodyPaddingBottom = !footerContext ? Math.max(
       parseTokenValue27(theme2.tokens.semantics.dimensions.spacing["2xl"]),
@@ -6363,11 +6446,12 @@ var DrawerBody = React65.forwardRef(
     return /* @__PURE__ */ jsx(
       StyledScrollView,
       __spreadProps(__spreadValues({
-        ref,
+        ref: combinedRef,
+        innerViewRef: contentRef,
         bodyPaddingHorizontal: horizontalPadding,
         bodyPaddingRight: paddingRight,
-        bodyMaxHeight,
         bodyPaddingBottom,
+        style: [restStyle, { maxHeight }],
         contentContainerStyle: [
           {
             gap,
@@ -6375,7 +6459,11 @@ var DrawerBody = React65.forwardRef(
             paddingBottom: 0
           },
           contentContainerStyle
-        ]
+        ],
+        keyboardShouldPersistTaps,
+        scrollEventThrottle,
+        onScroll: handleScroll,
+        onLayout: handleLayout
       }, props), {
         children
       })
@@ -7921,7 +8009,7 @@ var StyledTrack = styled52(View)(({ trackHeight, trackMinWidth, trackBorderRadiu
   backgroundColor: trackBgColor,
   overflow: "hidden"
 }));
-var StyledIndicator = styled52(Animated9.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
+var StyledIndicator = styled52(Animated10.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
   height: "100%",
   borderRadius: indicatorBorderRadius,
   backgroundColor: indicatorBgColor
@@ -9131,9 +9219,17 @@ var SelectField = React65.forwardRef(
         }
       );
     }, [windowHeight, keyboardHeight, maxDropdownHeight]);
+    const isOpen = isFocused && !disabled;
     React65.useEffect(() => {
-      if (isFocused) measurePlacement();
-    }, [isFocused, measurePlacement]);
+      if (!isOpen) return;
+      let frame = 0;
+      const track = () => {
+        measurePlacement();
+        frame = requestAnimationFrame(track);
+      };
+      track();
+      return () => cancelAnimationFrame(frame);
+    }, [isOpen, measurePlacement]);
     React65.useEffect(() => {
       if (!isControlled || isFocused) return;
       if (value === null || value === void 0) {
@@ -9192,7 +9288,6 @@ var SelectField = React65.forwardRef(
       if (searchable) (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     };
     const fieldState = error ? "error" : state;
-    const isOpen = isFocused && !disabled;
     const clearAction = !disabled && inputText.length > 0 ? /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -9504,7 +9599,7 @@ var Wrapper = styled52(View)({
   alignItems: "center",
   justifyContent: "space-between"
 });
-var SelectIcon = styled52(Animated9.View)({
+var SelectIcon = styled52(Animated10.View)({
   position: "absolute",
   right: 0,
   marginRight: 0
@@ -10055,9 +10150,9 @@ var Slider = React65.forwardRef(
                 onLayout: handleNativeLayout,
                 children: [
                   /* @__PURE__ */ jsx(View, { style: trackBackgroundStyle }),
-                  /* @__PURE__ */ jsx(Animated9.View, { style: [indicatorBaseStyle, indicatorAnimStyle] }),
+                  /* @__PURE__ */ jsx(Animated10.View, { style: [indicatorBaseStyle, indicatorAnimStyle] }),
                   /* @__PURE__ */ jsx(
-                    Animated9.View,
+                    Animated10.View,
                     {
                       style: [
                         __spreadProps(__spreadValues({}, thumbStyle), { position: "absolute", left: 0 }),
@@ -10471,7 +10566,7 @@ var StackedCard = ({
   }));
   const isFront = depth === 0;
   return /* @__PURE__ */ jsx(
-    Animated9.View,
+    Animated10.View,
     {
       entering: wasBackfill ? void 0 : CARD_ENTERING,
       exiting: CARD_EXITING,
@@ -10479,7 +10574,7 @@ var StackedCard = ({
       accessibilityElementsHidden: !isFront,
       importantForAccessibility: isFront ? "auto" : "no-hide-descendants",
       style: [CARD_BASE_STYLE, { zIndex: -depth }],
-      children: /* @__PURE__ */ jsx(Animated9.View, { style: [DEPTH_LAYER_STYLE, depthStyle], children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(Animated10.View, { style: [DEPTH_LAYER_STYLE, depthStyle], children: /* @__PURE__ */ jsx(
         Notification,
         {
           variant: "toast",
@@ -11193,6 +11288,7 @@ var MONTH_SLIDE_EXITING = {
   forward: FadeOutLeft.duration(200),
   backward: FadeOutRight.duration(200)
 };
+var FOCUS_DELAY_MS = 150;
 var DEFAULT_WEEK_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 function buildCalendarGrid(year, month) {
   const firstDay = new Date(year, month, 1);
@@ -11304,7 +11400,9 @@ var DatePicker = React65.forwardRef(
       getMonthLabel,
       weekDayLabels = DEFAULT_WEEK_LABELS,
       getDateState,
+      getDateAccessibilityLabel,
       isDateDisabled,
+      focusDate,
       minDate,
       maxDate
     } = _b, rest = __objRest(_b, [
@@ -11324,7 +11422,9 @@ var DatePicker = React65.forwardRef(
       "getMonthLabel",
       "weekDayLabels",
       "getDateState",
+      "getDateAccessibilityLabel",
       "isDateDisabled",
+      "focusDate",
       "minDate",
       "maxDate"
     ]);
@@ -11361,6 +11461,18 @@ var DatePicker = React65.forwardRef(
       }),
       [datePicker, dt, theme2]
     );
+    const cellRefs = useRef(/* @__PURE__ */ new Map());
+    const focusTime = focusDate == null ? void 0 : focusDate.getTime();
+    useEffect(() => {
+      if (focusTime === void 0) return;
+      const target = new Date(focusTime);
+      if (target.getFullYear() !== year || target.getMonth() !== month) return;
+      const timeout = setTimeout(() => {
+        const cell = cellRefs.current.get(toDateKey(target));
+        if (cell) AccessibilityInfo.sendAccessibilityEvent(cell, "focus");
+      }, FOCUS_DELAY_MS);
+      return () => clearTimeout(timeout);
+    }, [focusTime, year, month]);
     const resolvedGetDateState = useCallback(
       (date) => {
         var _a3;
@@ -11500,6 +11612,7 @@ var DatePicker = React65.forwardRef(
                 token: datePicker.month.typography,
                 align: "center",
                 color: datePicker.month.colour.text.default,
+                accessibilityRole: "header",
                 children: resolvedMonthLabel
               }
             ) }),
@@ -11517,86 +11630,88 @@ var DatePicker = React65.forwardRef(
             ) })
           ] }),
           /* @__PURE__ */ jsx(
-            Animated9.View,
+            Animated10.View,
             {
               entering: MONTH_SLIDE_ENTERING[slideDir],
               exiting: MONTH_SLIDE_EXITING[slideDir],
-              children: /* @__PURE__ */ jsx(
-                StyledDatesGrid,
-                {
-                  rowGap,
-                  accessible: true,
-                  accessibilityLabel: resolvedMonthLabel,
-                  children: calendarRows.map((row, rowIdx) => /* @__PURE__ */ jsx(StyledDateRow, { children: row.map(
-                    (date, colIdx) => !date ? /* @__PURE__ */ jsx(
-                      StyledDateCell,
-                      {
-                        cellHeight,
-                        accessibilityElementsHidden: true
-                      },
-                      `empty-${rowIdx}-${colIdx}`
-                    ) : /* @__PURE__ */ jsx(
-                      StyledDateCell,
-                      {
-                        cellHeight,
-                        children: (() => {
-                          const isDisabled = resolvedIsDateDisabled(date);
-                          const {
+              children: /* @__PURE__ */ jsx(StyledDatesGrid, { rowGap, children: calendarRows.map((row, rowIdx) => /* @__PURE__ */ jsx(StyledDateRow, { children: row.map(
+                (date, colIdx) => !date ? /* @__PURE__ */ jsx(
+                  StyledDateCell,
+                  {
+                    cellHeight,
+                    accessibilityElementsHidden: true
+                  },
+                  `empty-${rowIdx}-${colIdx}`
+                ) : /* @__PURE__ */ jsx(
+                  StyledDateCell,
+                  {
+                    cellHeight,
+                    children: (() => {
+                      var _a3;
+                      const isDisabled = resolvedIsDateDisabled(date);
+                      const {
+                        state,
+                        indicatorBg,
+                        indicatorBorderColor,
+                        textColor,
+                        typography,
+                        textDecoration,
+                        isSelected
+                      } = resolveDateCellConfig(date);
+                      const isUndeliverable = isDisabled && state === "default";
+                      const cellOpacity = isDisabled && !isUndeliverable ? disabledOpacity : 1;
+                      const cellTextDecoration = isUndeliverable ? "line-through" : textDecoration;
+                      const cellTextColor = isUndeliverable ? dt.colour.text.previous : textColor;
+                      return /* @__PURE__ */ jsx(
+                        Pressable,
+                        {
+                          ref: (node) => {
+                            const key = toDateKey(date);
+                            if (node) cellRefs.current.set(key, node);
+                            else cellRefs.current.delete(key);
+                          },
+                          onPress: !isDisabled ? () => onDateSelect == null ? void 0 : onDateSelect(date) : void 0,
+                          disabled: isDisabled,
+                          accessible: true,
+                          accessibilityRole: "button",
+                          accessibilityLabel: (_a3 = getDateAccessibilityLabel == null ? void 0 : getDateAccessibilityLabel(
+                            date,
                             state,
-                            indicatorBg,
-                            indicatorBorderColor,
-                            textColor,
-                            typography,
-                            textDecoration,
-                            isSelected
-                          } = resolveDateCellConfig(date);
-                          const isUndeliverable = isDisabled && state === "default";
-                          const cellOpacity = isDisabled && !isUndeliverable ? disabledOpacity : 1;
-                          const cellTextDecoration = isUndeliverable ? "line-through" : textDecoration;
-                          const cellTextColor = isUndeliverable ? dt.colour.text.previous : textColor;
-                          return /* @__PURE__ */ jsx(
-                            Pressable,
+                            resolvedMonthLabel
+                          )) != null ? _a3 : `${date.getDate()} ${resolvedMonthLabel}`,
+                          accessibilityState: {
+                            selected: isSelected,
+                            disabled: isDisabled
+                          },
+                          accessibilityHint: state === "current" ? "Today" : void 0,
+                          style: { opacity: cellOpacity },
+                          children: /* @__PURE__ */ jsx(
+                            StyledIndicator3,
                             {
-                              onPress: !isDisabled ? () => onDateSelect == null ? void 0 : onDateSelect(date) : void 0,
-                              disabled: isDisabled,
-                              accessible: true,
-                              accessibilityRole: "button",
-                              accessibilityLabel: `${date.getDate()} ${resolvedMonthLabel}`,
-                              accessibilityState: {
-                                selected: isSelected,
-                                disabled: isDisabled
-                              },
-                              accessibilityHint: state === "current" ? "Today" : void 0,
-                              style: { opacity: cellOpacity },
+                              indicatorSize,
+                              indicatorBorderRadius,
+                              indicatorBg,
+                              indicatorBorderWidth: indicatorBorderColor !== "transparent" ? selectedBorderWidth : 0,
+                              indicatorBorderColor,
+                              indicatorBorderStyle: indicatorBorderColor !== "transparent" ? "dashed" : "solid",
                               children: /* @__PURE__ */ jsx(
-                                StyledIndicator3,
+                                Typography,
                                 {
-                                  indicatorSize,
-                                  indicatorBorderRadius,
-                                  indicatorBg,
-                                  indicatorBorderWidth: indicatorBorderColor !== "transparent" ? selectedBorderWidth : 0,
-                                  indicatorBorderColor,
-                                  indicatorBorderStyle: indicatorBorderColor !== "transparent" ? "dashed" : "solid",
-                                  children: /* @__PURE__ */ jsx(
-                                    Typography,
-                                    {
-                                      color: cellTextColor,
-                                      token: typography,
-                                      textDecoration: cellTextDecoration,
-                                      children: date.getDate().toString()
-                                    }
-                                  )
+                                  color: cellTextColor,
+                                  token: typography,
+                                  textDecoration: cellTextDecoration,
+                                  children: date.getDate().toString()
                                 }
                               )
                             }
-                          );
-                        })()
-                      },
-                      toDateKey(date)
-                    )
-                  ) }, rowIdx))
-                }
-              )
+                          )
+                        }
+                      );
+                    })()
+                  },
+                  toDateKey(date)
+                )
+              ) }, rowIdx)) })
             },
             `${year}-${month}`
           )
@@ -12792,7 +12907,7 @@ var ShineOverlay = ({
         { borderRadius: radius, overflow: "hidden" }
       ],
       children: width > 0 && /* @__PURE__ */ jsx(
-        Animated9.View,
+        Animated10.View,
         {
           style: [
             { position: "absolute", top: 0, bottom: 0, width: bandWidth },
@@ -12847,7 +12962,7 @@ var createNudgingIcon = (IconComponent, axis, direction) => {
     const nudgeStyle = useAnimatedStyle(
       () => axis === "translateX" ? { transform: [{ translateX: offset.value }] } : { transform: [{ translateY: offset.value }] }
     );
-    return /* @__PURE__ */ jsx(Animated9.View, { style: nudgeStyle, children: /* @__PURE__ */ jsx(IconComponent, __spreadValues({}, props)) });
+    return /* @__PURE__ */ jsx(Animated10.View, { style: nudgeStyle, children: /* @__PURE__ */ jsx(IconComponent, __spreadValues({}, props)) });
   };
   NudgingIcon.displayName = `Nudging(${(_a = IconComponent.displayName) != null ? _a : "Icon"})`;
   return NudgingIcon;