@webority/mobile-ui 0.0.39 → 0.2.0

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

@@ -1,791 +1 @@
-"use strict";
-
-import { forwardRef, 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 { 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;
-  // 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;
-
-  // 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);
-      setNativeValue(drag, 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, 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 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]);
-
-  // 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 (!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__*/_jsx(GestureDetector, {
-      gesture: handleGesture,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.grabArea,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.handle
-        }), /*#__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,
-                ...smoothCorners,
-                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(GestureHandlerRootView
-      // Backdrop wraps the sheet — see Modal.tsx for the Fabric reason.
-      // 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, {
-            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
-        })]
-      })
-    })]
-  });
-});
-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,
-      ...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
-    },
-    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,
-      ...smoothCorners,
-      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,
-      ...smoothCorners,
-      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
+"use strict";import{forwardRef,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{PickerTrigger}from"../PickerTrigger/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DAY_MS=864e5,startOfDay=e=>new Date(e.getFullYear(),e.getMonth(),e.getDate()),isSameDay=(e,t)=>e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate(),toIso=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,addMonths=(e,t)=>new Date(e.getFullYear(),e.getMonth()+t,1),daysBetween=(e,t)=>{const a=startOfDay(t).getTime()-startOfDay(e).getTime();return Math.round(a/DAY_MS)},buildMonthMatrix=(e,t)=>{const a=e.getFullYear(),r=e.getMonth(),o=(new Date(a,r,1).getDay()-t+7)%7,i=[];for(let e=0;e<42;e+=1){const t=new Date(a,r,1-o+e);i.push({date:t,inMonth:t.getMonth()===r,iso:toIso(t)})}return i},weekdayLabels=(e,t)=>{const a=new Intl.DateTimeFormat(e,{weekday:"short"}),r=[];for(let e=0;e<7;e+=1){const o=new Date(1970,0,4+(t+e)%7);r.push(a.format(o))}return r},formatMonthYear=(e,t)=>new Intl.DateTimeFormat(t,{month:"long",year:"numeric"}).format(e),formatRangePart=(e,t)=>new Intl.DateTimeFormat(t,{weekday:"short",day:"numeric",month:"short"}).format(e),formatLongDate=(e,t)=>new Intl.DateTimeFormat(t,{weekday:"long",year:"numeric",month:"long",day:"numeric"}).format(e),DateRangePicker=forwardRef((e,t)=>{const{visible:a,value:r,onChange:o,onClose:i,label:n,placeholder:s,helperText:l,error:c,required:d,disabled:g,size:u,variant:m,clearable:y,onClear:f,formatValue:p,triggerStyle:h,minDate:b,maxDate:x,disabledDates:D,locale:w="en-IN",weekStartsOn:S=0,title:v="Select Date Range",confirmLabel:R="Confirm",cancelLabel:T="Cancel",maxRange:k,haptic:j,style:C,containerStyle:P,headerLabelStyle:_,navButtonStyle:V,footerButtonStyle:M,testID:A}=e,B=void 0!==a,[I,L]=useState(!1),z=B?a:I,O=B?A:A?`${A}-calendar`:void 0,H=useTheme(),F=useSafeAreaInsets(),W=useMemo(()=>buildStyles(H),[H]),[E,N]=useState(()=>startOfDay(new Date));useEffect(()=>{z&&N(startOfDay(new Date))},[z]);const $=r.start?startOfDay(r.start):E,[Y,q]=useState($),[G,X]=useState(r.start?startOfDay(r.start):null),[J,K]=useState(r.end?startOfDay(r.end):null),Q=useRef(createAnimatedValue(0)).current,U=useRef(createAnimatedValue(0)).current,Z=useRef(createAnimatedValue(0)).current,ee=useRef(0),te=useRef(createAnimatedValue(0)).current,ae=useRef(createAnimatedValue(1)).current;useEffect(()=>{if(r.start){const e=startOfDay(r.start);X(e),q(e)}else X(null);r.end?K(startOfDay(r.end)):K(null)},[r.start,r.end]),useEffect(()=>{let e;return z&&(Q.setValue(0),setNativeValue(U,0),setNativeValue(Z,0),e=Animated.parallel([Animated.timing(Q,{toValue:1,duration:H.motion.duration.normal,easing:Easing.out(Easing.cubic),useNativeDriver:!1}),Animated.spring(U,{toValue:1,damping:H.motion.spring.gentle.damping,stiffness:H.motion.spring.gentle.stiffness,mass:H.motion.spring.gentle.mass,useNativeDriver:!0})]),e.start()),()=>e?.stop()},[z,Q,U,Z,H.motion]);const re=useMemo(()=>{const e=new Set;return D?.forEach(t=>e.add(toIso(startOfDay(t)))),e},[D]),oe=useMemo(()=>b?startOfDay(b):null,[b]),ie=useMemo(()=>x?startOfDay(x):null,[x]),ne=useCallback(e=>!!(oe&&e.getTime()<oe.getTime())||(!!(ie&&e.getTime()>ie.getTime())||!!re.has(toIso(e))),[oe,ie,re]),se=useMemo(()=>buildMonthMatrix(Y,S),[Y,S]),le=useMemo(()=>formatMonthYear(Y,w),[Y,w]),ce=useMemo(()=>weekdayLabels(w,S),[w,S]),de=useCallback(e=>{!1!==j&&triggerHaptic("impactLight");const t=e>0?1:-1,a=H.components.dateRangePicker?.monthSlideDistance??32,r=H.components.dateRangePicker?.monthSlideOutDuration??H.motion.duration.fast??140,o=H.components.dateRangePicker?.monthSlideInDuration??H.motion.duration.fast??160;Animated.sequence([Animated.parallel([Animated.timing(te,{toValue:-t*a,duration:r,easing:Easing.out(Easing.quad),useNativeDriver:!0}),Animated.timing(ae,{toValue:0,duration:r,useNativeDriver:!0})]),Animated.timing(te,{toValue:t*a,duration:0,useNativeDriver:!0}),Animated.parallel([Animated.timing(te,{toValue:0,duration:o,easing:Easing.out(Easing.cubic),useNativeDriver:!0}),Animated.timing(ae,{toValue:1,duration:o,useNativeDriver:!0})])]).start();const i=addMonths(Y,e);q(i),AccessibilityInfo.announceForAccessibility(formatMonthYear(i,w))},[Y,j,w,ae,te,H.components.dateRangePicker,H.motion.duration.fast]),ge=useCallback(()=>de(-1),[de]),ue=useCallback(()=>de(1),[de]),me=useCallback(e=>{if(ne(e.date))return;const t=resolveHaptic(j,"selection");t&&triggerHaptic(t);const a=e.date;if(!G||G&&J)X(a),K(null);else if(a.getTime()<G.getTime())X(a),K(null);else if(isSameDay(a,G))K(a);else{if(k&&daysBetween(G,a)+1>k)return!1!==j&&triggerHaptic("notificationWarning"),X(a),void K(null);K(a)}e.inMonth||q(new Date(e.date.getFullYear(),e.date.getMonth(),1))},[ne,G,J,k,j]),ye=useCallback(()=>{B?i?.():L(!1)},[B,i]),fe=useCallback(()=>{Animated.parallel([Animated.timing(Q,{toValue:0,duration:H.motion.duration.fast,easing:Easing.bezier(...H.motion.easing.accelerate),useNativeDriver:!1}),Animated.timing(U,{toValue:0,duration:H.motion.duration.fast,easing:Easing.bezier(...H.motion.easing.accelerate),useNativeDriver:!0})]).start(()=>{ye()})},[Q,ye,U,H.motion.duration.fast,H.motion.easing.accelerate]),{handleGesture:pe}=useDragToDismiss({drag:Z,travel:()=>ee.current||320,onDismiss:fe}),he=useCallback(()=>{!1!==j&&triggerHaptic("selection"),fe()},[fe,j]),be=useCallback(()=>{G&&J&&(!1!==j&&triggerHaptic("notificationSuccess"),o?.({start:G,end:J}),fe())},[fe,o,G,J,j]),xe=U.interpolate({inputRange:[0,1],outputRange:[320,0]}),De=useMemo(()=>G&&J?`${formatRangePart(G,w)} — ${formatRangePart(J,w)}`:G?`${formatRangePart(G,w)} — …`:"—",[G,J,w]),we=useCallback(e=>{if(!G||!J)return!1;const t=startOfDay(e).getTime();return t>=G.getTime()&&t<=J.getTime()},[G,J]),Se=!G||!J,ve=_jsxs(View,{style:[W.card,C,P],ref:t,accessible:!1,testID:O,children:[_jsx(GestureDetector,{gesture:pe,children:_jsxs(View,{style:W.grabArea,children:[_jsx(View,{style:W.handle}),_jsxs(View,{style:W.titleRow,children:[_jsx(Text,{style:W.title,accessibilityRole:"header",children:v}),_jsx(Text,{style:W.subtitle,accessibilityLiveRegion:"polite",children:De})]})]})}),_jsxs(View,{style:W.headerRow,children:[_jsx(Pressable,{onPress:ge,style:({pressed:e})=>[W.navBtn,e&&W.navBtnPressed,V],accessibilityRole:"button",accessibilityLabel:"Previous month",hitSlop:8,children:_jsx(Text,{style:W.navText,children:"‹"})}),_jsx(Animated.View,{style:[W.headerLabelWrap,{opacity:ae,transform:[{translateX:te}]},_],children:_jsx(Text,{style:W.headerLabel,accessibilityLiveRegion:"polite",children:le})}),_jsx(Pressable,{onPress:ue,style:({pressed:e})=>[W.navBtn,e&&W.navBtnPressed,V],accessibilityRole:"button",accessibilityLabel:"Next month",hitSlop:8,children:_jsx(Text,{style:W.navText,children:"›"})})]}),_jsx(View,{style:W.weekdayRow,children:ce.map((e,t)=>_jsx(View,{style:W.weekdayCell,children:_jsx(Text,{style:W.weekdayText,children:e})},`${e}-${t}`))}),_jsx(Animated.View,{style:[W.grid,{opacity:ae,transform:[{translateX:te}]}],children:Array.from({length:6}).map((e,t)=>_jsx(View,{style:W.gridRow,children:se.slice(7*t,7*t+7).map(e=>{const t=ne(e.date),a=!!G&&isSameDay(e.date,G),r=!!J&&isSameDay(e.date,J),o=we(e.date),i=o&&!a&&!r,n=isSameDay(e.date,E),s=H.colors.primary,l=H.colors.primaryMuted,c=a||r?H.colors.onPrimary:e.inMonth?t?H.colors.text.disabled:H.colors.text.primary:H.colors.text.tertiary,d=t?.3:e.inMonth?1:.4,g=o&&!!G&&!!J&&(r||i),u=o&&!!G&&!!J&&(a||i),m=a?", start of range":r?", end of range":i?", in selected range":"";return _jsxs(Pressable,{disabled:t,onPress:()=>me(e),accessibilityRole:"button",accessibilityLabel:`${formatLongDate(e.date,w)}${m}`,accessibilityState:{selected:a||r,disabled:t,busy:i},style:W.dayCell,children:[g?_jsx(View,{style:[W.barLeft,{backgroundColor:l}],pointerEvents:"none"}):null,u?_jsx(View,{style:[W.barRight,{backgroundColor:l}],pointerEvents:"none"}):null,_jsx(View,{style:[W.dayInner,{backgroundColor:a||r?s:i?l:"transparent",borderColor:!n||a||r?"transparent":s,borderWidth:!n||a||r?0:1.5,borderRadius:i?H.radius.none:H.radius.full,...smoothCorners,opacity:d}],children:_jsx(Text,{style:[W.dayText,{color:c}],children:e.date.getDate()})})]},e.iso)})},`r-${t}`))}),_jsxs(View,{style:W.footer,children:[_jsx(Pressable,{onPress:he,style:({pressed:e})=>[W.footerBtn,W.footerCancel,e&&W.footerBtnPressed,M],accessibilityRole:"button",accessibilityLabel:T,children:_jsx(Text,{style:[W.footerBtnText,{color:H.colors.text.secondary}],children:T})}),_jsx(Pressable,{onPress:be,disabled:Se,style:({pressed:e})=>[W.footerBtn,W.footerConfirm,{backgroundColor:H.colors.primary,opacity:Se?.5:1},e&&{backgroundColor:H.colors.primaryHover},M],accessibilityRole:"button",accessibilityLabel:R,accessibilityState:{disabled:Se},children:_jsx(Text,{style:[W.footerBtnText,{color:H.colors.onPrimary}],children:R})})]})]}),Re=useMemo(()=>{if(!r.start||!r.end)return"";const e={start:r.start,end:r.end};return p?p(e):`${e.start.toLocaleDateString()} – ${e.end.toLocaleDateString()}`},[r.start,r.end,p]);return _jsxs(_Fragment,{children:[B?null:_jsx(PickerTrigger,{label:n,placeholder:s,helperText:l,error:c,required:d,disabled:g,size:u,variant:m,clearable:y,onClear:f,value:Re,onPress:()=>L(!0),triggerStyle:h,testID:A}),_jsx(Modal,{visible:z,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:fe,children:_jsxs(GestureHandlerRootView,{collapsable:!1,style:[W.backdrop,{backgroundColor:H.colors.background.overlay}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:fe,accessibilityLabel:"Dismiss"}),_jsx(Animated.View,{style:[W.sheetWrap,{paddingBottom:Math.max(F.bottom,H.spacing.lg),opacity:U,transform:[{translateY:Animated.add(xe,Z)}]}],onLayout:e=>{ee.current=e.nativeEvent.layout.height},accessibilityViewIsModal:!0,accessibilityRole:"none",children:ve}),_jsx(ToastHost,{})]})})]})});DateRangePicker.displayName="DateRangePicker";const buildStyles=e=>{const t=e.shadows.lg;return StyleSheet.create({backdrop:{...StyleSheet.absoluteFill},sheetWrap:{position:"absolute",left:0,right:0,bottom:0,paddingHorizontal:e.spacing.md,paddingBottom:e.spacing.lg},card:{backgroundColor:e.colors.background.elevated,borderRadius:e.radius.xl,...smoothCorners,padding:e.spacing.lg,shadowColor:t.shadowColor,shadowOffset:t.shadowOffset,shadowOpacity:t.shadowOpacity,shadowRadius:t.shadowRadius,elevation:t.elevation},grabArea:{marginTop:-e.spacing.lg,paddingTop:e.spacing.sm},handle:{alignSelf:"center",width:36,height:4,borderRadius:e.radius.full,...smoothCorners,backgroundColor:e.colors.border.secondary,marginBottom:e.spacing.sm},titleRow:{marginBottom:e.spacing.sm},title:{fontSize:e.typography.fontSize.lg,fontWeight:e.typography.fontWeight.semibold,color:e.colors.text.primary},subtitle:{marginTop:e.spacing.xxs,fontSize:e.typography.fontSize.sm,color:e.colors.text.secondary},headerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:e.spacing.md},navBtn:{width:e.components.dateRangePicker?.navButtonSize??36,height:e.components.dateRangePicker?.navButtonSize??36,borderRadius:e.radius.full,...smoothCorners,alignItems:"center",justifyContent:"center",backgroundColor:e.colors.background.secondary},navBtnPressed:{backgroundColor:e.colors.surface.pressed},navText:{fontSize:e.components.dateRangePicker?.navTextFontSize??22,lineHeight:e.components.dateRangePicker?.navTextLineHeight??24,color:e.colors.text.primary,fontWeight:e.typography.fontWeight.semibold},headerLabelWrap:{flex:1,alignItems:"center"},headerLabel:{fontSize:e.typography.fontSize.base,fontWeight:e.typography.fontWeight.semibold,color:e.colors.text.primary},weekdayRow:{flexDirection:"row",marginBottom:e.spacing.xs},weekdayCell:{flex:1,alignItems:"center",paddingVertical:e.spacing.xs},weekdayText:{fontSize:e.typography.fontSize.xs,fontWeight:e.typography.fontWeight.medium,color:e.colors.text.tertiary,letterSpacing:e.typography.letterSpacing.wide},grid:{},gridRow:{flexDirection:"row"},dayCell:{flex:1,aspectRatio:1,alignItems:"center",justifyContent:"center",padding:0,position:"relative"},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:e.typography.fontSize.sm,fontWeight:e.typography.fontWeight.medium},footer:{flexDirection:"row",justifyContent:"flex-end",alignItems:"center",marginTop:e.spacing.lg,gap:e.spacing.sm},footerBtn:{paddingHorizontal:e.spacing.lg,paddingVertical:e.spacing.sm,borderRadius:e.radius.md,...smoothCorners,minHeight:e.components.dateRangePicker?.footerButtonMinHeight??40,alignItems:"center",justifyContent:"center"},footerCancel:{backgroundColor:"transparent"},footerConfirm:{},footerBtnPressed:{opacity:.85},footerBtnText:{fontSize:e.typography.fontSize.sm,fontWeight:e.typography.fontWeight.semibold}})};export{DateRangePicker};export default DateRangePicker;