@butternutbox/pawprint-native 2.1.0 → 2.3.0

package/dist/index.cjs

@@ -10,7 +10,7 @@ var AvatarPrimitive = require('@rn-primitives/avatar');
 var reactNative = require('react-native');
 var Svg72 = require('react-native-svg');
 var SwitchPrimitive = require('@rn-primitives/switch');
-var Animated9 = require('react-native-reanimated');
+var Animated10 = require('react-native-reanimated');
 var slot = require('@rn-primitives/slot');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var ProgressPrimitive = require('@rn-primitives/progress');
@@ -47,7 +47,7 @@ var React65__default = /*#__PURE__*/_interopDefault(React65);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var Svg72__default = /*#__PURE__*/_interopDefault(Svg72);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
-var Animated9__default = /*#__PURE__*/_interopDefault(Animated9);
+var Animated10__default = /*#__PURE__*/_interopDefault(Animated10);
 var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
@@ -1494,6 +1494,7 @@ var IconButton = React65__default.default.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         disabled: isDisabled,
+        accessibilityRole: "button",
         accessibilityLabel: ariaLabel,
         accessibilityState: { disabled: isDisabled, busy: loading },
         onPressIn: () => setPressed(true),
@@ -5540,7 +5541,7 @@ AccordionRoot.displayName = "Accordion";
 var Accordion = Object.assign(AccordionRoot, {
   Item: AccordionItem
 });
