@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/components/DatePicker/DatePicker.js

@@ -0,0 +1,1049 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Easing, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useDragToDismiss } from "../../hooks/useDragToDismiss.js";
+import { createAnimatedValue, setNativeValue, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { defaultIcons } from "../AppIcon/defaultIcons.js";
+import { PickerTrigger } from "../PickerTrigger/index.js";
+
+/**
+ * DatePicker operates in two modes:
+ *
+ * 1. **Controlled-modal mode** — pass `visible` (plus `onChange` / `onClose`)
+ *    and own the open state externally. The component renders only the modal.
+ * 2. **Trigger mode** — omit `visible`. The component renders a built-in
+ *    PickerTrigger field (label / value / placeholder / chevron / clear /
+ *    helper / error / size / variant) and manages its own open state. The
+ *    field opens the modal on press and closes it on confirm/cancel.
+ *
+ * `onChange` / `onClose` are typed optional to support trigger-only usage
+ * where the consumer may not need either callback. In controlled-modal mode
+ * they remain semantically required.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const GRID_SIZE = 12; // 4 cols x 3 rows for year / decade grids
+const DECADE_SPAN = 10;
+const startOfDay = date => {
+  const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  return d;
+};
+const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+const toIso = date => {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+};
+const addMonths = (date, delta) => new Date(date.getFullYear(), date.getMonth() + delta, 1);
+const buildMonthMatrix = (anchor, weekStartsOn) => {
+  const year = anchor.getFullYear();
+  const month = anchor.getMonth();
+  const firstOfMonth = new Date(year, month, 1);
+  const firstWeekday = firstOfMonth.getDay();
+  const offset = (firstWeekday - weekStartsOn + 7) % 7;
+  const cells = [];
+  for (let i = 0; i < 42; i += 1) {
+    // Calendar arithmetic, not `gridStart + i * 86400000`: adding a fixed 24h
+    // across a DST transition shifts local time by an hour, which duplicates
+    // or skips a day in the grid. Invisible in IST, wrong everywhere that
+    // observes DST.
+    const d = new Date(year, month, 1 - offset + i);
+    cells.push({
+      date: d,
+      inMonth: d.getMonth() === month,
+      iso: toIso(d)
+    });
+  }
+  return cells;
+};
+const weekdayLabels = (locale, weekStartsOn) => {
+  // Reference Sunday Jan 4 1970 (weekday 0) — pick 7 consecutive days starting at weekStartsOn.
+  const fmt = new Intl.DateTimeFormat(locale, {
+    weekday: 'short'
+  });
+  const labels = [];
+  for (let i = 0; i < 7; i += 1) {
+    const day = (weekStartsOn + i) % 7;
+    // Jan 4 1970 = Sunday (day 0); shift to the right weekday.
+    const ref = new Date(1970, 0, 4 + day);
+    labels.push(fmt.format(ref));
+  }
+  return labels;
+};
+const formatMonthYear = (date, locale) => new Intl.DateTimeFormat(locale, {
+  month: 'long',
+  year: 'numeric'
+}).format(date);
+const formatLongDate = (date, locale) => new Intl.DateTimeFormat(locale, {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric'
+}).format(date);
+const decadeStartFor = year => Math.floor(year / DECADE_SPAN) * DECADE_SPAN;
+
+// 12 years centered on the anchor year: 4 prior, anchor, 7 following.
+const buildYearCells = anchorYear => {
+  const start = anchorYear - 4;
+  return Array.from({
+    length: GRID_SIZE
+  }, (_, i) => start + i);
+};
+
+// 12 decades centered on the anchor decade: 4 prior, anchor decade, 7 following.
+const buildDecadeCells = anchorYear => {
+  const startDecade = decadeStartFor(anchorYear) - 4 * DECADE_SPAN;
+  return Array.from({
+    length: GRID_SIZE
+  }, (_, i) => startDecade + i * DECADE_SPAN);
+};
+const DatePicker = props => {
+  const {
+    value,
+    onChange,
+    onClose,
+    minDate,
+    maxDate,
+    disabledDates,
+    mode = 'modal',
+    locale = 'en-IN',
+    weekStartsOn = 0,
+    title = 'Select Date',
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    style,
+    containerStyle,
+    headerLabelStyle,
+    navButtonStyle,
+    footerButtonStyle,
+    haptic,
+    testID,
+    label,
+    placeholder,
+    helperText,
+    error,
+    required,
+    disabled,
+    size,
+    variant,
+    clearable,
+    onClear,
+    formatValue,
+    triggerStyle
+  } = props;
+
+  // Controlled vs uncontrolled detection: if `visible` is supplied (even
+  // `false`), the consumer owns the open state; otherwise we own it.
+  const isControlled = props.visible !== undefined;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = isControlled ? props.visible : internalOpen;
+
+  // In trigger mode the trigger field is what's on screen by default, so it
+  // carries the bare testID; the calendar (only mounted once opened) gets a
+  // derived id to avoid two nodes sharing the same testID when both render.
+  const calendarTestID = isControlled ? testID : testID ? `${testID}-calendar` : undefined;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+
+  // Refreshed each time the picker opens: computed once at mount, an app left
+  // open overnight would keep highlighting yesterday.
+  const [today, setToday] = useState(() => startOfDay(new Date()));
+  useEffect(() => {
+    if (open) {
+      setToday(startOfDay(new Date()));
+    }
+  }, [open]);
+  const initialAnchor = value ? startOfDay(value) : today;
+  const [anchor, setAnchor] = useState(initialAnchor);
+  const [pendingDate, setPendingDate] = useState(value ? startOfDay(value) : null);
+  const [viewMode, setViewMode] = useState('days');
+
+  // Animations
+  const backdrop = useRef(createAnimatedValue(0)).current;
+  const sheet = useRef(createAnimatedValue(0)).current;
+  // Live drag offset for drag-to-dismiss; the sheet's measured height is how far it travels.
+  const drag = useRef(createAnimatedValue(0)).current;
+  const sheetHeight = useRef(0);
+  const monthSlide = useRef(createAnimatedValue(0)).current;
+  const monthFade = useRef(createAnimatedValue(1)).current;
+  const selectScale = useRef(createAnimatedValue(1)).current;
+  const viewFade = useRef(createAnimatedValue(1)).current;
+  const viewScale = useRef(createAnimatedValue(1)).current;
+  const headerScale = useRef(createAnimatedValue(1)).current;
+
+  // Sync anchor / pending when value prop changes.
+  useEffect(() => {
+    if (value) {
+      const d = startOfDay(value);
+      setPendingDate(d);
+      setAnchor(d);
+    } else {
+      setPendingDate(null);
+    }
+  }, [value]);
+
+  // Modal open / close animation. Backdrop opacity runs on JS driver — see
+  // Modal.tsx for the RN 0.85 / Fabric two-bug reason (view flattening +
+  // native-driver opacity on Animated.View with backgroundColor). Sheet
+  // transform stays native.
+  useEffect(() => {
+    if (mode !== 'modal') {
+      return;
+    }
+    if (open) {
+      backdrop.setValue(0);
+      setNativeValue(sheet, 0);
+      setNativeValue(drag, 0);
+      const anim = Animated.parallel([Animated.timing(backdrop, {
+        toValue: 1,
+        duration: theme.motion.duration.normal,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: false
+      }), Animated.spring(sheet, {
+        toValue: 1,
+        damping: theme.motion.spring.gentle.damping,
+        stiffness: theme.motion.spring.gentle.stiffness,
+        mass: theme.motion.spring.gentle.mass,
+        useNativeDriver: true
+      })]);
+      anim.start();
+      return () => anim.stop();
+    }
+  }, [open, mode, backdrop, sheet, drag, theme.motion]);
+  const disabledIsoSet = useMemo(() => {
+    const set = new Set();
+    disabledDates?.forEach(d => set.add(toIso(startOfDay(d))));
+    return set;
+  }, [disabledDates]);
+  const minDay = useMemo(() => minDate ? startOfDay(minDate) : null, [minDate]);
+  const maxDay = useMemo(() => maxDate ? startOfDay(maxDate) : null, [maxDate]);
+  const isDisabled = useCallback(date => {
+    if (minDay && date.getTime() < minDay.getTime()) {
+      return true;
+    }
+    if (maxDay && date.getTime() > maxDay.getTime()) {
+      return true;
+    }
+    if (disabledIsoSet.has(toIso(date))) {
+      return true;
+    }
+    return false;
+  }, [minDay, maxDay, disabledIsoSet]);
+  const cells = useMemo(() => buildMonthMatrix(anchor, weekStartsOn), [anchor, weekStartsOn]);
+  const yearCells = useMemo(() => buildYearCells(anchor.getFullYear()), [anchor]);
+  const decadeCells = useMemo(() => buildDecadeCells(anchor.getFullYear()), [anchor]);
+  const weekdays = useMemo(() => weekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
+  const headerLabel = useMemo(() => {
+    if (viewMode === 'days') {
+      return formatMonthYear(anchor, locale);
+    }
+    if (viewMode === 'years') {
+      const first = yearCells[0];
+      const last = yearCells[yearCells.length - 1];
+      return `${first} - ${last}`;
+    }
+    const first = decadeCells[0];
+    const last = decadeCells[decadeCells.length - 1] + (DECADE_SPAN - 1);
+    return `${first} - ${last}`;
+  }, [anchor, decadeCells, locale, viewMode, yearCells]);
+  const isYearDisabled = useCallback(year => {
+    if (minDay && year < minDay.getFullYear()) {
+      return true;
+    }
+    if (maxDay && year > maxDay.getFullYear()) {
+      return true;
+    }
+    return false;
+  }, [minDay, maxDay]);
+  const isDecadeDisabled = useCallback(decadeStart => {
+    const decadeEnd = decadeStart + DECADE_SPAN - 1;
+    if (minDay && decadeEnd < minDay.getFullYear()) {
+      return true;
+    }
+    if (maxDay && decadeStart > maxDay.getFullYear()) {
+      return true;
+    }
+    return false;
+  }, [minDay, maxDay]);
+  const animateMonthChange = useCallback(delta => {
+    if (haptic !== false) {
+      triggerHaptic('impactLight');
+    }
+    const direction = delta > 0 ? 1 : -1;
+    const distance = theme.components.datePicker?.monthSlideDistance ?? 32;
+    const outDuration = theme.components.datePicker?.monthSlideOutDuration ?? theme.motion.duration.fast ?? 140;
+    const inDuration = theme.components.datePicker?.monthSlideInDuration ?? theme.motion.duration.fast ?? 160;
+    Animated.sequence([Animated.parallel([Animated.timing(monthSlide, {
+      toValue: -direction * distance,
+      duration: outDuration,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true
+    }), Animated.timing(monthFade, {
+      toValue: 0,
+      duration: outDuration,
+      useNativeDriver: true
+    })]), Animated.timing(monthSlide, {
+      toValue: direction * distance,
+      duration: 0,
+      useNativeDriver: true
+    }), Animated.parallel([Animated.timing(monthSlide, {
+      toValue: 0,
+      duration: inDuration,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    }), Animated.timing(monthFade, {
+      toValue: 1,
+      duration: inDuration,
+      useNativeDriver: true
+    })])]).start();
+    const next = addMonths(anchor, delta);
+    setAnchor(next);
+    AccessibilityInfo.announceForAccessibility(formatMonthYear(next, locale));
+  }, [anchor, haptic, locale, monthFade, monthSlide, theme.components.datePicker, theme.motion.duration.fast]);
+  const goPrev = useCallback(() => {
+    if (viewMode === 'days') {
+      animateMonthChange(-1);
+      return;
+    }
+    if (haptic !== false) {
+      triggerHaptic('impactLight');
+    }
+    if (viewMode === 'years') {
+      setAnchor(prev => new Date(prev.getFullYear() - GRID_SIZE, prev.getMonth(), 1));
+    } else {
+      setAnchor(prev => new Date(prev.getFullYear() - GRID_SIZE * DECADE_SPAN, prev.getMonth(), 1));
+    }
+  }, [animateMonthChange, viewMode, haptic]);
+  const goNext = useCallback(() => {
+    if (viewMode === 'days') {
+      animateMonthChange(1);
+      return;
+    }
+    if (haptic !== false) {
+      triggerHaptic('impactLight');
+    }
+    if (viewMode === 'years') {
+      setAnchor(prev => new Date(prev.getFullYear() + GRID_SIZE, prev.getMonth(), 1));
+    } else {
+      setAnchor(prev => new Date(prev.getFullYear() + GRID_SIZE * DECADE_SPAN, prev.getMonth(), 1));
+    }
+  }, [animateMonthChange, viewMode, haptic]);
+
+  // View-mode transition: fade + scale, native driver.
+  const animateViewTransition = useCallback(() => {
+    const dur = theme.components.datePicker?.viewTransitionDuration ?? theme.motion.duration.normal ?? 200;
+    setNativeValue(viewFade, 0);
+    setNativeValue(viewScale, 0.9);
+    Animated.parallel([Animated.timing(viewFade, {
+      toValue: 1,
+      duration: dur,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    }), Animated.timing(viewScale, {
+      toValue: 1,
+      duration: dur,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    })]).start();
+  }, [viewFade, viewScale, theme.components.datePicker, theme.motion.duration.normal]);
+  const cycleViewMode = useCallback(() => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    const pressDur = theme.components.datePicker?.headerPressDuration ?? 80;
+    const releaseDur = theme.components.datePicker?.headerReleaseDuration ?? 100;
+    Animated.sequence([Animated.timing(headerScale, {
+      toValue: 0.96,
+      duration: pressDur,
+      useNativeDriver: true
+    }), Animated.timing(headerScale, {
+      toValue: 1,
+      duration: releaseDur,
+      useNativeDriver: true
+    })]).start();
+    setViewMode(prev => {
+      if (prev === 'days') {
+        return 'years';
+      }
+      if (prev === 'years') {
+        return 'decades';
+      }
+      return 'years';
+    });
+    animateViewTransition();
+  }, [animateViewTransition, headerScale, haptic, theme.components.datePicker]);
+  const pickYear = useCallback(year => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    setAnchor(prev => new Date(year, prev.getMonth(), 1));
+    setViewMode('days');
+    animateViewTransition();
+  }, [animateViewTransition, haptic]);
+  const pickDecade = useCallback(decadeStart => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    // Anchor mid-decade so the year grid centers nicely on this decade.
+    setAnchor(prev => new Date(decadeStart + 4, prev.getMonth(), 1));
+    setViewMode('years');
+    animateViewTransition();
+  }, [animateViewTransition, haptic]);
+  const pressDay = useCallback(cell => {
+    if (isDisabled(cell.date)) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    setPendingDate(cell.date);
+    if (!cell.inMonth) {
+      setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
+    }
+    setNativeValue(selectScale, 0.7);
+    Animated.spring(selectScale, {
+      toValue: 1,
+      damping: theme.motion.spring.bouncy.damping,
+      stiffness: theme.motion.spring.bouncy.stiffness,
+      mass: theme.motion.spring.bouncy.mass,
+      useNativeDriver: true
+    }).start();
+  }, [isDisabled, selectScale, theme.motion.spring.bouncy, haptic]);
+  const finalizeClose = useCallback(() => {
+    if (isControlled) {
+      onClose?.();
+    } else {
+      setInternalOpen(false);
+      onClose?.();
+    }
+  }, [isControlled, onClose]);
+  const handleClose = useCallback(() => {
+    if (mode !== 'modal') {
+      finalizeClose();
+      return;
+    }
+    Animated.parallel([Animated.timing(backdrop, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: false
+    }), Animated.timing(sheet, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    })]).start(() => {
+      finalizeClose();
+    });
+  }, [backdrop, mode, finalizeClose, sheet, theme.motion.duration.fast, theme.motion.easing.accelerate]);
+
+  // Drag the sheet down to dismiss from its handle / title row only: a pull
+  // on the calendar itself never closes it (the same as BottomSheet).
+  const {
+    handleGesture
+  } = useDragToDismiss({
+    drag,
+    travel: () => sheetHeight.current || 320,
+    onDismiss: handleClose
+  });
+  const handleCancel = useCallback(() => {
+    if (haptic !== false) {
+      triggerHaptic('selection');
+    }
+    handleClose();
+  }, [handleClose, haptic]);
+  const handleConfirm = useCallback(() => {
+    if (!pendingDate) {
+      return;
+    }
+    if (haptic !== false) {
+      triggerHaptic('notificationSuccess');
+    }
+    onChange?.(pendingDate);
+    handleClose();
+  }, [handleClose, onChange, pendingDate, haptic]);
+  const sheetTranslate = sheet.interpolate({
+    inputRange: [0, 1],
+    outputRange: [320, 0]
+  });
+  const titleRow = /*#__PURE__*/_jsx(View, {
+    style: styles.titleRow,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.title,
+      accessibilityRole: "header",
+      children: title
+    })
+  });
+  const calendar = /*#__PURE__*/_jsxs(View, {
+    style: [styles.card, style, containerStyle],
+    accessibilityRole: mode === 'modal' ? undefined : 'none',
+    accessible: false,
+    testID: calendarTestID,
+    children: [mode === 'modal' ?
+    /*#__PURE__*/
+    // The calendar's day cells take taps, so only this top row drags the sheet.
+    _jsx(GestureDetector, {
+      gesture: handleGesture,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.grabArea,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.handle
+        }), titleRow]
+      })
+    }) : titleRow, /*#__PURE__*/_jsxs(View, {
+      style: styles.headerRow,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        onPress: goPrev,
+        style: ({
+          pressed
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
+        accessibilityRole: "button",
+        accessibilityLabel: viewMode === 'days' ? 'Previous month' : viewMode === 'years' ? 'Previous years' : 'Previous decades',
+        hitSlop: 8,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.navText,
+          children: '‹'
+        })
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: cycleViewMode,
+        style: [styles.headerLabelWrap, headerLabelStyle],
+        accessibilityRole: "button",
+        accessibilityLabel: viewMode === 'days' ? `${headerLabel}, switch to year selection` : viewMode === 'years' ? `${headerLabel}, switch to decade selection` : `${headerLabel}, switch to year selection`,
+        hitSlop: 8,
+        children: /*#__PURE__*/_jsxs(Animated.View, {
+          style: [styles.headerLabelInner, {
+            transform: [{
+              scale: headerScale
+            }],
+            opacity: viewMode === 'days' ? monthFade : 1
+          }],
+          children: [/*#__PURE__*/_jsx(Animated.Text, {
+            style: [styles.headerLabel,
+            // Always include the transform — passing null/undefined as a
+            // transform value confuses Animated's processTransform on Fabric.
+            // When the month slide isn't active we still drive translateX
+            // through the same value, just with target 0.
+            {
+              transform: [{
+                translateX: viewMode === 'days' ? monthSlide : 0
+              }]
+            }],
+            accessibilityLiveRegion: "polite",
+            children: headerLabel
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.headerCaret,
+            children: (theme.icons?.chevronDown ?? defaultIcons.chevronDown)({
+              size: theme.typography.fontSize.sm,
+              color: theme.colors.text.secondary
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: goNext,
+        style: ({
+          pressed
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
+        accessibilityRole: "button",
+        accessibilityLabel: viewMode === 'days' ? 'Next month' : viewMode === 'years' ? 'Next years' : 'Next decades',
+        hitSlop: 8,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.navText,
+          children: '›'
+        })
+      })]
+    }), viewMode === 'days' ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.weekdayRow,
+        children: weekdays.map((wd, idx) => /*#__PURE__*/_jsx(View, {
+          style: styles.weekdayCell,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.weekdayText,
+            children: wd
+          })
+        }, `${wd}-${idx}`))
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.grid, {
+          opacity: monthFade,
+          transform: [{
+            translateX: monthSlide
+          }]
+        }],
+        children: Array.from({
+          length: 6
+        }).map((_, row) => /*#__PURE__*/_jsx(View, {
+          style: styles.gridRow,
+          children: cells.slice(row * 7, row * 7 + 7).map(cell => {
+            const disabled = isDisabled(cell.date);
+            const selected = pendingDate ? isSameDay(cell.date, pendingDate) : false;
+            const todayCell = isSameDay(cell.date, today);
+            const cellBg = selected ? theme.colors.primary : todayCell ? 'transparent' : 'transparent';
+            const borderColor = todayCell && !selected ? theme.colors.primary : 'transparent';
+            const textColor = selected ? theme.colors.text.inverse : !cell.inMonth ? theme.colors.text.tertiary : disabled ? theme.colors.text.disabled : theme.colors.text.primary;
+            const opacity = disabled ? 0.3 : !cell.inMonth ? 0.4 : 1;
+            return /*#__PURE__*/_jsx(Pressable, {
+              disabled: disabled,
+              onPress: () => pressDay(cell),
+              accessibilityRole: "button",
+              accessibilityLabel: formatLongDate(cell.date, locale),
+              accessibilityState: {
+                selected,
+                disabled
+              },
+              style: styles.dayCell,
+              children: /*#__PURE__*/_jsx(Animated.View, {
+                style: [styles.dayInner, {
+                  backgroundColor: cellBg,
+                  borderColor,
+                  borderWidth: todayCell && !selected ? 1.5 : 0,
+                  opacity
+                }, selected ? {
+                  transform: [{
+                    scale: selectScale
+                  }]
+                } : null],
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.dayText, {
+                    color: textColor
+                  }],
+                  children: cell.date.getDate()
+                })
+              })
+            }, cell.iso);
+          })
+        }, `r-${row}`))
+      })]
+    }) : viewMode === 'years' ? /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.yearGrid, {
+        opacity: viewFade,
+        transform: [{
+          scale: viewScale
+        }]
+      }],
+      children: Array.from({
+        length: 3
+      }).map((_, row) => /*#__PURE__*/_jsx(View, {
+        style: styles.gridRow,
+        children: yearCells.slice(row * 4, row * 4 + 4).map(year => {
+          const disabled = isYearDisabled(year);
+          const selected = pendingDate ? pendingDate.getFullYear() === year : false;
+          const isToday = today.getFullYear() === year;
+          const cellBg = selected ? theme.colors.primary : 'transparent';
+          const borderColor = isToday && !selected ? theme.colors.primary : 'transparent';
+          const textColor = selected ? theme.colors.text.inverse : disabled ? theme.colors.text.disabled : theme.colors.text.primary;
+          const opacity = disabled ? 0.3 : 1;
+          return /*#__PURE__*/_jsx(Pressable, {
+            disabled: disabled,
+            onPress: () => pickYear(year),
+            accessibilityRole: "button",
+            accessibilityLabel: `Year ${year}`,
+            accessibilityState: {
+              selected,
+              disabled
+            },
+            style: styles.yearCell,
+            children: /*#__PURE__*/_jsx(View, {
+              style: [styles.yearInner, {
+                backgroundColor: cellBg,
+                borderColor,
+                borderWidth: isToday && !selected ? 1.5 : 0,
+                opacity
+              }],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.yearText, {
+                  color: textColor
+                }],
+                children: year
+              })
+            })
+          }, `year-${year}`);
+        })
+      }, `yr-${row}`))
+    }) : /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.yearGrid, {
+        opacity: viewFade,
+        transform: [{
+          scale: viewScale
+        }]
+      }],
+      children: Array.from({
+        length: 3
+      }).map((_, row) => /*#__PURE__*/_jsx(View, {
+        style: styles.gridRow,
+        children: decadeCells.slice(row * 4, row * 4 + 4).map(decadeStart => {
+          const decadeEnd = decadeStart + DECADE_SPAN - 1;
+          const disabled = isDecadeDisabled(decadeStart);
+          const selected = pendingDate ? decadeStartFor(pendingDate.getFullYear()) === decadeStart : false;
+          const isCurrent = decadeStartFor(today.getFullYear()) === decadeStart;
+          const cellBg = selected ? theme.colors.primary : 'transparent';
+          const borderColor = isCurrent && !selected ? theme.colors.primary : 'transparent';
+          const textColor = selected ? theme.colors.text.inverse : disabled ? theme.colors.text.disabled : theme.colors.text.primary;
+          const opacity = disabled ? 0.3 : 1;
+          return /*#__PURE__*/_jsx(Pressable, {
+            disabled: disabled,
+            onPress: () => pickDecade(decadeStart),
+            accessibilityRole: "button",
+            accessibilityLabel: `Decade ${decadeStart} to ${decadeEnd}`,
+            accessibilityState: {
+              selected,
+              disabled
+            },
+            style: styles.yearCell,
+            children: /*#__PURE__*/_jsxs(View, {
+              style: [styles.yearInner, {
+                backgroundColor: cellBg,
+                borderColor,
+                borderWidth: isCurrent && !selected ? 1.5 : 0,
+                opacity
+              }],
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [styles.yearText, {
+                  color: textColor
+                }],
+                children: `${decadeStart}s`
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.decadeRangeText, {
+                  color: selected ? theme.colors.text.inverse : theme.colors.text.tertiary
+                }],
+                children: `${decadeStart}-${decadeEnd}`
+              })]
+            })
+          }, `decade-${decadeStart}`);
+        })
+      }, `dec-${row}`))
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.footer,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        onPress: handleCancel,
+        style: ({
+          pressed
+        }) => [styles.footerBtn, styles.footerCancel, pressed && styles.footerBtnPressed, footerButtonStyle],
+        accessibilityRole: "button",
+        accessibilityLabel: cancelLabel,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.footerBtnText, {
+            color: theme.colors.text.secondary
+          }],
+          children: cancelLabel
+        })
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: handleConfirm,
+        disabled: !pendingDate,
+        style: ({
+          pressed
+        }) => [styles.footerBtn, styles.footerConfirm, {
+          backgroundColor: theme.colors.primary,
+          opacity: !pendingDate ? 0.5 : 1
+        }, pressed && {
+          backgroundColor: theme.colors.primaryHover
+        }, footerButtonStyle],
+        accessibilityRole: "button",
+        accessibilityLabel: confirmLabel,
+        accessibilityState: {
+          disabled: !pendingDate
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.footerBtnText, {
+            color: theme.colors.text.inverse
+          }],
+          children: confirmLabel
+        })
+      })]
+    })]
+  });
+  const formatTriggerValue = formatValue ?? (d => d.toLocaleDateString());
+  const triggerValueText = value ? formatTriggerValue(value) : undefined;
+  const showTrigger = !isControlled;
+  if (mode === 'inline') {
+    if (!open && !showTrigger) {
+      return null;
+    }
+    if (showTrigger) {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(PickerTrigger, {
+          label: label,
+          value: triggerValueText,
+          placeholder: placeholder,
+          helperText: helperText,
+          error: error,
+          required: required,
+          disabled: disabled,
+          size: size,
+          variant: variant,
+          clearable: clearable,
+          onClear: onClear,
+          onPress: () => setInternalOpen(true),
+          triggerStyle: triggerStyle,
+          testID: testID
+        }), open ? calendar : null]
+      });
+    }
+    return calendar;
+  }
+  const modalNode = /*#__PURE__*/_jsx(Modal, {
+    visible: open,
+    transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: handleClose,
+    children: /*#__PURE__*/_jsxs(GestureHandlerRootView
+    // Backdrop wraps the sheet (not sibling) — on Fabric a sibling
+    // backdrop is occluded by the sheet wrapper regardless of order.
+    // collapsable={false} prevents flattening; plain View + pre-baked
+    // rgba colour avoids the Fabric animated-opacity-on-coloured-View bug.
+    // Gesture handler needs its own root inside a native Modal, so the
+    // backdrop doubles as that root.
+    , {
+      collapsable: false,
+      style: [styles.backdrop, {
+        backgroundColor: theme.colors.background.overlay
+      }],
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        style: StyleSheet.absoluteFill,
+        onPress: handleClose,
+        accessibilityLabel: "Dismiss"
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.sheetWrap, {
+          // Push the sheet up by the system nav-bar inset so its content
+          // never lands behind Android gesture/3-button chrome.
+          paddingBottom: Math.max(insets.bottom, theme.spacing.lg),
+          opacity: sheet,
+          transform: [{
+            translateY: Animated.add(sheetTranslate, drag)
+          }]
+        }],
+        onLayout: e => {
+          sheetHeight.current = e.nativeEvent.layout.height;
+        },
+        accessibilityViewIsModal: true,
+        accessibilityRole: "none",
+        children: calendar
+      })]
+    })
+  });
+  if (showTrigger) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(PickerTrigger, {
+        label: label,
+        value: triggerValueText,
+        placeholder: placeholder,
+        helperText: helperText,
+        error: error,
+        required: required,
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        clearable: clearable,
+        onClear: onClear,
+        onPress: () => setInternalOpen(true),
+        triggerStyle: triggerStyle,
+        testID: testID
+      }), modalNode]
+    });
+  }
+  return modalNode;
+};
+const buildStyles = theme => {
+  const cardShadow = theme.shadows.lg;
+  return StyleSheet.create({
+    backdrop: {
+      ...StyleSheet.absoluteFill
+    },
+    sheetWrap: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      paddingHorizontal: theme.spacing.md,
+      paddingBottom: theme.spacing.lg
+    },
+    card: {
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.xl,
+      ...smoothCorners,
+      padding: theme.spacing.lg,
+      shadowColor: cardShadow.shadowColor,
+      shadowOffset: cardShadow.shadowOffset,
+      shadowOpacity: cardShadow.shadowOpacity,
+      shadowRadius: cardShadow.shadowRadius,
+      elevation: cardShadow.elevation
+    },
+    // Reaches up into the card's top padding so the grab target is taller
+    // than the 4 px pill.
+    grabArea: {
+      marginTop: -theme.spacing.lg,
+      paddingTop: theme.spacing.sm
+    },
+    handle: {
+      alignSelf: 'center',
+      width: 36,
+      height: 4,
+      borderRadius: theme.radius.full,
+      ...smoothCorners,
+      backgroundColor: theme.colors.border.secondary,
+      marginBottom: theme.spacing.sm
+    },
+    titleRow: {
+      marginBottom: theme.spacing.sm
+    },
+    title: {
+      fontSize: theme.typography.fontSize.lg,
+      fontWeight: theme.typography.fontWeight.semibold,
+      color: theme.colors.text.primary
+    },
+    headerRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: theme.spacing.md
+    },
+    navBtn: {
+      width: theme.components.datePicker?.navButtonSize ?? 36,
+      height: theme.components.datePicker?.navButtonSize ?? 36,
+      borderRadius: theme.radius.full,
+      ...smoothCorners,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.background.secondary
+    },
+    navBtnPressed: {
+      backgroundColor: theme.colors.surface.pressed
+    },
+    navText: {
+      fontSize: theme.components.datePicker?.navTextFontSize ?? 22,
+      lineHeight: theme.components.datePicker?.navTextLineHeight ?? 24,
+      color: theme.colors.text.primary,
+      fontWeight: theme.typography.fontWeight.semibold
+    },
+    headerLabelWrap: {
+      flex: 1,
+      alignItems: 'center'
+    },
+    headerLabelInner: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    headerLabel: {
+      fontSize: theme.typography.fontSize.base,
+      fontWeight: theme.typography.fontWeight.semibold,
+      color: theme.colors.text.primary
+    },
+    // The month/year dropdown indicator beside the header label: the icon
+    // set's line chevron, sized to the header's small type.
+    headerCaret: {
+      marginLeft: theme.spacing.xs,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    weekdayRow: {
+      flexDirection: 'row',
+      marginBottom: theme.spacing.xs
+    },
+    weekdayCell: {
+      flex: 1,
+      alignItems: 'center',
+      paddingVertical: theme.spacing.xs
+    },
+    weekdayText: {
+      fontSize: theme.typography.fontSize.xs,
+      fontWeight: theme.typography.fontWeight.medium,
+      color: theme.colors.text.tertiary,
+      letterSpacing: theme.typography.letterSpacing.wide
+    },
+    grid: {
+      // Animated container; rows are children.
+    },
+    gridRow: {
+      flexDirection: 'row'
+    },
+    dayCell: {
+      flex: 1,
+      aspectRatio: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: theme.components.datePicker?.dayCellPadding ?? 2
+    },
+    dayInner: {
+      width: '100%',
+      height: '100%',
+      borderRadius: theme.components.datePicker?.dayInnerBorderRadius ?? theme.radius.full,
+      ...smoothCorners,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    dayText: {
+      fontSize: theme.typography.fontSize.sm,
+      fontWeight: theme.typography.fontWeight.medium
+    },
+    yearGrid: {
+      // Animated container; rows are children.
+    },
+    yearCell: {
+      flex: 1,
+      aspectRatio: 1.6,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: theme.components.datePicker?.yearCellPadding ?? 4
+    },
+    yearInner: {
+      width: '100%',
+      height: '100%',
+      borderRadius: theme.components.datePicker?.yearInnerBorderRadius ?? theme.radius.lg,
+      ...smoothCorners,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    yearText: {
+      fontSize: theme.typography.fontSize.base,
+      fontWeight: theme.typography.fontWeight.semibold
+    },
+    decadeRangeText: {
+      fontSize: theme.typography.fontSize.xs,
+      fontWeight: theme.typography.fontWeight.medium,
+      marginTop: theme.components.datePicker?.decadeRangeMarginTop ?? 2
+    },
+    footer: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      alignItems: 'center',
+      marginTop: theme.spacing.lg,
+      gap: theme.spacing.sm
+    },
+    footerBtn: {
+      paddingHorizontal: theme.spacing.lg,
+      paddingVertical: theme.spacing.sm,
+      borderRadius: theme.radius.md,
+      ...smoothCorners,
+      minHeight: theme.components.datePicker?.footerButtonMinHeight ?? 40,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    footerCancel: {
+      backgroundColor: 'transparent'
+    },
+    footerConfirm: {
+      // backgroundColor set inline from theme.
+    },
+    footerBtnPressed: {
+      opacity: 0.85
+    },
+    footerBtnText: {
+      fontSize: theme.typography.fontSize.sm,
+      fontWeight: theme.typography.fontWeight.semibold
+    }
+  });
+};
+export { DatePicker };
+export default DatePicker;
+//# sourceMappingURL=DatePicker.js.map