@webority-technologies/mobile 0.0.1

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

@@ -0,0 +1,808 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Easing, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DAY_MS = 24 * 60 * 60 * 1000;
+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 gridStart = new Date(year, month, 1 - offset);
+  const cells = [];
+  for (let i = 0; i < 42; i += 1) {
+    const d = new Date(gridStart.getTime() + i * DAY_MS);
+    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 {
+    visible,
+    value,
+    onSelect,
+    onClose,
+    minDate,
+    maxDate,
+    disabledDates,
+    mode = 'modal',
+    locale = 'en-IN',
+    weekStartsOn = 0,
+    title = 'Select Date',
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const today = useMemo(() => startOfDay(new Date()), []);
+  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(new Animated.Value(0)).current;
+  const sheet = useRef(new Animated.Value(0)).current;
+  const monthSlide = useRef(new Animated.Value(0)).current;
+  const monthFade = useRef(new Animated.Value(1)).current;
+  const selectScale = useRef(new Animated.Value(1)).current;
+  const viewFade = useRef(new Animated.Value(1)).current;
+  const viewScale = useRef(new Animated.Value(1)).current;
+  const headerScale = useRef(new Animated.Value(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.
+  useEffect(() => {
+    if (mode !== 'modal') return;
+    if (visible) {
+      backdrop.setValue(0);
+      sheet.setValue(0);
+      Animated.parallel([Animated.timing(backdrop, {
+        toValue: 1,
+        duration: theme.motion.duration.normal,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true
+      }), 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
+      })]).start();
+    }
+  }, [visible, mode, backdrop, sheet, 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 => {
+    triggerHaptic('impactLight');
+    const direction = delta > 0 ? 1 : -1;
+    const distance = 32;
+    Animated.sequence([Animated.parallel([Animated.timing(monthSlide, {
+      toValue: -direction * distance,
+      duration: 140,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true
+    }), Animated.timing(monthFade, {
+      toValue: 0,
+      duration: 140,
+      useNativeDriver: true
+    })]), Animated.timing(monthSlide, {
+      toValue: direction * distance,
+      duration: 0,
+      useNativeDriver: true
+    }), Animated.parallel([Animated.timing(monthSlide, {
+      toValue: 0,
+      duration: 160,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    }), Animated.timing(monthFade, {
+      toValue: 1,
+      duration: 160,
+      useNativeDriver: true
+    })])]).start();
+    const next = addMonths(anchor, delta);
+    setAnchor(next);
+    AccessibilityInfo.announceForAccessibility(formatMonthYear(next, locale));
+  }, [anchor, locale, monthFade, monthSlide]);
+  const goPrev = useCallback(() => {
+    if (viewMode === 'days') {
+      animateMonthChange(-1);
+      return;
+    }
+    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]);
+  const goNext = useCallback(() => {
+    if (viewMode === 'days') {
+      animateMonthChange(1);
+      return;
+    }
+    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]);
+
+  // View-mode transition: fade + scale (200ms, native driver).
+  const animateViewTransition = useCallback(() => {
+    viewFade.setValue(0);
+    viewScale.setValue(0.9);
+    Animated.parallel([Animated.timing(viewFade, {
+      toValue: 1,
+      duration: 200,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    }), Animated.timing(viewScale, {
+      toValue: 1,
+      duration: 200,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    })]).start();
+  }, [viewFade, viewScale]);
+  const cycleViewMode = useCallback(() => {
+    triggerHaptic('selection');
+    Animated.sequence([Animated.timing(headerScale, {
+      toValue: 0.96,
+      duration: 80,
+      useNativeDriver: true
+    }), Animated.timing(headerScale, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true
+    })]).start();
+    setViewMode(prev => {
+      if (prev === 'days') return 'years';
+      if (prev === 'years') return 'decades';
+      return 'years';
+    });
+    animateViewTransition();
+  }, [animateViewTransition, headerScale]);
+  const pickYear = useCallback(year => {
+    triggerHaptic('selection');
+    setAnchor(prev => new Date(year, prev.getMonth(), 1));
+    setViewMode('days');
+    animateViewTransition();
+  }, [animateViewTransition]);
+  const pickDecade = useCallback(decadeStart => {
+    triggerHaptic('selection');
+    // 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]);
+  const pressDay = useCallback(cell => {
+    if (isDisabled(cell.date)) return;
+    triggerHaptic('selection');
+    setPendingDate(cell.date);
+    if (!cell.inMonth) {
+      setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
+    }
+    selectScale.setValue(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]);
+  const handleClose = useCallback(() => {
+    if (mode !== 'modal') {
+      onClose();
+      return;
+    }
+    Animated.parallel([Animated.timing(backdrop, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true
+    }), Animated.timing(sheet, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true
+    })]).start(() => {
+      onClose();
+    });
+  }, [backdrop, mode, onClose, sheet, theme.motion.duration.fast]);
+  const handleCancel = useCallback(() => {
+    triggerHaptic('selection');
+    handleClose();
+  }, [handleClose]);
+  const handleConfirm = useCallback(() => {
+    if (!pendingDate) return;
+    triggerHaptic('notificationSuccess');
+    onSelect(pendingDate);
+    handleClose();
+  }, [handleClose, onSelect, pendingDate]);
+  const sheetTranslate = sheet.interpolate({
+    inputRange: [0, 1],
+    outputRange: [320, 0]
+  });
+  const calendar = /*#__PURE__*/_jsxs(View, {
+    style: [styles.card, style],
+    accessibilityRole: mode === 'modal' ? undefined : 'none',
+    accessible: false,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.titleRow,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        accessibilityRole: "header",
+        children: title
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.headerRow,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        onPress: goPrev,
+        style: ({
+          pressed
+        }) => [styles.navBtn, pressed && styles.navBtnPressed],
+        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,
+        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, viewMode === 'days' ? {
+              transform: [{
+                translateX: monthSlide
+              }]
+            } : null],
+            accessibilityLiveRegion: "polite",
+            children: headerLabel
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.headerCaret,
+            allowFontScaling: false,
+            children: ' ▾'
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: goNext,
+        style: ({
+          pressed
+        }) => [styles.navBtn, pressed && styles.navBtnPressed],
+        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,
+                  transform: selected ? [{
+                    scale: selectScale
+                  }] : undefined
+                }],
+                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],
+        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
+        }],
+        accessibilityRole: "button",
+        accessibilityLabel: confirmLabel,
+        accessibilityState: {
+          disabled: !pendingDate
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.footerBtnText, {
+            color: theme.colors.text.inverse
+          }],
+          children: confirmLabel
+        })
+      })]
+    })]
+  });
+  if (mode === 'inline') {
+    if (!visible) return null;
+    return calendar;
+  }
+  return /*#__PURE__*/_jsxs(Modal, {
+    visible: visible,
+    transparent: true,
+    statusBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: handleClose,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.backdrop, {
+        opacity: backdrop,
+        backgroundColor: theme.colors.background.overlay
+      }],
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: StyleSheet.absoluteFill,
+        onPress: handleClose,
+        accessibilityLabel: "Dismiss"
+      })
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.sheetWrap, {
+        opacity: sheet,
+        transform: [{
+          translateY: sheetTranslate
+        }]
+      }],
+      accessibilityViewIsModal: true,
+      accessibilityRole: "none",
+      children: calendar
+    })]
+  });
+};
+const buildStyles = theme => {
+  const cardShadow = theme.shadows.lg;
+  return StyleSheet.create({
+    backdrop: {
+      ...StyleSheet.absoluteFillObject
+    },
+    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,
+      padding: theme.spacing.lg,
+      shadowColor: cardShadow.shadowColor,
+      shadowOffset: cardShadow.shadowOffset,
+      shadowOpacity: cardShadow.shadowOpacity,
+      shadowRadius: cardShadow.shadowRadius,
+      elevation: cardShadow.elevation
+    },
+    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: 36,
+      height: 36,
+      borderRadius: theme.radius.full,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.background.secondary
+    },
+    navBtnPressed: {
+      backgroundColor: theme.colors.surface.pressed
+    },
+    navText: {
+      fontSize: 22,
+      lineHeight: 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
+    },
+    headerCaret: {
+      fontSize: theme.typography.fontSize.sm,
+      color: theme.colors.text.secondary,
+      fontWeight: theme.typography.fontWeight.semibold
+    },
+    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: 2
+    },
+    dayInner: {
+      width: '100%',
+      height: '100%',
+      borderRadius: theme.radius.full,
+      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: 4
+    },
+    yearInner: {
+      width: '100%',
+      height: '100%',
+      borderRadius: theme.radius.lg,
+      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: 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,
+      minHeight: 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