-var _SubtleScaleIn = class _SubtleScaleIn extends Animated9.ComplexAnimationBuilder {
+var _SubtleScaleIn = class _SubtleScaleIn extends Animated10.ComplexAnimationBuilder {
   constructor() {
     super(...arguments);
     this.build = () => {
@@ -5573,22 +5574,22 @@ var _SubtleScaleIn = class _SubtleScaleIn extends Animated9.ComplexAnimationBuil
 // The worklet in build() drives native with scale 0.85→1 + opacity 0→1.
 _SubtleScaleIn.presetName = "ZoomIn";
 var SubtleScaleIn = _SubtleScaleIn;
-var fadeAnimation = { entering: Animated9.FadeIn, exiting: Animated9.FadeOut };
+var fadeAnimation = { entering: Animated10.FadeIn, exiting: Animated10.FadeOut };
 var fadeUpAnimation = {
-  entering: Animated9.FadeInDown,
-  exiting: Animated9.FadeOutDown
+  entering: Animated10.FadeInDown,
+  exiting: Animated10.FadeOutDown
 };
 var fadeDownAnimation = {
-  entering: Animated9.FadeInUp,
-  exiting: Animated9.FadeOutUp
+  entering: Animated10.FadeInUp,
+  exiting: Animated10.FadeOutUp
 };
 var slideInAnimation = {
-  entering: Animated9.FadeInRight,
-  exiting: Animated9.FadeOutRight
+  entering: Animated10.FadeInRight,
+  exiting: Animated10.FadeOutRight
 };
 var slideOutAnimation = {
-  entering: Animated9.FadeInLeft,
-  exiting: Animated9.FadeOutLeft
+  entering: Animated10.FadeInLeft,
+  exiting: Animated10.FadeOutLeft
 };
 var DURATIONS = {
   fade: 200,
@@ -5598,7 +5599,7 @@ var DURATIONS = {
   slideIn: 250,
   slideOut: 250
 };
-var subtleScaleOut = new Animated9.Keyframe({
+var subtleScaleOut = new Animated10.Keyframe({
   0: {
     opacity: 1,
     transform: [{ scale: 1 }]
@@ -5606,7 +5607,7 @@ var subtleScaleOut = new Animated9.Keyframe({
   100: {
     opacity: 0,
     transform: [{ scale: 0.85 }],
-    easing: Animated9.Easing.out(Animated9.Easing.quad)
+    easing: Animated10.Easing.out(Animated10.Easing.quad)
   }
 }).duration(DURATIONS.scale);
 var scaleAnimation = {
@@ -5614,30 +5615,30 @@ var scaleAnimation = {
   exiting: subtleScaleOut
 };
 var ENTERING_CLS = {
-  fade: Animated9.FadeIn,
+  fade: Animated10.FadeIn,
   scale: SubtleScaleIn,
-  fadeUp: Animated9.FadeInDown,
-  fadeDown: Animated9.FadeInUp,
-  slideIn: Animated9.FadeInRight,
-  slideOut: Animated9.FadeInLeft
+  fadeUp: Animated10.FadeInDown,
+  fadeDown: Animated10.FadeInUp,
+  slideIn: Animated10.FadeInRight,
+  slideOut: Animated10.FadeInLeft
 };
-var easeOut = Animated9.Easing.out(Animated9.Easing.quad);
-var easeInOut = Animated9.Easing.inOut(Animated9.Easing.quad);
+var easeOut = Animated10.Easing.out(Animated10.Easing.quad);
+var easeInOut = Animated10.Easing.inOut(Animated10.Easing.quad);
 var ENTERING = {
-  fade: Animated9.FadeIn.duration(DURATIONS.fade),
+  fade: Animated10.FadeIn.duration(DURATIONS.fade),
   scale: SubtleScaleIn.duration(DURATIONS.scale).easing(easeOut),
-  fadeUp: Animated9.FadeInDown.duration(DURATIONS.fadeUp).easing(easeInOut),
-  fadeDown: Animated9.FadeInUp.duration(DURATIONS.fadeDown).easing(easeInOut),
-  slideIn: Animated9.FadeInRight.duration(DURATIONS.slideIn).easing(easeOut),
-  slideOut: Animated9.FadeInLeft.duration(DURATIONS.slideOut).easing(easeOut)
+  fadeUp: Animated10.FadeInDown.duration(DURATIONS.fadeUp).easing(easeInOut),
+  fadeDown: Animated10.FadeInUp.duration(DURATIONS.fadeDown).easing(easeInOut),
+  slideIn: Animated10.FadeInRight.duration(DURATIONS.slideIn).easing(easeOut),
+  slideOut: Animated10.FadeInLeft.duration(DURATIONS.slideOut).easing(easeOut)
 };
 var EXITING = {
-  fade: Animated9.FadeOut.duration(DURATIONS.fade),
+  fade: Animated10.FadeOut.duration(DURATIONS.fade),
   scale: subtleScaleOut,
-  fadeUp: Animated9.FadeOutDown.duration(DURATIONS.fadeUp),
-  fadeDown: Animated9.FadeOutUp.duration(DURATIONS.fadeDown),
-  slideIn: Animated9.FadeOutRight.duration(DURATIONS.slideIn),
-  slideOut: Animated9.FadeOutLeft.duration(DURATIONS.slideOut)
+  fadeUp: Animated10.FadeOutDown.duration(DURATIONS.fadeUp),
+  fadeDown: Animated10.FadeOutUp.duration(DURATIONS.fadeDown),
+  slideIn: Animated10.FadeOutRight.duration(DURATIONS.slideIn),
+  slideOut: Animated10.FadeOutLeft.duration(DURATIONS.slideOut)
 };
 function buildDelayedEntering(variant, delayMs) {
   const b = ENTERING_CLS[variant].duration(
@@ -5657,7 +5658,7 @@ var Animated5 = React65__default.default.forwardRef(
     const delayMs = delay !== void 0 && delay > 0 ? Math.round(delay * 1e3) : 0;
     const entering = delayMs > 0 ? buildDelayedEntering(variant, delayMs) : ENTERING[variant];
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Animated9__default.default.View,
+      Animated10__default.default.View,
       __spreadProps(__spreadValues({
         ref,
         entering,
@@ -5736,6 +5737,10 @@ var DrawerBodyMaxContext = React65.createContext(null);
 var useDrawerBodyMax = () => React65.useContext(DrawerBodyMaxContext);
 var DrawerFooterContext = React65__default.default.createContext(false);
 var useDrawerFooterContext = () => React65__default.default.useContext(DrawerFooterContext);
+var DrawerKeyboardInsetContext = React65.createContext(
+  null
+);
+var useDrawerKeyboardInset = () => React65.useContext(DrawerKeyboardInsetContext);
 var DrawerHeaderContext = React65__default.default.createContext(null);
 var useDrawerHeaderContext = () => React65__default.default.useContext(DrawerHeaderContext);
 var KEYBOARD_DURATION = 250;
@@ -5743,6 +5748,7 @@ var OPEN_DURATION = 320;
 var CLOSE_DURATION = 220;
 var DISMISS_THRESHOLD = 80;
 var parseTokenValue23 = (value) => parseFloat(value);
+var claimTouch = () => true;
 var StyledPanel2 = styled52__default.default(reactNative.View)(
   ({
     panelBorderRadius,
@@ -5783,9 +5789,8 @@ var DrawerContent = React65__default.default.forwardRef(
     const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext();
     const { height: windowHeight } = reactNative.useWindowDimensions();
-    const [keyboardHeight, setKeyboardHeight] = React65.useState(0);
     const keyboardSpacer = React65.useRef(new reactNative.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 = React65.useRef(closeDrawer);
@@ -5823,11 +5828,9 @@ var DrawerContent = React65__default.default.forwardRef(
         }).start();
       };
       const shown = reactNative.Keyboard.addListener(showEvent, (event) => {
-        setKeyboardHeight(event.endCoordinates.height);
         lift(event.endCoordinates.height, event.duration);
       });
       const hidden = reactNative.Keyboard.addListener(hideEvent, (event) => {
-        setKeyboardHeight(0);
         lift(0, event.duration);
       });
       return () => {
@@ -6027,18 +6030,18 @@ var DrawerContent = React65__default.default.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__ */ jsxRuntime.jsx(DrawerBodyMaxContext.Provider, { value: bodyMax, children }),
+              /* @__PURE__ */ jsxRuntime.jsx(DrawerBodyMaxContext.Provider, { value: bodyMax, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerKeyboardInsetContext.Provider, { value: keyboardSpacer, children }) }),
               /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: { height: keyboardSpacer } })
             ]
           })
@@ -6351,27 +6354,36 @@ var DrawerDescription = React65__default.default.forwardRef(
 );
 DrawerDescription.displayName = "Drawer.Description";
 var parseTokenValue27 = (value) => parseFloat(value);
-var StyledScrollView = styled52__default.default(reactNative.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__default.default(reactNative.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__default.default.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 = react.useTheme();
     const { spacing } = theme2.tokens.components.drawer;
     const { buttons } = theme2.tokens.components;
@@ -6379,12 +6391,83 @@ var DrawerBody = React65__default.default.forwardRef(
     const headerContext = useDrawerHeaderContext();
     const footerContext = useDrawerFooterContext();
     const providedMaxHeight = useDrawerBodyMax();
+    const keyboardInset = useDrawerKeyboardInset();
     const { height: windowHeight } = reactNative.useWindowDimensions();
     const insets = reactNativeSafeAreaContext.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 = reactNative.StyleSheet.flatten(style)) != null ? _a2 : {}, { maxHeight: styleMaxHeight } = _b2, restStyle = __objRest(_b2, ["maxHeight"]);
+    const cap = typeof styleMaxHeight === "number" ? Math.min(styleMaxHeight, bodyMaxHeight) : bodyMaxHeight;
+    const maxHeight = React65.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 = React65.useRef(null);
+    const contentRef = React65.useRef(null);
+    const scrollOffsetRef = React65.useRef(0);
+    const viewportHeightRef = React65.useRef(0);
+    const combinedRef = React65.useCallback(
+      (node) => {
+        scrollRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const handleScroll = React65.useCallback(
+      (event) => {
+        scrollOffsetRef.current = event.nativeEvent.contentOffset.y;
+        onScroll == null ? void 0 : onScroll(event);
+      },
+      [onScroll]
+    );
+    const handleLayout = React65.useCallback(
+      (event) => {
+        viewportHeightRef.current = event.nativeEvent.layout.height;
+        onLayout == null ? void 0 : onLayout(event);
+      },
+      [onLayout]
+    );
+    React65.useEffect(() => {
+      const subscription = reactNative.Keyboard.addListener("keyboardDidShow", () => {
+        const scrollView = scrollRef.current;
+        const focusedInput = reactNative.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"]),
@@ -6393,11 +6476,12 @@ var DrawerBody = React65__default.default.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       StyledScrollView,
       __spreadProps(__spreadValues({
-        ref,
+        ref: combinedRef,
+        innerViewRef: contentRef,
         bodyPaddingHorizontal: horizontalPadding,
         bodyPaddingRight: paddingRight,
-        bodyMaxHeight,
         bodyPaddingBottom,
+        style: [restStyle, { maxHeight }],
         contentContainerStyle: [
           {
             gap,
@@ -6405,7 +6489,11 @@ var DrawerBody = React65__default.default.forwardRef(
             paddingBottom: 0
           },
           contentContainerStyle
-        ]
+        ],
+        keyboardShouldPersistTaps,
+        scrollEventThrottle,
+        onScroll: handleScroll,
+        onLayout: handleLayout
       }, props), {
         children
       })
@@ -7927,7 +8015,7 @@ function usePasswordField({
 }
 var PROGRESS_ANIMATION = {
   duration: 450,
-  easing: Animated9.Easing.inOut(Animated9.Easing.cubic)
+  easing: Animated10.Easing.inOut(Animated10.Easing.cubic)
 };
 var parseTokenValue40 = (value) => parseFloat(value);
 var StyledRoot12 = styled52__default.default(reactNative.View)(({ rootGap }) => ({
@@ -7951,7 +8039,7 @@ var StyledTrack = styled52__default.default(reactNative.View)(({ trackHeight, tr
   backgroundColor: trackBgColor,
   overflow: "hidden"
 }));
-var StyledIndicator = styled52__default.default(Animated9__default.default.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
+var StyledIndicator = styled52__default.default(Animated10__default.default.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
   height: "100%",
   borderRadius: indicatorBorderRadius,
   backgroundColor: indicatorBgColor
@@ -7992,13 +8080,13 @@ var Progress = React65__default.default.forwardRef(
     const percent = clampedValue / safeMax * 100;
     const showHeader = Boolean(label) || Boolean(description);
     const typographyForSize = size === "lg" ? typography.large : typography.small;
-    const reducedMotion = Animated9.useReducedMotion();
+    const reducedMotion = Animated10.useReducedMotion();
     const shouldAnimate = animate && !reducedMotion;
-    const fill = Animated9.useSharedValue(percent);
+    const fill = Animated10.useSharedValue(percent);
     React65__default.default.useEffect(() => {
-      fill.value = shouldAnimate ? Animated9.withTiming(percent, PROGRESS_ANIMATION) : percent;
+      fill.value = shouldAnimate ? Animated10.withTiming(percent, PROGRESS_ANIMATION) : percent;
     }, [fill, percent, shouldAnimate]);
-    const indicatorStyle = Animated9.useAnimatedStyle(() => ({
+    const indicatorStyle = Animated10.useAnimatedStyle(() => ({
       width: `${fill.value}%`
     }));
     const trackSize = { lg: track.size.large, sm: track.size.small }[size];
@@ -9161,9 +9249,17 @@ var SelectField = React65__default.default.forwardRef(
         }
       );
     }, [windowHeight, keyboardHeight, maxDropdownHeight]);
+    const isOpen = isFocused && !disabled;
     React65__default.default.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__default.default.useEffect(() => {
       if (!isControlled || isFocused) return;
       if (value === null || value === void 0) {
@@ -9222,7 +9318,6 @@ var SelectField = React65__default.default.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__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
@@ -9534,7 +9629,7 @@ var Wrapper = styled52__default.default(reactNative.View)({
   alignItems: "center",
   justifyContent: "space-between"
 });
-var SelectIcon = styled52__default.default(Animated9__default.default.View)({
+var SelectIcon = styled52__default.default(Animated10__default.default.View)({
   position: "absolute",
   right: 0,
   marginRight: 0
@@ -9609,8 +9704,8 @@ var parseSize2 = (value) => {
   return parseInt(value.replace("px", ""), 10);
 };
 var useIconAnimation = () => {
-  const iconRotation = Animated9.useSharedValue(0);
-  const iconAnimationStyles = Animated9.useAnimatedStyle(() => {
+  const iconRotation = Animated10.useSharedValue(0);
+  const iconAnimationStyles = Animated10.useAnimatedStyle(() => {
     "worklet";
     return {
       transform: [{ rotate: `${iconRotation.value}deg` }]
@@ -9827,10 +9922,10 @@ var Slider = React65__default.default.forwardRef(
     const isWeb = reactNative.Platform.OS === "web";
     const [trackLayoutWidth, setTrackLayoutWidth] = React65.useState(0);
     const webFraction = max > min ? (currentValue - min) / (max - min) : 0;
-    const trackWidth = Animated9.useSharedValue(0);
-    const thumbLeft = Animated9.useSharedValue(0);
-    const indicatorWidth = Animated9.useSharedValue(thumbSize / 2);
-    const lastReported = Animated9.useSharedValue(currentValue);
+    const trackWidth = Animated10.useSharedValue(0);
+    const thumbLeft = Animated10.useSharedValue(0);
+    const indicatorWidth = Animated10.useSharedValue(thumbSize / 2);
+    const lastReported = Animated10.useSharedValue(currentValue);
     const handleJSUpdate = (v) => {
       if (!isControlled) setInternalValue(v);
       onValueChange == null ? void 0 : onValueChange(v);
@@ -9900,10 +9995,10 @@ var Slider = React65__default.default.forwardRef(
       "worklet";
       reactNativeWorklets.scheduleOnRN(handleCommit, lastReported.value);
     });
-    const thumbAnimStyle = Animated9.useAnimatedStyle(() => ({
+    const thumbAnimStyle = Animated10.useAnimatedStyle(() => ({
       transform: [{ translateX: thumbLeft.value }]
     }));
-    const indicatorAnimStyle = Animated9.useAnimatedStyle(() => ({
+    const indicatorAnimStyle = Animated10.useAnimatedStyle(() => ({
       width: indicatorWidth.value
     }));
     const handleWebValueChange = (values) => {
@@ -10085,9 +10180,9 @@ var Slider = React65__default.default.forwardRef(
                 onLayout: handleNativeLayout,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: trackBackgroundStyle }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Animated9__default.default.View, { style: [indicatorBaseStyle, indicatorAnimStyle] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Animated10__default.default.View, { style: [indicatorBaseStyle, indicatorAnimStyle] }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    Animated9__default.default.View,
+                    Animated10__default.default.View,
                     {
                       style: [
                         __spreadProps(__spreadValues({}, thumbStyle), { position: "absolute", left: 0 }),
@@ -10442,8 +10537,8 @@ Notification.displayName = "Notification";
 var parseTokenValue47 = (value) => parseFloat(value);
 var SCALE_STEP = 0.06;
 var SPRING_CONFIG = { damping: 20, stiffness: 260, mass: 0.5 };
-var CARD_ENTERING = Animated9.FadeInDown.duration(200).easing(Animated9.Easing.inOut(Animated9.Easing.quad));
-var CARD_EXITING = Animated9.FadeOutDown.duration(200);
+var CARD_ENTERING = Animated10.FadeInDown.duration(200).easing(Animated10.Easing.inOut(Animated10.Easing.quad));
+var CARD_EXITING = Animated10.FadeOutDown.duration(200);
 var CARD_BASE_STYLE = {
   position: "absolute",
   bottom: 0,
@@ -10484,15 +10579,15 @@ var StackedCard = ({
 }) => {
   const isBackfillRef = React65__default.default.useRef(isBackfill);
   const wasBackfill = isBackfillRef.current;
-  const depthSV = Animated9.useSharedValue(wasBackfill ? depth + 1 : depth);
-  const opacitySV = Animated9.useSharedValue(wasBackfill ? 0 : 1);
+  const depthSV = Animated10.useSharedValue(wasBackfill ? depth + 1 : depth);
+  const opacitySV = Animated10.useSharedValue(wasBackfill ? 0 : 1);
   React65__default.default.useEffect(() => {
-    depthSV.value = Animated9.withSpring(depth, SPRING_CONFIG);
+    depthSV.value = Animated10.withSpring(depth, SPRING_CONFIG);
   }, [depth, depthSV]);
   React65__default.default.useEffect(() => {
-    if (wasBackfill) opacitySV.value = Animated9.withSpring(1, SPRING_CONFIG);
+    if (wasBackfill) opacitySV.value = Animated10.withSpring(1, SPRING_CONFIG);
   }, []);
-  const depthStyle = Animated9.useAnimatedStyle(() => ({
+  const depthStyle = Animated10.useAnimatedStyle(() => ({
     opacity: opacitySV.value,
     transform: [
       { translateY: depthSV.value * revealStep },
@@ -10501,7 +10596,7 @@ var StackedCard = ({
   }));
   const isFront = depth === 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Animated9__default.default.View,
+    Animated10__default.default.View,
     {
       entering: wasBackfill ? void 0 : CARD_ENTERING,
       exiting: CARD_EXITING,
@@ -10509,7 +10604,7 @@ var StackedCard = ({
       accessibilityElementsHidden: !isFront,
       importantForAccessibility: isFront ? "auto" : "no-hide-descendants",
       style: [CARD_BASE_STYLE, { zIndex: -depth }],
-      children: /* @__PURE__ */ jsxRuntime.jsx(Animated9__default.default.View, { style: [DEPTH_LAYER_STYLE, depthStyle], children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(Animated10__default.default.View, { style: [DEPTH_LAYER_STYLE, depthStyle], children: /* @__PURE__ */ jsxRuntime.jsx(
         Notification,
         {
           variant: "toast",
@@ -11214,15 +11309,16 @@ var MessageCard = {
   Banner: MessageCardBanner
 };
 var parseTokenValue52 = (value) => parseFloat(value);
-var slideEaseOut = Animated9.Easing.out(Animated9.Easing.quad);
+var slideEaseOut = Animated10.Easing.out(Animated10.Easing.quad);
 var MONTH_SLIDE_ENTERING = {
-  forward: Animated9.FadeInRight.duration(250).easing(slideEaseOut),
-  backward: Animated9.FadeInLeft.duration(250).easing(slideEaseOut)
+  forward: Animated10.FadeInRight.duration(250).easing(slideEaseOut),
+  backward: Animated10.FadeInLeft.duration(250).easing(slideEaseOut)
 };
 var MONTH_SLIDE_EXITING = {
-  forward: Animated9.FadeOutLeft.duration(200),
-  backward: Animated9.FadeOutRight.duration(200)
+  forward: Animated10.FadeOutLeft.duration(200),
+  backward: Animated10.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);
@@ -11334,7 +11430,9 @@ var DatePicker = React65__default.default.forwardRef(
       getMonthLabel,
       weekDayLabels = DEFAULT_WEEK_LABELS,
       getDateState,
+      getDateAccessibilityLabel,
       isDateDisabled,
+      focusDate,
       minDate,
       maxDate
     } = _b, rest = __objRest(_b, [
@@ -11354,7 +11452,9 @@ var DatePicker = React65__default.default.forwardRef(
       "getMonthLabel",
       "weekDayLabels",
       "getDateState",
+      "getDateAccessibilityLabel",
       "isDateDisabled",
+      "focusDate",
       "minDate",
       "maxDate"
     ]);
@@ -11391,6 +11491,18 @@ var DatePicker = React65__default.default.forwardRef(
       }),
       [datePicker, dt, theme2]
     );
+    const cellRefs = React65.useRef(/* @__PURE__ */ new Map());
+    const focusTime = focusDate == null ? void 0 : focusDate.getTime();
+    React65.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) reactNative.AccessibilityInfo.sendAccessibilityEvent(cell, "focus");
+      }, FOCUS_DELAY_MS);
+      return () => clearTimeout(timeout);
+    }, [focusTime, year, month]);
     const resolvedGetDateState = React65.useCallback(
       (date) => {
         var _a3;
@@ -11530,6 +11642,7 @@ var DatePicker = React65__default.default.forwardRef(
                 token: datePicker.month.typography,
                 align: "center",
                 color: datePicker.month.colour.text.default,
+                accessibilityRole: "header",
                 children: resolvedMonthLabel
               }
             ) }),
@@ -11547,86 +11660,88 @@ var DatePicker = React65__default.default.forwardRef(
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Animated9__default.default.View,
+            Animated10__default.default.View,
             {
               entering: MONTH_SLIDE_ENTERING[slideDir],
               exiting: MONTH_SLIDE_EXITING[slideDir],
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                StyledDatesGrid,
-                {
-                  rowGap,
-                  accessible: true,
-                  accessibilityLabel: resolvedMonthLabel,
-                  children: calendarRows.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(StyledDateRow, { children: row.map(
-                    (date, colIdx) => !date ? /* @__PURE__ */ jsxRuntime.jsx(
-                      StyledDateCell,
-                      {
-                        cellHeight,
-                        accessibilityElementsHidden: true
-                      },
-                      `empty-${rowIdx}-${colIdx}`
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      StyledDateCell,
-                      {
-                        cellHeight,
-                        children: (() => {
-                          const isDisabled = resolvedIsDateDisabled(date);
-                          const {
+              children: /* @__PURE__ */ jsxRuntime.jsx(StyledDatesGrid, { rowGap, children: calendarRows.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(StyledDateRow, { children: row.map(
+                (date, colIdx) => !date ? /* @__PURE__ */ jsxRuntime.jsx(
+                  StyledDateCell,
+                  {
+                    cellHeight,
+                    accessibilityElementsHidden: true
+                  },
+                  `empty-${rowIdx}-${colIdx}`
+                ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                        reactNative.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__ */ jsxRuntime.jsx(
-                            reactNative.Pressable,
+                            resolvedMonthLabel
+                          )) != null ? _a3 : `${date.getDate()} ${resolvedMonthLabel}`,
+                          accessibilityState: {
+                            selected: isSelected,
+                            disabled: isDisabled
+                          },
+                          accessibilityHint: state === "current" ? "Today" : void 0,
+                          style: { opacity: cellOpacity },
+                          children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                                StyledIndicator3,
+                                Typography,
                                 {
-                                  indicatorSize,
-                                  indicatorBorderRadius,
-                                  indicatorBg,
-                                  indicatorBorderWidth: indicatorBorderColor !== "transparent" ? selectedBorderWidth : 0,
-                                  indicatorBorderColor,
-                                  indicatorBorderStyle: indicatorBorderColor !== "transparent" ? "dashed" : "solid",
-                                  children: /* @__PURE__ */ jsxRuntime.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}`
           )
@@ -12781,27 +12896,27 @@ var ShineOverlay = ({
   radius,
   highlight
 }) => {
-  const reducedMotion = Animated9.useReducedMotion();
+  const reducedMotion = Animated10.useReducedMotion();
   const [width, setWidth] = React65__default.default.useState(0);
-  const progress = Animated9.useSharedValue(0);
+  const progress = Animated10.useSharedValue(0);
   const bandWidth = width * SHINE_BAND_RATIO;
   React65__default.default.useEffect(() => {
     if (reducedMotion || !width) return;
-    progress.value = Animated9.withDelay(
+    progress.value = Animated10.withDelay(
       ANIMATION_DELAY,
-      Animated9.withRepeat(
-        Animated9.withSequence(
-          Animated9.withTiming(1, {
+      Animated10.withRepeat(
+        Animated10.withSequence(
+          Animated10.withTiming(1, {
             duration: SHINE_SWEEP,
-            easing: Animated9.Easing.inOut(Animated9.Easing.ease)
+            easing: Animated10.Easing.inOut(Animated10.Easing.ease)
           }),
-          Animated9.withDelay(SHINE_REST, Animated9.withTiming(0, { duration: 0 }))
+          Animated10.withDelay(SHINE_REST, Animated10.withTiming(0, { duration: 0 }))
         ),
         ANIMATION_ITERATIONS
       )
     );
   }, [progress, reducedMotion, width]);
-  const bandStyle = Animated9.useAnimatedStyle(() => ({
+  const bandStyle = Animated10.useAnimatedStyle(() => ({
     transform: [
       {
         translateX: -bandWidth * 1.5 + progress.value * (width + bandWidth * 2.5)
@@ -12822,7 +12937,7 @@ var ShineOverlay = ({
         { borderRadius: radius, overflow: "hidden" }
       ],
       children: width > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        Animated9__default.default.View,
+        Animated10__default.default.View,
         {
           style: [
             { position: "absolute", top: 0, bottom: 0, width: bandWidth },
@@ -12851,33 +12966,33 @@ var ShineOverlay = ({
 var createNudgingIcon = (IconComponent, axis, direction) => {
   var _a;
   const NudgingIcon = (props) => {
-    const reducedMotion = Animated9.useReducedMotion();
-    const offset = Animated9.useSharedValue(0);
+    const reducedMotion = Animated10.useReducedMotion();
+    const offset = Animated10.useSharedValue(0);
     React65__default.default.useEffect(() => {
       if (reducedMotion) return;
-      const step = (to) => Animated9.withTiming(to, {
+      const step = (to) => Animated10.withTiming(to, {
         duration: NUDGE_STEP,
-        easing: Animated9.Easing.inOut(Animated9.Easing.ease)
+        easing: Animated10.Easing.inOut(Animated10.Easing.ease)
       });
       const distance = NUDGE_DISTANCE * direction;
-      offset.value = Animated9.withDelay(
+      offset.value = Animated10.withDelay(
         ANIMATION_DELAY,
-        Animated9.withRepeat(
-          Animated9.withSequence(
+        Animated10.withRepeat(
+          Animated10.withSequence(
             step(distance),
             step(0),
             step(distance),
             step(0),
-            Animated9.withDelay(NUDGE_REST, Animated9.withTiming(0, { duration: 0 }))
+            Animated10.withDelay(NUDGE_REST, Animated10.withTiming(0, { duration: 0 }))
           ),
           ANIMATION_ITERATIONS
         )
       );
     }, [offset, reducedMotion]);
-    const nudgeStyle = Animated9.useAnimatedStyle(
+    const nudgeStyle = Animated10.useAnimatedStyle(
       () => axis === "translateX" ? { transform: [{ translateX: offset.value }] } : { transform: [{ translateY: offset.value }] }
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(Animated9__default.default.View, { style: nudgeStyle, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, __spreadValues({}, props)) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Animated10__default.default.View, { style: nudgeStyle, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, __spreadValues({}, props)) });
   };
   NudgingIcon.displayName = `Nudging(${(_a = IconComponent.displayName) != null ? _a : "Icon"})`;
   return NudgingIcon;