@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,742 @@
+"use strict";
+
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Easing, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { createAnimatedValue, setNativeValue, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { PickerTrigger } from "../PickerTrigger/index.js";
+
+/**
+ * DateRangePicker — supports two usage modes:
+ *
+ *   1. Controlled-modal mode (pass `visible` + `onClose`): renders only the
+ *      modal; parent owns open/close state.
+ *   2. Trigger mode (omit `visible`): renders a built-in `PickerTrigger`
+ *      field that opens an internally-managed modal on tap. Confirm fires
+ *      `onChange?.(...)` and closes.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DAY_MS = 24 * 60 * 60 * 1000;
+const startOfDay = date => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+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 daysBetween = (a, b) => {
+  const diffMs = startOfDay(b).getTime() - startOfDay(a).getTime();
+  return Math.round(diffMs / DAY_MS);
+};
+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 * DAY_MS` (a fixed-ms step): 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) => {
+  const fmt = new Intl.DateTimeFormat(locale, {
+    weekday: 'short'
+  });
+  const labels = [];
+  for (let i = 0; i < 7; i += 1) {
+    const day = (weekStartsOn + i) % 7;
+    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 formatRangePart = (date, locale) => new Intl.DateTimeFormat(locale, {
+  weekday: 'short',
+  day: 'numeric',
+  month: 'short'
+}).format(date);
+const formatLongDate = (date, locale) => new Intl.DateTimeFormat(locale, {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric'
+}).format(date);
+const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    visible,
+    value,
+    onChange,
+    onClose,
+    label,
+    placeholder,
+    helperText,
+    error,
+    required,
+    disabled,
+    size,
+    variant,
+    clearable,
+    onClear,
+    formatValue,
+    triggerStyle,
+    minDate,
+    maxDate,
+    disabledDates,
+    locale = 'en-IN',
+    weekStartsOn = 0,
+    title = 'Select Date Range',
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    maxRange,
+    haptic,
+    style,
+    containerStyle,
+    headerLabelStyle,
+    navButtonStyle,
+    footerButtonStyle,
+    testID
+  } = props;
+  const isControlled = visible !== undefined;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = isControlled ? 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.start ? startOfDay(value.start) : today;
+  const [anchor, setAnchor] = useState(initialAnchor);
+  const [pendingStart, setPendingStart] = useState(value.start ? startOfDay(value.start) : null);
+  const [pendingEnd, setPendingEnd] = useState(value.end ? startOfDay(value.end) : null);
+
+  // Animations
+  const backdrop = useRef(createAnimatedValue(0)).current;
+  const sheet = useRef(createAnimatedValue(0)).current;
+  const monthSlide = useRef(createAnimatedValue(0)).current;
+  const monthFade = useRef(createAnimatedValue(1)).current;
+
+  // Sync external value -> pending state when it changes.
+  useEffect(() => {
+    if (value.start) {
+      const s = startOfDay(value.start);
+      setPendingStart(s);
+      setAnchor(s);
+    } else {
+      setPendingStart(null);
+    }
+    if (value.end) {
+      setPendingEnd(startOfDay(value.end));
+    } else {
+      setPendingEnd(null);
+    }
+  }, [value.start, value.end]);
+
+  // Modal open / close animation. Backdrop opacity uses JS driver — see
+  // Modal.tsx for the Fabric reason. Sheet transform stays native.
+  useEffect(() => {
+    let anim;
+    if (open) {
+      backdrop.setValue(0);
+      setNativeValue(sheet, 0);
+      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, 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 headerLabel = useMemo(() => formatMonthYear(anchor, locale), [anchor, locale]);
+  const weekdays = useMemo(() => weekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
+  const animateMonthChange = useCallback(delta => {
+    if (haptic !== false) {
+      triggerHaptic('impactLight');
+    }
+    const direction = delta > 0 ? 1 : -1;
+    const distance = theme.components.dateRangePicker?.monthSlideDistance ?? 32;
+    const outDuration = theme.components.dateRangePicker?.monthSlideOutDuration ?? theme.motion.duration.fast ?? 140;
+    const inDuration = theme.components.dateRangePicker?.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.dateRangePicker, theme.motion.duration.fast]);
+  const goPrev = useCallback(() => animateMonthChange(-1), [animateMonthChange]);
+  const goNext = useCallback(() => animateMonthChange(1), [animateMonthChange]);
+  const pressDay = useCallback(cell => {
+    if (isDisabled(cell.date)) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    const target = cell.date;
+
+    // First tap: pick start. Or, when there's already a complete range, restart.
+    if (!pendingStart || pendingStart && pendingEnd) {
+      setPendingStart(target);
+      setPendingEnd(null);
+    } else {
+      // We have a start but no end.
+      if (target.getTime() < pendingStart.getTime()) {
+        // Earlier than start — reset so this becomes the new start.
+        setPendingStart(target);
+        setPendingEnd(null);
+      } else if (isSameDay(target, pendingStart)) {
+        // Tapping start again — single-day range.
+        setPendingEnd(target);
+      } else {
+        if (maxRange && daysBetween(pendingStart, target) + 1 > maxRange) {
+          // Reject ranges longer than maxRange — restart from the new tap.
+          if (haptic !== false) {
+            triggerHaptic('notificationWarning');
+          }
+          setPendingStart(target);
+          setPendingEnd(null);
+          return;
+        }
+        setPendingEnd(target);
+      }
+    }
+    if (!cell.inMonth) {
+      setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
+    }
+  }, [isDisabled, pendingStart, pendingEnd, maxRange, haptic]);
+  const handleCloseModal = useCallback(() => {
+    if (isControlled) {
+      onClose?.();
+    } else {
+      setInternalOpen(false);
+    }
+  }, [isControlled, onClose]);
+  const handleClose = useCallback(() => {
+    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(() => {
+      handleCloseModal();
+    });
+  }, [backdrop, handleCloseModal, sheet, theme.motion.duration.fast, theme.motion.easing.accelerate]);
+  const handleCancel = useCallback(() => {
+    if (haptic !== false) {
+      triggerHaptic('selection');
+    }
+    handleClose();
+  }, [handleClose, haptic]);
+  const handleConfirm = useCallback(() => {
+    if (!pendingStart || !pendingEnd) {
+      return;
+    }
+    if (haptic !== false) {
+      triggerHaptic('notificationSuccess');
+    }
+    onChange?.({
+      start: pendingStart,
+      end: pendingEnd
+    });
+    handleClose();
+  }, [handleClose, onChange, pendingStart, pendingEnd, haptic]);
+  const sheetTranslate = sheet.interpolate({
+    inputRange: [0, 1],
+    outputRange: [320, 0]
+  });
+  const rangeHeader = useMemo(() => {
+    if (pendingStart && pendingEnd) {
+      return `${formatRangePart(pendingStart, locale)} — ${formatRangePart(pendingEnd, locale)}`;
+    }
+    if (pendingStart) {
+      return `${formatRangePart(pendingStart, locale)} — …`;
+    }
+    return '—';
+  }, [pendingStart, pendingEnd, locale]);
+  const isInRangeInclusive = useCallback(d => {
+    if (!pendingStart || !pendingEnd) {
+      return false;
+    }
+    const t = startOfDay(d).getTime();
+    return t >= pendingStart.getTime() && t <= pendingEnd.getTime();
+  }, [pendingStart, pendingEnd]);
+  const confirmDisabled = !pendingStart || !pendingEnd;
+  const calendar = /*#__PURE__*/_jsxs(View, {
+    style: [styles.card, style, containerStyle],
+    ref: ref,
+    accessible: false,
+    testID: calendarTestID,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.titleRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        accessibilityRole: "header",
+        children: title
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.subtitle,
+        accessibilityLiveRegion: "polite",
+        children: rangeHeader
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.headerRow,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        onPress: goPrev,
+        style: ({
+          pressed
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
+        accessibilityRole: "button",
+        accessibilityLabel: "Previous month",
+        hitSlop: 8,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.navText,
+          children: '‹'
+        })
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.headerLabelWrap, {
+          opacity: monthFade,
+          transform: [{
+            translateX: monthSlide
+          }]
+        }, headerLabelStyle],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.headerLabel,
+          accessibilityLiveRegion: "polite",
+          children: headerLabel
+        })
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: goNext,
+        style: ({
+          pressed
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
+        accessibilityRole: "button",
+        accessibilityLabel: "Next month",
+        hitSlop: 8,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.navText,
+          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 isStart = pendingStart ? isSameDay(cell.date, pendingStart) : false;
+          const isEnd = pendingEnd ? isSameDay(cell.date, pendingEnd) : false;
+          const inRange = isInRangeInclusive(cell.date);
+          const isMidRange = inRange && !isStart && !isEnd;
+          const todayCell = isSameDay(cell.date, today);
+          const edgeColor = theme.colors.primary;
+          const midColor = theme.colors.primaryMuted;
+          const textColor = isStart || isEnd ? 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;
+
+          // For middle days connect via a full-width bar background on the cell;
+          // edges connect on one side (right for start, left for end).
+          const showLeftBar = inRange && !!pendingStart && !!pendingEnd && (isEnd || isMidRange);
+          const showRightBar = inRange && !!pendingStart && !!pendingEnd && (isStart || isMidRange);
+          const a11ySuffix = isStart ? ', start of range' : isEnd ? ', end of range' : isMidRange ? ', in selected range' : '';
+          return /*#__PURE__*/_jsxs(Pressable, {
+            disabled: disabled,
+            onPress: () => pressDay(cell),
+            accessibilityRole: "button",
+            accessibilityLabel: `${formatLongDate(cell.date, locale)}${a11ySuffix}`,
+            accessibilityState: {
+              selected: isStart || isEnd,
+              disabled,
+              busy: isMidRange
+            },
+            style: styles.dayCell,
+            children: [showLeftBar ? /*#__PURE__*/_jsx(View, {
+              style: [styles.barLeft, {
+                backgroundColor: midColor
+              }],
+              pointerEvents: "none"
+            }) : null, showRightBar ? /*#__PURE__*/_jsx(View, {
+              style: [styles.barRight, {
+                backgroundColor: midColor
+              }],
+              pointerEvents: "none"
+            }) : null, /*#__PURE__*/_jsx(View, {
+              style: [styles.dayInner, {
+                backgroundColor: isStart || isEnd ? edgeColor : isMidRange ? midColor : 'transparent',
+                borderColor: todayCell && !(isStart || isEnd) ? edgeColor : 'transparent',
+                borderWidth: todayCell && !(isStart || isEnd) ? 1.5 : 0,
+                borderRadius: isMidRange ? theme.radius.none : theme.radius.full,
+                opacity
+              }],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.dayText, {
+                  color: textColor
+                }],
+                children: cell.date.getDate()
+              })
+            })]
+          }, cell.iso);
+        })
+      }, `r-${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: confirmDisabled,
+        style: ({
+          pressed
+        }) => [styles.footerBtn, styles.footerConfirm, {
+          backgroundColor: theme.colors.primary,
+          opacity: confirmDisabled ? 0.5 : 1
+        }, pressed && {
+          backgroundColor: theme.colors.primaryHover
+        }, footerButtonStyle],
+        accessibilityRole: "button",
+        accessibilityLabel: confirmLabel,
+        accessibilityState: {
+          disabled: confirmDisabled
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.footerBtnText, {
+            color: theme.colors.text.inverse
+          }],
+          children: confirmLabel
+        })
+      })]
+    })]
+  });
+  const triggerValueText = useMemo(() => {
+    if (!value.start || !value.end) {
+      return '';
+    }
+    const range = {
+      start: value.start,
+      end: value.end
+    };
+    if (formatValue) {
+      return formatValue(range);
+    }
+    return `${range.start.toLocaleDateString()} – ${range.end.toLocaleDateString()}`;
+  }, [value.start, value.end, formatValue]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!isControlled ? /*#__PURE__*/_jsx(PickerTrigger, {
+      label: label,
+      placeholder: placeholder,
+      helperText: helperText,
+      error: error,
+      required: required,
+      disabled: disabled,
+      size: size,
+      variant: variant,
+      clearable: clearable,
+      onClear: onClear,
+      value: triggerValueText,
+      onPress: () => setInternalOpen(true),
+      triggerStyle: triggerStyle,
+      testID: testID
+    }) : null, /*#__PURE__*/_jsx(Modal, {
+      visible: open,
+      transparent: true,
+      statusBarTranslucent: true,
+      navigationBarTranslucent: true,
+      animationType: "none",
+      onRequestClose: handleClose,
+      children: /*#__PURE__*/_jsxs(View
+      // Backdrop wraps the sheet — see Modal.tsx for the Fabric reason.
+      , {
+        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, {
+            paddingBottom: insets.bottom + theme.spacing.lg,
+            opacity: sheet,
+            transform: [{
+              translateY: sheetTranslate
+            }]
+          }],
+          accessibilityViewIsModal: true,
+          accessibilityRole: "none",
+          children: calendar
+        })]
+      })
+    })]
+  });
+});
+DateRangePicker.displayName = 'DateRangePicker';
+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,
+      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
+    },
+    subtitle: {
+      marginTop: theme.spacing.xxs,
+      fontSize: theme.typography.fontSize.sm,
+      color: theme.colors.text.secondary
+    },
+    headerRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: theme.spacing.md
+    },
+    navBtn: {
+      width: theme.components.dateRangePicker?.navButtonSize ?? 36,
+      height: theme.components.dateRangePicker?.navButtonSize ?? 36,
+      borderRadius: theme.radius.full,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.background.secondary
+    },
+    navBtnPressed: {
+      backgroundColor: theme.colors.surface.pressed
+    },
+    navText: {
+      fontSize: theme.components.dateRangePicker?.navTextFontSize ?? 22,
+      lineHeight: theme.components.dateRangePicker?.navTextLineHeight ?? 24,
+      color: theme.colors.text.primary,
+      fontWeight: theme.typography.fontWeight.semibold
+    },
+    headerLabelWrap: {
+      flex: 1,
+      alignItems: 'center'
+    },
+    headerLabel: {
+      fontSize: theme.typography.fontSize.base,
+      fontWeight: theme.typography.fontWeight.semibold,
+      color: theme.colors.text.primary
+    },
+    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 wrapper.
+    },
+    gridRow: {
+      flexDirection: 'row'
+    },
+    dayCell: {
+      flex: 1,
+      aspectRatio: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      // No horizontal padding so the connector bars on adjacent cells meet
+      // without a gap. Vertical breathing room comes from dayInner's height.
+      padding: 0,
+      position: 'relative'
+    },
+    // Bars sit BEHIND dayInner and bridge the start/end circles to mid-range
+    // cells. Their height mirrors dayInner (~90% of cell height) so the visual
+    // pill is one continuous shape across multiple cells.
+    barLeft: {
+      position: 'absolute',
+      left: 0,
+      right: '50%',
+      top: '5%',
+      bottom: '5%'
+    },
+    barRight: {
+      position: 'absolute',
+      left: '50%',
+      right: 0,
+      top: '5%',
+      bottom: '5%'
+    },
+    dayInner: {
+      width: '90%',
+      height: '90%',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    dayText: {
+      fontSize: theme.typography.fontSize.sm,
+      fontWeight: theme.typography.fontWeight.medium
+    },
+    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: theme.components.dateRangePicker?.footerButtonMinHeight ?? 40,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    footerCancel: {
+      backgroundColor: 'transparent'
+    },
+    footerConfirm: {
+      // backgroundColor set inline.
+    },
+    footerBtnPressed: {
+      opacity: 0.85
+    },
+    footerBtnText: {
+      fontSize: theme.typography.fontSize.sm,
+      fontWeight: theme.typography.fontWeight.semibold
+    }
+  });
+};
+export { DateRangePicker };
+export default DateRangePicker;
+//# sourceMappingURL=DateRangePicker.js.map