@webority/mobile-ui 0.0.38 → 0.1.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
+import{forwardRef as e,useCallback as t,useEffect as o,useMemo as n,useRef as r,useState as a}from"react";import{AccessibilityInfo as i,Animated as s,Easing as l,Modal as c,Pressable as d,StyleSheet as g,Text as u,View as m}from"react-native";import{GestureDetector as p,GestureHandlerRootView as h}from"react-native-gesture-handler";import{useSafeAreaInsets as y}from"react-native-safe-area-context";import{useDragToDismiss as f}from"../../hooks/useDragToDismiss.js";import{createAnimatedValue as b,setNativeValue as v,useTheme as w}from"../../theme/index.js";import{resolveHaptic as x,triggerHaptic as D}from"../../utils/index.js";import{smoothCorners as R}from"../../utils/corners.js";import{PickerTrigger as S}from"../PickerTrigger/index.js";import{ToastHost as T}from"../Toast/ToastProvider.js";import{jsx as k,jsxs as C,Fragment as B}from"react/jsx-runtime";const 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")}`,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),P=e((e,P)=>{const{visible:z,value:L,onChange:I,onClose:W,label:M,placeholder:V,helperText:F,error:j,required:$,disabled:N,size:Y,variant:H,clearable:O,onClear:q,formatValue:A,triggerStyle:E,minDate:X,maxDate:G,disabledDates:J,locale:K="en-IN",weekStartsOn:Q=0,title:U="Select Date Range",confirmLabel:Z="Confirm",cancelLabel:_="Cancel",maxRange:ee,haptic:te,style:oe,containerStyle:ne,headerLabelStyle:re,navButtonStyle:ae,footerButtonStyle:ie,testID:se}=e,le=void 0!==z,[ce,de]=a(!1),ge=le?z:ce,ue=le?se:se?`${se}-calendar`:void 0,me=w(),pe=y(),he=n(()=>buildStyles(me),[me]),[ye,fe]=a(()=>startOfDay(new Date));o(()=>{ge&&fe(startOfDay(new Date))},[ge]);const be=L.start?startOfDay(L.start):ye,[ve,we]=a(be),[xe,De]=a(L.start?startOfDay(L.start):null),[Re,Se]=a(L.end?startOfDay(L.end):null),Te=r(b(0)).current,ke=r(b(0)).current,Ce=r(b(0)).current,Be=r(0),Pe=r(b(0)).current,ze=r(b(1)).current;o(()=>{if(L.start){const e=startOfDay(L.start);De(e),we(e)}else De(null);L.end?Se(startOfDay(L.end)):Se(null)},[L.start,L.end]),o(()=>{let e;return ge&&(Te.setValue(0),v(ke,0),v(Ce,0),e=s.parallel([s.timing(Te,{toValue:1,duration:me.motion.duration.normal,easing:l.out(l.cubic),useNativeDriver:!1}),s.spring(ke,{toValue:1,damping:me.motion.spring.gentle.damping,stiffness:me.motion.spring.gentle.stiffness,mass:me.motion.spring.gentle.mass,useNativeDriver:!0})]),e.start()),()=>e?.stop()},[ge,Te,ke,Ce,me.motion]);const Le=n(()=>{const e=new Set;return J?.forEach(t=>e.add(toIso(startOfDay(t)))),e},[J]),Ie=n(()=>X?startOfDay(X):null,[X]),We=n(()=>G?startOfDay(G):null,[G]),Me=t(e=>!!(Ie&&e.getTime()<Ie.getTime())||(!!(We&&e.getTime()>We.getTime())||!!Le.has(toIso(e))),[Ie,We,Le]),Ve=n(()=>((e,t)=>{const o=e.getFullYear(),n=e.getMonth(),r=(new Date(o,n,1).getDay()-t+7)%7,a=[];for(let e=0;e<42;e+=1){const t=new Date(o,n,1-r+e);a.push({date:t,inMonth:t.getMonth()===n,iso:toIso(t)})}return a})(ve,Q),[ve,Q]),Fe=n(()=>formatMonthYear(ve,K),[ve,K]),je=n(()=>((e,t)=>{const o=new Intl.DateTimeFormat(e,{weekday:"short"}),n=[];for(let e=0;e<7;e+=1){const r=new Date(1970,0,4+(t+e)%7);n.push(o.format(r))}return n})(K,Q),[K,Q]),$e=t(e=>{!1!==te&&D("impactLight");const t=e>0?1:-1,o=me.components.dateRangePicker?.monthSlideDistance??32,n=me.components.dateRangePicker?.monthSlideOutDuration??me.motion.duration.fast??140,r=me.components.dateRangePicker?.monthSlideInDuration??me.motion.duration.fast??160;s.sequence([s.parallel([s.timing(Pe,{toValue:-t*o,duration:n,easing:l.out(l.quad),useNativeDriver:!0}),s.timing(ze,{toValue:0,duration:n,useNativeDriver:!0})]),s.timing(Pe,{toValue:t*o,duration:0,useNativeDriver:!0}),s.parallel([s.timing(Pe,{toValue:0,duration:r,easing:l.out(l.cubic),useNativeDriver:!0}),s.timing(ze,{toValue:1,duration:r,useNativeDriver:!0})])]).start();const a=((e,t)=>new Date(e.getFullYear(),e.getMonth()+t,1))(ve,e);we(a),i.announceForAccessibility(formatMonthYear(a,K))},[ve,te,K,ze,Pe,me.components.dateRangePicker,me.motion.duration.fast]),Ne=t(()=>$e(-1),[$e]),Ye=t(()=>$e(1),[$e]),He=t(e=>{if(Me(e.date))return;const t=x(te,"selection");t&&D(t);const o=e.date;if(!xe||xe&&Re)De(o),Se(null);else if(o.getTime()<xe.getTime())De(o),Se(null);else if(isSameDay(o,xe))Se(o);else{if(ee&&((e,t)=>{const o=startOfDay(t).getTime()-startOfDay(e).getTime();return Math.round(o/864e5)})(xe,o)+1>ee)return!1!==te&&D("notificationWarning"),De(o),void Se(null);Se(o)}e.inMonth||we(new Date(e.date.getFullYear(),e.date.getMonth(),1))},[Me,xe,Re,ee,te]),Oe=t(()=>{le?W?.():de(!1)},[le,W]),qe=t(()=>{s.parallel([s.timing(Te,{toValue:0,duration:me.motion.duration.fast,easing:l.bezier(...me.motion.easing.accelerate),useNativeDriver:!1}),s.timing(ke,{toValue:0,duration:me.motion.duration.fast,easing:l.bezier(...me.motion.easing.accelerate),useNativeDriver:!0})]).start(()=>{Oe()})},[Te,Oe,ke,me.motion.duration.fast,me.motion.easing.accelerate]),{handleGesture:Ae}=f({drag:Ce,travel:()=>Be.current||320,onDismiss:qe}),Ee=t(()=>{!1!==te&&D("selection"),qe()},[qe,te]),Xe=t(()=>{xe&&Re&&(!1!==te&&D("notificationSuccess"),I?.({start:xe,end:Re}),qe())},[qe,I,xe,Re,te]),Ge=ke.interpolate({inputRange:[0,1],outputRange:[320,0]}),Je=n(()=>xe&&Re?`${formatRangePart(xe,K)} — ${formatRangePart(Re,K)}`:xe?`${formatRangePart(xe,K)} — …`:"—",[xe,Re,K]),Ke=t(e=>{if(!xe||!Re)return!1;const t=startOfDay(e).getTime();return t>=xe.getTime()&&t<=Re.getTime()},[xe,Re]),Qe=!xe||!Re,Ue=C(m,{style:[he.card,oe,ne],ref:P,accessible:!1,testID:ue,children:[k(p,{gesture:Ae,children:C(m,{style:he.grabArea,children:[k(m,{style:he.handle}),C(m,{style:he.titleRow,children:[k(u,{style:he.title,accessibilityRole:"header",children:U}),k(u,{style:he.subtitle,accessibilityLiveRegion:"polite",children:Je})]})]})}),C(m,{style:he.headerRow,children:[k(d,{onPress:Ne,style:({pressed:e})=>[he.navBtn,e&&he.navBtnPressed,ae],accessibilityRole:"button",accessibilityLabel:"Previous month",hitSlop:8,children:k(u,{style:he.navText,children:"‹"})}),k(s.View,{style:[he.headerLabelWrap,{opacity:ze,transform:[{translateX:Pe}]},re],children:k(u,{style:he.headerLabel,accessibilityLiveRegion:"polite",children:Fe})}),k(d,{onPress:Ye,style:({pressed:e})=>[he.navBtn,e&&he.navBtnPressed,ae],accessibilityRole:"button",accessibilityLabel:"Next month",hitSlop:8,children:k(u,{style:he.navText,children:"›"})})]}),k(m,{style:he.weekdayRow,children:je.map((e,t)=>k(m,{style:he.weekdayCell,children:k(u,{style:he.weekdayText,children:e})},`${e}-${t}`))}),k(s.View,{style:[he.grid,{opacity:ze,transform:[{translateX:Pe}]}],children:Array.from({length:6}).map((e,t)=>k(m,{style:he.gridRow,children:Ve.slice(7*t,7*t+7).map(e=>{const t=Me(e.date),o=!!xe&&isSameDay(e.date,xe),n=!!Re&&isSameDay(e.date,Re),r=Ke(e.date),a=r&&!o&&!n,i=isSameDay(e.date,ye),s=me.colors.primary,l=me.colors.primaryMuted,c=o||n?me.colors.onPrimary:e.inMonth?t?me.colors.text.disabled:me.colors.text.primary:me.colors.text.tertiary,g=t?.3:e.inMonth?1:.4,p=r&&!!xe&&!!Re&&(n||a),h=r&&!!xe&&!!Re&&(o||a),y=o?", start of range":n?", end of range":a?", in selected range":"";return C(d,{disabled:t,onPress:()=>He(e),accessibilityRole:"button",accessibilityLabel:`${formatLongDate(e.date,K)}${y}`,accessibilityState:{selected:o||n,disabled:t,busy:a},style:he.dayCell,children:[p?k(m,{style:[he.barLeft,{backgroundColor:l}],pointerEvents:"none"}):null,h?k(m,{style:[he.barRight,{backgroundColor:l}],pointerEvents:"none"}):null,k(m,{style:[he.dayInner,{backgroundColor:o||n?s:a?l:"transparent",borderColor:!i||o||n?"transparent":s,borderWidth:!i||o||n?0:1.5,borderRadius:a?me.radius.none:me.radius.full,...R,opacity:g}],children:k(u,{style:[he.dayText,{color:c}],children:e.date.getDate()})})]},e.iso)})},`r-${t}`))}),C(m,{style:he.footer,children:[k(d,{onPress:Ee,style:({pressed:e})=>[he.footerBtn,he.footerCancel,e&&he.footerBtnPressed,ie],accessibilityRole:"button",accessibilityLabel:_,children:k(u,{style:[he.footerBtnText,{color:me.colors.text.secondary}],children:_})}),k(d,{onPress:Xe,disabled:Qe,style:({pressed:e})=>[he.footerBtn,he.footerConfirm,{backgroundColor:me.colors.primary,opacity:Qe?.5:1},e&&{backgroundColor:me.colors.primaryHover},ie],accessibilityRole:"button",accessibilityLabel:Z,accessibilityState:{disabled:Qe},children:k(u,{style:[he.footerBtnText,{color:me.colors.onPrimary}],children:Z})})]})]}),Ze=n(()=>{if(!L.start||!L.end)return"";const e={start:L.start,end:L.end};return A?A(e):`${e.start.toLocaleDateString()} – ${e.end.toLocaleDateString()}`},[L.start,L.end,A]);return C(B,{children:[le?null:k(S,{label:M,placeholder:V,helperText:F,error:j,required:$,disabled:N,size:Y,variant:H,clearable:O,onClear:q,value:Ze,onPress:()=>de(!0),triggerStyle:E,testID:se}),k(c,{visible:ge,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:qe,children:C(h,{collapsable:!1,style:[he.backdrop,{backgroundColor:me.colors.background.overlay}],children:[k(d,{style:g.absoluteFill,onPress:qe,accessibilityLabel:"Dismiss"}),k(s.View,{style:[he.sheetWrap,{paddingBottom:Math.max(pe.bottom,me.spacing.lg),opacity:ke,transform:[{translateY:s.add(Ge,Ce)}]}],onLayout:e=>{Be.current=e.nativeEvent.layout.height},accessibilityViewIsModal:!0,accessibilityRole:"none",children:Ue}),k(T,{})]})})]})});P.displayName="DateRangePicker";const buildStyles=e=>{const t=e.shadows.lg;return g.create({backdrop:{...g.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,...R,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,...R,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,...R,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,...R,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{P as DateRangePicker};export default P;